Miのオリジナルのウェブサイトの
モックレイアウト
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: lightgray;
}
.outter{
margin: 10px auto;
width: 1228px;
height: 614px;
background-color: white;
}
.outter .left, .outter .right{
float: left;
}
.outter .left{
width: 234px;
height: 100%;
background-color: darkred;
}
.outter .right{
width: 994px ;
height: 100%;
background-color: #F5F5F5;
}
.right>div{
float: left;
width: 232px;
height: 301px;
background-color:white;
margin-bottom: 12px;
margin-left: 12px;
text-align: center;
}
.right>div:hover{
box-shadow: 10px 10px 10px rgba(0,0,0,.1);
}
.top .small{
margin: 0 auto;
}
.outter .right img{
margin-top: 15px;
width: 160px;
height: 160px;
}
a{
text-decoration: none;
}
body .right .cellphone_type{
margin-top: 10px;
}
body .right .cellphone_type a{
font-size: 14px;
font-weight: 400;
color: #000000;
line-height:14px ;
}
body .outter .right .cellphone_discrip{
display: block;
margin-top:2px ;
margin-bottom: 15px;
height:15px ;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
}
body .outter .right .cellphone_discrip a{
font-size: 11px;
font-weight: 400;
color: gray;
line-height: 11px;
}
body .outter .right .price{
display:inline-block;
}
body .outter .right .price a{
font-size: 13px;
color: orangered;
}
body .outter .right .old_price a{
text-decoration: line-through;
font-size: 13px;
color:gray;
}
</style>
</head>
<body>
<div class="outter">
<div class="left">
<img src="img/cellphonebig.webp" class="big" >
</div>
<div class="right">
<div class="top">
<img src="img/cellphone06.webp" class="small" >
<h4 class="cellphone_type"> <a href="#"> Redmi K40 Pro 系列</a></h4>
<h5 class="cellphone_discrip"> <a href="#"> 骁龙888 / E4 旗舰直屏</a></h5>
<span class="price">
<a href="#">2799元起</a>
</span>
<span class="old_price">
<a href="#"></a>
</span>
</div>
<div class="top">
<img src="img/cellphone01_02.webp" class="small">
<h4 class="cellphone_type"> <a href="#"> Redmi K40</a></h4>
<h5 class="cellphone_discrip"> <a href="#"> 骁龙870，新一代 E4 AMOLED旗舰直屏</a></h5>
<span class="price">
<a href="#">2799元起</a>
</span>
<span class="old_price">
<a href="#"></a>
</span>
</div>
<div class="top">
<img src="img/cellphone01_02.webp" class="small">
<h4 class="cellphone_type"> <a href="#">小米11</a></h4>
<h5 class="cellphone_discrip"> <a href="#"> 骁龙888| 2K四曲面屏</a></h5>
<span class="price">
<a href="#">3999元起</a>
</span>
<span class="old_price">
<a href="#"></a>
</span>
</div>
<div class="top">
<img src="img/cellphone03.webp" class="small" >
<h4 class="cellphone_type"> <a href="#">小米10</a></h4>
<h5 class="cellphone_discrip"> <a href="#"> 骁龙865|1亿像素相机</a></h5>
<span class="price">
<a href="#">3399元起</a>
</span>
<span class="old_price">
<a href="#">3999元</a>
</span>
</div>
<div class="down">
<img src="img/cellphone04.webp" class="small">
<h4 class="cellphone_type"> <a href="#">Note 9 Pro</a></h4>
<h5 class="cellphone_discrip"> <a href="#">一亿像素夜景相机，120Hz六档变速</a></h5>
<span class="price">
<a href="#">1599元起</a>
</span>
<span class="old_price">
<a href="#"></a>
</span>
</div>
<div class="down rightedge">
<img src="img/cellphone05.webp" class="small">
<h4 class="cellphone_type"> <a href="#">Note 9</a></h4>
<h5 class="cellphone_discrip"> <a href="#">天玑 800U处理器，5000mAh电池，</a></h5>
<span class="price">
<a href="#">1299元起</a>
</span>
<span class="old_price">
<a href="#"></a>
</span>
</div>
<div class="down rightedge">
<img src="img/cellphone06.webp" class="small" >
<h4 class="cellphone_type"> <a href="#">Note 9 4G</a></h4>
<h5 class="cellphone_discrip"> <a href="#">6000mAh长续航</a></h5>
<span class="price">
<a href="#">999元起</a>
</span>
<span class="old_price">
<a href="#"></a>
</span>
</div>
<div class="down">
<img src="img/cellphone07.webp" class="small">
<h4 class="cellphone_type"> <a href="#">Redmi 9A</a></h4>
<h5 class="cellphone_discrip"> <a href="#">5000mAh长循环大电量，6.53"超大护眼屏幕</a></h5>
<span class="price">
<a href="#">499元起</a>
</span>
<span class="old_price">
<a href="#"></a>
</span>
</div>
</div>
</div>
</body>
</html>