H5中新增的一些语义化标签
<header>头部标签</header>
<nav>导航标签</nav>
<section>块级标签</section>
<aside>侧边栏标签</aside>
<footer>尾部标签</footer>
通过伪类为设置图标
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?tomleg');
src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?tomleg') format('truetype'),
url('../fonts/icomoon.woff?tomleg') format('woff'),
url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.head-hd a::after {
font-family: 'icomoon';
content: '\e920';
}
后代选择器的使用
.shortcut .fr ul li:nth-child(even){
width: 1px;
height: 12px;
margin: 9px 15px 0;
background-color: #666;
}
基础知识
- 行内元素可以指定
margin-left ,margin-right
但是不能指定`margin-top,margin-bottom - 行内块元素可以指定宽度和高度
- 只有行内块和块元素才具有border属性
margin: 10px;
margin: 10px 20px ;
margin: 10px 20px 30px ;
margin: 10px 20px 30px 40px;
- 如果盒子设置为
marign: 40px auto;
(即上下外边距任意,左右外边距自动)盒子会水平居中。 margin-top = -2px;
盒子会向上移动2px
对标签a中的文字实现隐藏
a {
font-size: 0;
}
}
外边距塌陷
超出的文字使用…
.head-bd ul li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
base.css(项目之前引入可用于清除一些属性)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
em,
i {
font-style: normal
}
li {
list-style: none
}
img {
border: 0;
vertical-align: middle
}
button {
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
"\5B8B\4F53", sans-serif;
border: 0;
outline: none;
}
body {
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}