<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机模块1</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
background-color: #F5F5F5;
}
.box {
width: 1226px;
height: 615px;
/* background-color: pink; */
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 615px;
/* background-color: purple; */
}
.left a {
display: inline-block;
width: 100%;
height: 100%;
}
.right {
float: left;
width: 992px;
height: 615px;
/* background-color: skyblue; */
}
.right>ul li {
float: left;
width: 234px;
height: 300px;
/* background-color: pink; */
background-color: #FFFFFF;
margin-left: 14px;
margin-bottom: 14px;
}
.right>ul li a {
display: inline-block;
width: 100%;
height: 100%;
text-decoration: none;
}
.right>ul li a .img {
width: 160px;
height: 166px;
/* background-color: red; */
margin-top: 20px;
margin-left: 37px;
}
.right>ul li a .img img {
width: 100%;
}
.right>ul li a h3 {
font-size: 12px;
font-weight: 400;
color: #333333;
text-align: center;
margin-top: 12px;
}
.right>ul li a p {
text-align: center;
color: #b0b0b0;
font-size: 12px;
margin-top: 2px;
}
.right>ul li a .jiage {
margin-top: 10px;
color: #ff6700;
}
.right>ul li a .jiage span{
color: #b0b0b0;
margin-left: 7px;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box">
<div class="left"><a href="#" target="_self"><img src="images/Redmi/Redmi Note12 Pro MaxImg.png" /></a></div>
<div class="right">
<ul>
<li>
<a href="#" target="_self">
<div class="img">
<img src="images/Redmi/Redmi Note 12 5G.png" alt="Redmi Note 12 5G"
title="Redmi Note 12 5G">
</div>
<h3>Redmi Note 12 5G</h3>
<p>三星 OLED 护眼屏|骁龙 5G 芯|50...</p>
<p class="jiage">1199元起</p>
</a>
</li>
<li>
<a href="#" target="_self">
<div class="img">
<img src="images/Redmi/Redmi Note 12 Pro.png" alt="Redmi Note 12 Pro"
title="Redmi Note 12 Pro">
</div>
<h3>Redmi Note 12 Pro</h3>
<p> IMX766 防抖相机|OLED 柔性直屏|...</p>
<p class="jiage">1699元起</p>
</a>
</li>
<li>
<a href="#" target="_self">
<div class="img">
<img src="images/Redmi/Redmi Note 12 Pro+.png" alt="Redmi Note 12 Pro+"
title="Redmi Note 12 Pro+">
</div>
<h3>Redmi Note 12 Pro+</h3>
<p>2亿超清防抖相机|OLED 柔性直屏</p>
<p class="jiage">2099元起<span>2199元</span></p>
</a>
</li>
<li>
<a href="#" target="_self">
<div class="img">
<img src="images/Redmi/Redmi Note 11 5G.png" alt="Redmi Note 11 5G"
title="Redmi Note 11 5G">
</div>
<h3>Redmi Note 11 5G</h3>
<p>5000mAh大电量</p>
<p class="jiage">1099元起<span>1199元</span></p>
</a>
</li>
<li>
<a href="#" target="_self">
<div class="img">
<img src="images/Redmi/Redmi K50.png" alt="Redmi K50"
title="Redmi K50">
</div>
<h3>Redmi K50</h3>
<p>2K直屏的狠旗舰</p>
<p class="jiage">2099元起<span>2399元</span></p>
</a>
</li>
<li>
<a href="#" target="_self">
<div class="img">
<img src="images/Redmi/Redmi Not 11T Pro.png" alt="Redmi Not 11T Pro"
title="Redmi Not 11T Pro">
</div>
<h3>Redmi Not 11T Pro</h3>
<p>天玑8100|真旗舰芯</p>
<p class="jiage">1569元起<span>1799元</span></p>
</a>
</li>
<li>
<a href="#" target="_self">
<div class="img">
<img src="images/Redmi/Xiaomi 12S Pro.png" alt="Xiaomi 12S Pro"
title="Xiaomi 12S Pro">
</div>
<h3>Xiaomi 12S Pro</h3>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<p class="jiage">4399元起<span>4699元</span></p>
</a>
</li>
<li>
<a href="#" target="_self">
<div class="img">
<img src="images/Redmi/Redmi K50 至尊版.png" alt="Redmi K50 至尊版"
title="Redmi K50 至尊版">
</div>
<h3>Redmi K50 至尊版</h3>
<p>骁龙8+ |1.5K 高清直屏</p>
<p class="jiage">2799元起<span>2999元</span></p>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
第二种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机模块2</title>
<style>
/* CSS三大特性:层叠性、继承性、优先级
0 继承性或通配符
1 标签选择器
10 类选择器
100 ID选择器
1000 行内样式
*/
/*
网页布局第1准则: 1、块级元素使用纵向排列找标准流。2、块级元素使用横向排列找浮动。
网页布局第2准则: 1、先设置盒子大小。2、再设置盒子位置
*/
/* 清除浏览器所有标签默认样式 */
* {
margin: 0;
padding: 0;
}
/* 设置body背景颜色 */
body {
background-color: #F5F5F5;
}
/* 设置大的块级盒子样式 */
.box {
width: 1226px;
height: 614px;
/* background-color: pink; */
margin: 0 auto;
}
/* 设置左边盒子样式 */
.left {
/* 第1准则第2条 */
float: left;
/* 第2准则第1条 */
width: 234px;
height: 614px;
/* background-color: purple; */
}
/* 设置右边盒子样式 */
.right {
float: left;
width: 992px;
height: 614px;
/* background-color: skyblue; */
}
.right .minbox {
float: left;
width: 234px;
height: 300px;
background-color: #FFFFFF;
margin: 0 0 14px 14px;
}
.minbox a {
text-decoration: none;
}
/* 使用标准流纵向排列 */
.minbox div {
width: 234px;
height: 184px;
/* background-color: red; */
}
.minbox div img {
float: left;
width: 160px;
margin-left: 37px;
margin-top: 20px;
}
.minbox h3 {
font-size: 12px;
font-weight: 400;
text-align: center;
color: #333333;
margin-top: 14px;
}
.minbox p {
font-size: 12px;
color: #B0B0B0;
text-align: center;
margin-top: 2px;
}
.minbox .jiage {
color: #FF6700;
margin-top: 10px;
}
.minbox .jiage span {
color: #B0B0B0;
margin-left: 7px;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<a href="#" target="_self">
<img src="images/Redmi/Redmi Note12 Pro MaxImg.png" alt="Redmi Note12 Pro" title="Redmi Note12 Pro">
</a>
</div>
<div class="right">
<div class="minbox">
<a href="#" target="_self">
<div>
<img src="images/Redmi/Redmi Note 12 5G.png" alt="Redmi Note 12 5G" title="Redmi Note 12 5G">
</div>
<h3>Redmi Note 12 5G</h3>
<p>三星 OLED 护眼屏|骁龙 5G 芯|50...</p>
<p class="jiage">1199元起</p>
</a>
</div>
<div class="minbox">
<a href="#" target="_self">
<div>
<img src="images/Redmi/Redmi Note 12 Pro.png" alt="Redmi Note 12 Pro" title="Redmi Note 12 Pro">
</div>
<h3>Redmi Note 12 Pro</h3>
<p>IMX766 防抖相机|OLED 柔性直屏|...</p>
<p class="jiage">1699元起</p>
</a>
</div>
<div class="minbox">
<a href="#" target="_self">
<div>
<img src="images/Redmi/Redmi Note 12 Pro+.png" alt="Redmi Note 12 Pro+" title="Redmi Note 12 Pro+">
</div>
<h3>Redmi Note 12 Pro+</h3>
<p>2亿超清防抖相机|OLED 柔性直屏</p>
<p class="jiage">2099元起<span>2199元</span></p>
</a>
</div>
<div class="minbox">
<a href="#" target="_self">
<div>
<img src="images/Redmi/Redmi Note 11 5G.png" alt="Redmi Note 11 5G" title="Redmi Note 11 5G">
</div>
<h3>Redmi Note 11 5G</h3>
<p>5000mAh大电量</p>
<p class="jiage">1099元起<span>1199元</span></p>
</a>
</div>
<div class="minbox">
<a href="#" target="_self">
<div>
<img src="images/Redmi/Redmi K50.png" alt="Redmi K50" title="Redmi K50">
</div>
<h3>Redmi K50</h3>
<p>2K直屏的狠旗舰</p>
<p class="jiage">2099元起<span>2399元</span></p>
</a>
</div>
<div class="minbox">
<a href="#" target="_self">
<div>
<img src="images/Redmi/Redmi Not 11T Pro.png" alt="Redmi Not 11T Pro" title="Redmi Not 11T Pro">
</div>
<h3>Redmi Not 11T Pro</h3>
<p>天玑8100|真旗舰芯</p>
<p class="jiage">1569元起<span>1799元</span></p>
</a>
</div>
<div class="minbox">
<a href="#" target="_self">
<div>
<img src="images/Redmi/Xiaomi 12S Pro.png" alt="Xiaomi 12S Pro" title="Xiaomi 12S Pro">
</div>
<h3>Xiaomi 12S Pro</h3>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<p class="jiage">4399元起<span>4699元</span></p>
</a>
</div>
<div class="minbox">
<a href="#" target="_self">
<div>
<img src="images/Redmi/Redmi K50 至尊版.png" alt="Redmi K50 至尊版" title="Redmi K50 至尊版">
</div>
<h3>Redmi K50 至尊版</h3>
<p>骁龙8+ |1.5K 高清直屏</p>
<p class="jiage">2799元起<span>2999元</span></p>
</a>
</div>
</div>
</div>
</body>
</html>
图片元素