*{
margin:0;
padding:0;
list-style: none;
front-size:14px;
}
li{
float:left; /*向左浮动*/
/*浮动之后不占空间*/
padding: 10px 10px;
}
/*清空浮动*/
ul::after{
/*尾类*/
content:"";
clear:both;
display: block; /*快捷标签*/
}
.container{
width:1220px;
/*流布局中块级标签水平居中*/
margin:0 auto;
}
.box{
background-color: rgb(242,162,21);
}
.imgbox{
}
.cont{
width:900px;
}
/*这一块很细节，就是几乎所有的父类都叫cnontainer，这样不是所有的都浮动，就用子代选择器*/
.cont li{
float:left;
width:calc(25% - 20px);
margin:10px;
}
.clearfix::after{
cnotent:"";
display: block;
clear:both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/浮动.css"> <!--css外部样式-->
</head>
<body>
<div class='box'>
<div class='container'>
<ul>
<li>首页</li>
<li>学校概况</li>
<li>机构设置</li>
<li>人才培养</li>
<li>学科建设</li>
<li>师资队伍</li>
<li>招生就业</li>
<li>国际交流</li>
<li>信息公开</li>
<li>校长信箱</li>
<li>电子邮箱</li>
<li>农大新闻</li>
<!--在最后一个浮动的后面添加一个清空浮动,清空浮动不要这样写-->
<!-- <div style='clear:both'></div> -->
</ul>
</div>
</div>
<div class="cont">
<ul class="clearfix">
<li>
<div class="imgbox"><img src="img/lena.jpg" width="200px" height="310px"></div>
<div class="name">lena </div>
<div class="info">opencv</div>
<div class="price">100元起</div>
</li>
<li>
<div class="imgbox"><img src="img/lena.jpg" width="200px" height="310px"></div>
<div class="name">lena </div>
<div class="info">opencv</div>
<div class="price">100元起</div>
</li>
<li>
<div class="imgbox"><img src="img/lena.jpg" width="200px" height="310px"></div>
<div class="name">lena </div>
<div class="info">opencv</div>
<div class="price">100元起</div>
</li>
<li>
<div class="imgbox"><img src="img/lena.jpg" width="200px" height="310px"></div>
<div class="name">lena </div>
<div class="info">opencv</div>
<div class="price">100元起</div>
</li>
<li>
<div class="imgbox"><img src="img/lena.jpg" width="200px" height="310px"></div>
<div class="name">lena </div>
<div class="info">opencv</div>
<div class="price">100元起</div>
</li>
<li>
<div class="imgbox"><img src="img/lena.jpg" width="200px" height="310px"></div>
<div class="name">lena </div>
<div class="info">opencv</div>
<div class="price">100元起</div>
</li>
<li>
<div class="imgbox"><img src="img/lena.jpg" width="200px" height="310px"></div>
<div class="name">lena </div>
<div class="info">opencv</div>
<div class="price">100元起</div>
</li>
<li>
<div class="imgbox"><img src="img/lena.jpg" width="200px" height="310px"></div>
<div class="name">lena </div>
<div class="info">opencv</div>
<div class="price">100元起</div>
</li>
</ul>
</div>
</body>
</html>
扫一扫
02-02
540
540
07-04
1万+
1万+
07-02
1370
1370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
