1.背景渐变
.gradient1 {background:linear-gradient(135deg,red, blue 20%, orange); // 135度 20%表示渐变点的位置} .gradient2 {background:-webkit-radial-gradient(1px 10px,red , blue , orange); 1px 10px 表示圆心 默认在证中间}
2.文字复合写法：
规则一：必须声明 font-size 和 font-family 的值。规则二：所有值必须按如下顺序声明。1. font-weight 、 font-style 、 font-variant 不分先后；2. 然后是 font-size ；3. 最后是 font-family
3.单行文本溢出：overflow：hidden; white-space: nowrap;text-overflow: ellipsis; 多行文本截断处理：text-overflow: ellipsis;
4.如何触发一个盒子的bfc:1.position:absolute设置定位后盒子自然就变成bfc元素了2.display:inline-block3.float:left/right向左向右浮动4.overflow:hidden溢出盒子部分隐藏
解决高度塌陷问题通过bfc
5. 重置收藏
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;} ol,ul{margin:0; padding:0;}
6. box-sizing: border-box; 诡异盒模型
text-align:center; display: table-cell;vertical-align: middle; 图片垂直水平居中
7.三栏负值布局
<style> .left{ background: yellow; width: 200px; float: left; } .body{ background: green; margin-left:200px; margin-right:200px;*/ } .right{ border:1px solid blue; background: pink; width: 200px; float:right; } </style> <aside class="left">左边栏<br><br><br><br><br></aside> <aside class="right">右边栏<br><br><br></aside> <aside class="body">中间一栏<br<br><br><br></aside>
animation: up 1.2s .6s backwards;7. 滚动标签：
<marquee direction="left" behavior="scroll" scrollamount="10" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10"> </marquee>
1.direction =left，right，up，down， 2.behavior 值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动） 3. scrollamount 表示运动速度，值是正整数，默认为6
8.滚动条样式：ul::-webkit-scrollbar{
/* 滚动条整理样式 */ width: 3px; height: 2px; } ul::-webkit-scrollbar-thumb{ /* 滚动条小方块 */ background: #909095; border-radius: 2px; box-shadow: inset 0 0 2px #c3c3c3; }
9.图片倒影代码
-webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 60%,rgba(0,0,0,.3)
10.居中 三件套
display: flex; align-items: center; justify-content: center;
10.视频 音频插入默认不要全屏播放
x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" playsinline="true"
<video width="320" height="240" controls="controls" poster="https://www.baidu.com/img/baidu_jgylogo3.gif"(默认图片) autoplay 自动播放 >
<source src="15.mp4" type="video/mp4">
</video>
preload="none" 不预加载
loop="loop" 循环播放
11.文字颜色渐变:
background: -webkit-linear-gradient(90deg,#c3c3c3,red); 背景渐变 -webkit-background-clip: text; 背景文字填充 -webkit-text-fill-color: transparent; 文字区域
.masked{ background:url(a.jpg); -webkit-text-fill-color:transparent; -webkit-background-clip:text; animation: masked-animation 23s infinite linear; font-size: 80px } @-webkit-keyframes masked-animation { 0% {background-position:left bottom;} 100% {background-position:right bottom;} } <div class="masked"> <h4>这是一段可选文字</h4> </div>
12.转义字符：
https://blog.csdn.net/wusuopubupt/article/details/8817826
13.css变量：
/* 全局变量 */ :root{ --div-bg-color: red; } div{ background-color: var(--div-bg-color); } /* 局部变量 */ p{ --background-p-color: blue; background: var(--background-p-color ) }
14.元素的大小： textarea的style="resize:none;"
none 用户无法调整元素的尺寸。 both 用户可调整元素的高度和宽度。 horizontal 用户可调整元素的宽度。 vertical 用户可调整元素的高
15.刷新跳转
<meta charset="utf-8" />刷新或跳转<meta http-equiv="refresh" content="10" /><meta http-equiv="refresh" content="10; url=http://www.doyoe.com" />
16.导航案例
<div class="nav_1box"> <a href="" class="nav_1">服务指南</a> <div class="nav_2" style="display: none;"> <a href="/fwzn/jzzn/26.html">就诊指南</a> <a href="/fwzn/zyzn/">住院指南</a> <a href="/fwzn/ybzn/">医保指南</a> <a href="/fwzn/lcfb/">楼层分布</a> <a href="/fwzn/lxwm/">联系我们</a> <div class="clear"></div> </div> </div> </div> <script> $(".nav_1box").mouseenter(function(){ $(".nav_1").removeClass("nav_1c"); navlc增加颜色 $(this).children(".nav_1").addClass("nav_1c"); $(this).children(".nav_2").show(); }) $(".nav_1box").mouseleave(function(){ $(this).children(".nav_1").removeClass("nav_1c"); $(this).children(".nav_2").hide(); }) </script>
转载于:https://www.cnblogs.com/nice2018/p/9790939.html
