仿小米手机版块
下面展示主要代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 1226px;
height: 615px;
background-color: blue;
margin: 0 auto;
}
.box .left {
float: left;
width: 292px;
height: 615px;
margin-right: 10px;
}
.box .right {
float: right;
width: 910px;
height: 615px;
background-color: blue;
}
.box .right ul li {
float: left;
width: 220px;
height: 303px;
background-color: #5500ff;
list-style: none;
margin-right: 10px;
margin-bottom: 10px;
}
.box .right ul .four {
margin-right: 0px;
}
.box .right ul .eight {
margin-right: 0px;
}
.left img {
height: 615px;
}
.left img:hover {
box-shadow: 5px 5px 5px #666;
}
.right img {
width: 220px;
margin-bottom: 2px;
}
.right h4 {
font-weight: 400;
text-align: center;
margin-bottom: 2px;
}
.right h6 {
text-align: center;
color: #7D7D7D;
margin-bottom: 2px;
}
.right h5 {
color: #FF0000;
text-align: center;
}
.right ul li:hover {
box-shadow: 5px 5px 5px #666;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<a href="#"><img src="img/left1.png" ></a>
</div>
<div class="right">
<ul>
<li class="one"><a href="#"><img src="img/right1.png" ></a><h4>xiaomi MIX4</h4><h6>CUP全面屏</h6><h5>4999元起</h5></li>
<li class="two"><a href="#"><img src="img/right2%20.png" ></a><h4>note 10 Pro</h4><h6>天玑1100年度旗舰店</h6><h5>1699元起</h5></li>
<li class="three"><a href="#"><img src="img/right3.png" ></a><h4>Redmi Note 10 5G</h4><h6>5G 小金刚|期间长续航</h6><h5>1099元起</h5></li>
<li class="four"><a href="#"><img src="img/right4%20.png" ></a><h4>小米MIX FLOD</h4><h6>折叠大屏}自研芯片</h6><h5>9999元起</h5></li>
<li class="five"><a href="#"><img src="img/right5.png" ></a><h4>小米11 Pro</h4><h6>1/1.12''GN2|xiaolong 888</h6><h5>4999元起</h5></li>
<li class="six"><a href="#"><img src="img/right6%20.png" ></a><h4>小米11 青春版</h4><h6>小米11 青春版 轻薄</h6><h5>2099元起</h5></li>
<li class="seven"><a href="#"><img src="img/right7.png" ></a><h4>小米11 Ultra</h4><h6>1/1.12''GN2|2K四微曲屏</h6><h5>5499元起</h5></li>
<li class="eight"><a href="#"><img src="img/right8.png" ></a><h4>K40 游戏增强版</h4><h6>轻薄电竞设计</h6><h5>1999元起</h5></li>
</ul>
</div>
</div>
</body>
</html>
结果图: