实例
<!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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
迷迷糊糊的写了布局，感觉还是不太理解。不太理解布局的区别，还要继续加强学习
