大家一定要先清除li的默认样式,padding和margin。不然对紧接着的元素浮动和padding值有很大影响,会混乱。
2016-07-05
a:link,a:visited{color:#333;text-decoration:none;}
p{float:left;}
ul{margin:5px 10px;}
.two{background: url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg) no-repeat 0 -16px;}
</style>
然后再在结构中后面三个<em>加入class="two"
p{float:left;}
ul{margin:5px 10px;}
.two{background: url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg) no-repeat 0 -16px;}
</style>
然后再在结构中后面三个<em>加入class="two"
em{display:block;width:20px;height:16px;;color:#333;
float:left;text-align:center;
background: url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg) no-repeat;font-style:normal;}
li{list-style-type:none;overflow: hidden;
line-height:16px;margin-bottom: 14px;}
float:left;text-align:center;
background: url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg) no-repeat;font-style:normal;}
li{list-style-type:none;overflow: hidden;
line-height:16px;margin-bottom: 14px;}
<style type="text/css">
*{padding: 0px;margin:0px;}
div{border:1px solid #e8e8e8;width:300px;
height:180px;font-size:12px;margin:0 auto;}
*{padding: 0px;margin:0px;}
div{border:1px solid #e8e8e8;width:300px;
height:180px;font-size:12px;margin:0 auto;}
li{float:left;list-style-type:none;width:40px;height:30px;text-align: center;line-height: 30px;}
a:link,a:visited{color:#BE3948;display:block;text-decoration:none;}
a:hover{ color:#fff;display:block;background-color:#BE3948;text-decoration:none;}
a:link,a:visited{color:#BE3948;display:block;text-decoration:none;}
a:hover{ color:#fff;display:block;background-color:#BE3948;text-decoration:none;}
li{
list-style:none;
float:left;
}
a:link,a:visited{
display:block;
text-decoration:none;
color:#000;
width:48px;
height:30px;
line-height:30px;
text-align:center;
}
a:hover,a:active{
color:white;
background:#BD3948;
}
list-style:none;
float:left;
}
a:link,a:visited{
display:block;
text-decoration:none;
color:#000;
width:48px;
height:30px;
line-height:30px;
text-align:center;
}
a:hover,a:active{
color:white;
background:#BD3948;
}
CSS属性的排列顺序: L-V-H-A 。
L-V-H-A是link、visited、hover、active的简写。
它们分别表示
A:link 超链接的默认样式
A:visited 访问过的(已经看过的)链接样式
A:hover 鼠标处于鼠标悬停状态的链接样式
A:active 当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。
L-V-H-A是link、visited、hover、active的简写。
它们分别表示
A:link 超链接的默认样式
A:visited 访问过的(已经看过的)链接样式
A:hover 鼠标处于鼠标悬停状态的链接样式
A:active 当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。