1.案例
<!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>Document</title>
<style>
body{
background-color:#3333;
}
</style>
<style>
span{
color:#FF6700;
}
</style>
<style>
p,s{
color: #B0B0B0;
}
</style>
<style>
li{
list-style-type: none;
}
</style>
<style>
ul li:first-child{
text-align: center;
width: 300px;
height: 600px;
margin-left: 170px;
list-style-type: none;
}
</style>
<style>
ul li:nth-of-type(2){
width: 300px;
height: 300px;
background-color: white;
margin-top:-600px;
margin-left: 500px;
list-style-type: none;
text-align: center
}
</style>
<style>
ul li:nth-of-type(3){
width: 300px;
height: 300px;
background-color: white;
margin-top:-300px;
margin-left: 830px;
list-style-type: none;
text-align: center
}
</style>
<style>
ul li:nth-of-type(4){
width: 300px;
height: 300px;
background-color: white;
margin-top:-300px;
margin-left: 1150px;
list-style-type: none;
text-align: center
}
</style>
<style>
ul li:nth-of-type(5){
width: 300px;
height: 300px;
background-color: white;
margin-top:-300px;
margin-left: 1470px;
list-style-type: none;
text-align: center
}
</style>
<style>
ul li:nth-of-type(6){
width: 300px;
height: 300px;
background-color: white;
margin-top:20px;
margin-left: 500px;
list-style-type: none;
text-align: center
}
</style>
<style>
ul li:nth-of-type(7){
width: 300px;
height: 300px;
background-color: white;
margin-top:-300px;
margin-left: 830px;
list-style-type: none;
text-align: center
}
</style>
<style>
ul li:nth-of-type(8){
width: 300px;
height: 300px;
background-color: white;
margin-top:-300px;
margin-left: 1150px;
list-style-type: none;
text-align: center
}
</style>
<style>
ul li:nth-of-type(9){
width: 300px;
height: 300px;
background-color: white;
margin-top:-300px;
margin-left: 1470px;
list-style-type: none;
text-align: center
}
</style>
</head>
<body>
<form action="#1">
<ul>
<li>
<img src="./images/1.jpg" width="300px" height="700px">
</li>
<li>
<img src="./images/2.jpg" width="160px" height="160px">
<h4>Redmi 12T Pro</h4>
<p>年度LCD 屏幕之光</p>
<span>1499元起 <s>1599元</s></span>
</li>
<li>
<img src="./images/3.jpg" width="160px" height="160px">
<h4>Xiaomi Civi 3</h4>
<p>放生双眸 天生出色</p>
<span>2499元起</span>
</li>
<li>
<img src="./images/4.jpg" width="160px" height="160px">
<h4>Xiaomi 13 Ultra</h4>
<p>徕卡光学全焦段四摄|一英寸可变光圈</p>
<span>5999元起</span>
</li>
<li>
<img src="./images/5.jpg" width="160px" height="160px">
<h4>Redmi Note12 Turbo</h4>
<p>狂暴引擎 超强性能释放</p>
<span>1699元起 <s>1899元</s></span>
</li>
<li>
<img src="./images/6.jpg" width="160px" height="160px">
<h4>Redmi K60</h4>
<p>骁龙8+|2K 高光直屏|5500mAh+67...</p>
<span>2099元起 <s>2499元</s></span>
</li>
<li>
<img src="./images/7.jpg" width="160px" height="160px">
<h4>Redmi K60 Pro</h4>
<p>【第二代骁龙8+】狂暴引擎</p>
<span>2599元起 <s>3299元</s></span>
</li>
<li>
<img src="./images/8.jpg" width="160px" height="160px">
<h4>Redmi Note12 Pro 极速版</h4>
<p>高通骁龙778G OLED柔性直屏+一亿...</p>
<span>1599元起 <s>1699元</s></span>
</li>
<li>
<img src="./images/9.jpg" width="160px" height="160px">
<h4>Xiaomi 13 限量定制色</h4>
<p>全新第二代骁龙8|徕卡专业光学镜头...</p>
<span>4999元起 </span>
</li>
</ul>
</form>
</body>
</html>
2.布局
<!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>Document</title>
<script src="./新建文件夹/1.png"></script>
<style>
.liebiao{
display: flex;
}
.hang{
height: 460px;
width: 234px;
background-color: rgb(162, 160, 154);
padding: 30px 10px 30px 30px;
}
.hang li{
width: 210px;
height: 50px;
}
.hang a{
color: white;
}
.liebiao img{
position: relative;
bottom: -6PX;
}
.img{
position: relative;
display: flex;
width: 1100px;
height: 500px;
margin-top: 10px;
}
</style>
<style>
li{
list-style: none;
}
</style>
<style>
.shang{
display: flex;
width: 1000px;
height: 50px;
margin-top: -600px;
margin-left: 250px;
}
.biao{
width: 500px;
}
.biao a{
color: black;
}
ul li{
width: auto;
display: inline-block
}
a{
text-decoration: none;
color: white;
}
.sou{
position: relative;
bottom: -15px;
width: 300px;
height: 50px;
}
</style>
<style>
.ss{
margin-left: 900px;
margin-top: -32px;
}
</style>
</head>
<body>
<form action="#">
<div class="logo"><img class="logo" src="./images/mi/logo.jpg" width="56px" height="56px"></div>
<div class="liebiao">
<ul class="hang">
<li><a href="#">手机</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">笔记本 平板</a></li>
<li><a href="#">出行 穿戴</a></li>
<li><a href="#">耳机 音响</a></li>
<li><a href="#">健康 儿童</a></li>
<li><a href="#">生活 箱包</a></li>
<li><a href="#">智能 路由器</a></li>
<li><a href="#">电源 配件</a></li>
</ul>
<div class="img">
<img src="./新建文件夹/mi.png" width="890px" height="520px">
</div>
</div>
<div class="shang">
<ul class="biao">
<li><a href="#">Xiaomi手机</a></li>
<li><a href="#">Redmi手机</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">服务中心</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<div class="ss">
<input type="text" name="sou" value="搜索" width="245px" height="50px">
<input type="button" value="搜索" src="">
</div>
</form>
</body>
</html>