请问用clearfix清除浮动错哪了
魔鬼步伐
2018-10-19 14:27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
<title>学成网在线</title>
</head>
<body>
<!-- 头部开始 -->
<div class="header">
<div class="content innerc">
<div class="logo fl">
<!-- 给a标签设置背景图片 -->
<h1><a href="http://www.itcast.cn">PHP13期</a></h1>
</div>
<div class="kecheng fl">
<ul class="">
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规则</a></li>
</ul>
</div>
</div>
</div>
<!-- 头部结束 -->
</body>
</html>
/*初始化样式*/
/*清除css默认的样式*/
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
font-family:"宋体";
}
/*去除小黑点*/
li{
list-style: none;
}
/*a标签集体美化*/
a{
text-decoration:none;
color: #444;
}
a:hover{
text-decoration: underline;
color: #f00;
}
/*左浮动*/
.fl{
float: left;
}
/*右浮动*/
.fr{
float: right;
}
/*清除浮动*/
.clearfix{
content: "";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
/*兼容写法*/
.clearfix{
*zoom: 1;
}
/*头部开始的css代码*/
.header{
width: 100%;
height: 101px;
background: #f3f6f8;
}
/*头部结束的css代码*/
/*版心开始*/
.innerc{
width: 1200px;
margin: 0 auto;
}
.content{
height: 101px;
/*background-color: #f00;*/
}
/*.logo{
height: 101px;
line-height: 101px;错误的演示图片垂直居中
}*/
.logo h1{
padding-top: 30px;
}
.logo h1 a {
/*margin-top: 30px;这句会导致整体下移*/
display: block;
width: 200px;
height: 41px;
background-image: url(../images/logo.png);
text-indent:-9999px;/*隐藏a标签的文字内容*/
}
.kecheng{
padding-top: 30px;
border:1px solid #000;
margin-left: 70px;
}
.kecheng ul li {
float: left;
margin-right: 44px;
height: 40px;
line-height: 40px;
/*padding: 0 10px;*/
}
.kecheng ul li a {
font-size : 18px;
display: block;
/*width: 100%;
height: 100%;*//*这注析内容会导致下面padding出问题*/
padding: 0 10px;
border-bottom:#02a6ff 2px solid;
}
1回答
-
- RunKChen
- 2018-10-21 01:30:40
错没错不知道，但是你没用clearfix这个class啊
初识HTML(5)+CSS(3)-升级版
1228559 学习 · 19062 问题
相似问题