第十一章
1、 box-sizing：border-box（让宽度和高度包含内边距和边框）
2、 clear让后面的元素显示在浮动元素的后面
3、 z-index只对只对绝对、固定、相对定位的元素有效
4、 vertical-aligh只用于行内元素
baseline/middle/sub/super/text-top/text-bottom/top/bottom/百分比/值
第十二章
1、 <link media=”only/not screen/print/
and (min-width/max-width/resolution:value)” href=”” />
2、 <meta name="viewport" content="width=device-width,initial-scale=1" />
第十三章
1、
body{
font-family:’ pt_sansregular’;
}
@font-face{
font-family: 'pt_sansregular';
src: url('PTS55F-webfont.eot');
src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS55F-webfont.woff') format('woff'),
url('PTS55F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
第十四章
1、 渐变背景
1)
默认情况下，线性渐变是从上往下渐变的， 因此在属性值中不需要指定 to bottom
background: aqua;//要放在前面 background: linear-gradient(to top right,blue,green); background: linear-gradient(90deg,blue,green);(起点：中上线)
2)
径向渐变
/* 默认 */
background: red;
background: radial-gradient(yellow, red); background: radial-gradient(at top,yellow, red); background: radial-gradient(closest-side at 70px 60px, yellow, lime, red);
background: radial-gradient(30px 30px at 65% 70%, yellow, lime, red)
2、
元素设置不透明度
- opacity:value
3、 生成内容的效果
:before和：after
.more:after {
content: " »";
}
4、 使用
sprite 拼合图像
sprite 就是通过
content:" "; 生成的空格的背景图像。将其设置为display: block;，从而可以设置与图标大小匹配的高度和宽度
.icon:before {
background-image: url(sprite.png);
content: " ";//-------------------------------------------------
display: block;//
height: 16px; /* 图标高度 */
position: absolute;
width: 16px; /* 图标宽度 */
}
a[href$=".xls"]:before {
background-position: -17px 0;
}
a[href$=".docx"]:before {
background-position: -34px 0;
}
第十五章
1、
自定义标记
ul{
list-style: none;
margin-left:;
padding-left:;
}
li{
background: url(../img/done_square.png) no-repeat 0 .1em;
padding-left: 15px;
line-height: 24px;
}
2、
选择列表的起始编号
1)
整个列表编码初始值ol里面增加start=”n”
2)
修改有序列表某个列表编码，影响接下来的列表，在li里面增加value=”n”
3、
控制标记的位置
list-style-position=”inside/outside(默认)”
4、
下拉式导航
HTML:
<nav role="navigation">
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="#">Products</a>
<ul class="subnav">
<li><a href="#">Phones</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">Support</a>
<ul class="subnav">
<li><a href="#">Community Forum</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">How-to Guides</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
</ul>
<!-- end .nav -->
</nav>
CSS:
/* 子菜单的默认状态 */
.nav .subnav {left: -999em;/* 将子菜单移出屏幕 */position: absolute;z-index:;}
a,a:hover {text-decoration: none;}
ul {list-style: none;margin-left:;padding-left:;}
.nav {background: #fff;}
.nav>li {float: left;padding-right: 10px;}
.nav ul {background: #fff;z-index:;border-bottom: 1px solid #fff;}
.nav ul li {border-bottom: 1px solid gray;line-height: 24px;padding: 2px 5px;}
/* 当鼠标停留在父元素li上时子菜单的状态 */
.nav li:hover .subnav {left: auto;/* 让子菜单回到自然状态 */}