已采纳回答 / 荷犸
我查了下资料,楼主第一个声明是HTML4的文档标准声明,而后面的是HTML5的文档标准声明,我觉得是因为声明不同导致了logo里的子元素浮动溢出程度不同(html4中的浮动没有影响,html5中对后面的元素有影响,所以要要清除浮动)。虽说是这样觉得,但是我还没找到实际资料说明,HTML4和HTML5的文档流不同在哪里。楼主有兴趣的话也可以找找看
2016-07-05
大家一定要先清除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;}