CSS div布局练习
2018-12-14 本文已影响9人
roy_pub
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
/*主界面布局*/
.container {
margin: 60px auto 0;
width: 1055px;
position: relative;
}
.container li {
width: 325px;
height: 216px;
float: left;
list-style: none;
position: relative;
}
.container li img {
width: 100%;
height: 100%;
}
.middle-li {
margin: 0 40px;
}
/*底部提示文字*/
.bottom {
padding: 0 25px;
height: 45px;
width: 275px;
background-color: rgba(0,0,0,0.3);
color: white;
font-size: 12px;
line-height: 45px;
text-align: center;
/*定位*/
position: absolute;
bottom: 0;
left: 0;
/*溢出隐藏*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*界面蒙版*/
.mask {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5) url("images/fdj.png") no-repeat center;
position: absolute;
top: 0;
left: 0;
display: none;
}
.container li:hover .mask {
display: block;
}
/*container没有高度，需要清除浮动*/
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
.left, .right{
width: 60px;
height: 60px;
line-height: 60px;
background: rgba(0,0,0,0.2);
position: absolute;
top: 50%;
margin-top: -30px;
color: #fff;
text-decoration: none;
font-size: 25px;
text-align: center;
border-radius: 50%;
}
.left {
left: -90px;
}
.right {
right: -90px;
}
.container a:hover {
background-color: rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div class="container clearfix">
<ul>
<li>
<img src="images/service1.png"/>
<div class="bottom">企业服务</div>
<div class="mask"></div>
</li>
<li class="middle-li">
<img src="images/service2.png"/>
<div class="bottom">Hello World，企业服务，开启美好生活，祝你幸福生活每一天，Hello World</div>
<div class="mask"></div>
</li>
<li>
<img src="images/service1.png"/>
<div class="bottom">企业服务</div>
<div class="mask"></div>
</li>
</ul>
<a href="#" class="left"><</a>
<a href="#" class="right">></a>
</div>
</body>
</html>
