实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css.css">
<title>Title</title>
</head>
<body>
<div class="header">
<div class="content">
<ul>
<li><a href="">首页</a></li>
<li><a href="">php</a></li>
<li><a href="">mysql</a></li>
<li><a href="">java</a></li>
<li><a href="">python</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">
<h1>图片列表</h1>
<ul>
<li class="fore1">
<div class="p-img">
<a href="#" target="_blank">
<img src="static/img/4.jpeg" alt="">
</a>
</div>
<div class="p-info">
<div class="p-name">
<a href="#" target="_blank" title="" class="x-name">
***鞋子
</a>
</div>
<div class="p-price"><i>¥</i>1598.00</div>
<div class="p-buy">
<button>立即***</button>
</div>
</div>
</li>
<li class="fore1">
<div class="p-img">
<a href="#" target="_blank">
<img src="static/img/3.jpeg" alt="">
</a>
</div>
<div class="p-info">
<div class="p-name">
<a href="#" target="_blank" title="" class="x-name">
***鞋子
</a>
</div>
<div class="p-price"><i>¥</i>1598.00</div>
<div class="p-buy">
<button>立即***</button>
</div>
</div>
</li>
<li class="fore1">
<div class="p-img">
<a href="#" target="_blank">
<img src="static/img/1.jpeg" alt="">
</a>
</div>
<div class="p-info">
<div class="p-name">
<a href="#" target="_blank" title="" class="x-name">
***鞋子
</a>
</div>
<div class="p-price"><i>¥</i>1598.00</div>
<div class="p-buy">
<button>立即***</button>
</div>
</div>
</li>
<li class="fore1">
<div class="p-img">
<a href="#" target="_blank">
<img src="static/img/2.jpeg" alt="">
</a>
</div>
<div class="p-info">
<div class="p-name">
<a href="#" target="_blank" title="" class="x-name">
***鞋子
</a>
</div>
<div class="p-price"><i>¥</i>1598.00</div>
<div class="p-buy">
<button>立即***</button>
</div>
</div>
</li>
<li class="fore1">
<div class="p-img">
<a href="#" target="_blank">
<img src="static/img/4.jpeg" alt="">
</a>
</div>
<div class="p-info">
<div class="p-name">
<a href="#" target="_blank" title="" class="x-name">
***鞋子
</a>
</div>
<div class="p-price"><i>¥</i>1598.00</div>
<div class="p-buy">
<button>立即***</button>
</div>
</div>
</li>
<li class="fore1">
<div class="p-img">
<a href="#" target="_blank">
<img src="static/img/3.jpeg" alt="">
</a>
</div>
<div class="p-info">
<div class="p-name">
<a href="#" target="_blank" title="" class="x-name">
***鞋子
</a>
</div>
<div class="p-price"><i>¥</i>1598.00</div>
<div class="p-buy">
<button>立即***</button>
</div>
</div>
</li>
<li class="fore1">
<div class="p-img">
<a href="#" target="_blank">
<img src="static/img/1.jpeg" alt="">
</a>
</div>
<div class="p-info">
<div class="p-name">
<a href="#" target="_blank" title="" class="x-name">
***鞋子
</a>
</div>
<div class="p-price"><i>¥</i>1598.00</div>
<div class="p-buy">
<button>立即***</button>
</div>
</div>
</li>
<li class="fore1">
<div class="p-img">
<a href="#" target="_blank">
<img src="static/img/2.jpeg" alt="">
</a>
</div>
<div class="p-info">
<div class="p-name">
<a href="#" target="_blank" title="" class="x-name">
***鞋子
</a>
</div>
<div class="p-price"><i>¥</i>1598.00</div>
<div class="p-buy">
<button>立即***</button>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="left">
<h1>商品列表</h1>
<ul>
<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="right">
<h1>最新推荐</h1>
<ol>
<li>推荐1</li>
<li>推荐1</li>
<li>推荐1</li>
<li>推荐1</li>
<li>推荐1</li>
<li>推荐1</li>
<li>推荐1</li>
</ol>
</div>
</div>
<div class="footer">
<div class="content">
<p>
<a href="">©jiangxiaobai</a>
<a href=""></a>
<a href=""></a>
</p>
</div>
</div>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
css代码
实例
body {
margin: 0;
padding: 0;
}
.header{
background-color: #5e9ca0;
margin: 0 auto;
}
.header .content{
background-color: #5e9ca0;
width: 90%;
margin: 0 auto;
height: 60px;
}
.header .content ul{
margin: 0;
padding: 0;
}
.header .content ul li{
list-style: none;
}
.header .content ul li a{
float: left;
text-decoration: none;
color: white;
line-height: 60px;
text-align: center;
min-width: 80px;
min-height: 60px;
}
.header .content ul li a:hover{
color: #e2da99;
font-size: 1.1rem;
}
.container {
overflow: hidden;
width: 90%;
background-color: lightgray;
margin: 5px auto;
}
.left {
width: 200px;
min-height: 800px;
border: 1px solid #444444;
padding: 10px;
box-sizing: border-box;
}
.left h1{
font-size: 1.1rem;
color: white;
border-bottom: 1px solid #555555;
}
.left ul{
margin-top: 50px;
}
.left ul li{
list-style: none;
padding: 10px 20px;
}
.left ul li a{
text-decoration: none;
color: white;
}
.left ul li a:hover{
color: red;
font-size: 1.1rem;
}
.right {
width: 200px;
min-height: 800px;
background-color: lightcoral;
}
.wrap {
width: 100%;
float: left;
}
.left{
float: left;
}
.right{
float: left;
}
.wrap{
float: left;
}
.main {
margin-right: 200px;
margin-left: 200px;
min-height: 800px;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
ul{
width: 100%;
}
ul>li img{
width: 280px;
height: 280px;
}
ul .fore1{
float: left;
list-style: none;
width: 25%;
}
.x-name{
float: left;
text-decoration: none;
color: white;
padding-right: 5px;
}
.p-price{
float: left;
padding-right: 50px;
}
.footer{
background-color: #404343;
margin: 0 auto;
}
.footer .content{
width: 90%;
background-color: #404343;
height: 60px;
margin: 0 auto;
}
.footer .content p a{
color: white;
text-decoration: none;
font-size: 2rem;
text-align: center;
margin: 0 auto;
display: block;
line-height: 60px;
}
.right ol li{
color: #e2da99;
font-size: 1.1rem;
line-height: 30px;
}点击 "运行实例" 按钮查看在线实例
迷迷糊糊的写了布局，感觉还是不太理解。不太理解布局的区别，还要继续加强学习
Correction status：qualified
Teacher's comments：对于初学者, 感觉有点难理解是正确 的, 相信, 现在再有人跟你提及这种布局, 你应该可以和他聊聊人生了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
