实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战</title>
<style>
body, p, ul, ol, h1 {
padding: 0;
margin: 0;
border: none;
}
.header {
width: 100%;
background-color: #999999;
}
.header .content {
width: 90%;
margin: 0 auto;
background-color: black;
height: 60px;
}
.header .content .nav {
list-style: none;
}
.header .content .nav li a {
float: left;
min-width: 80px;
min-height: 60px;
line-height: 60px;
padding: 0 50px;
text-align: center;
text-decoration: none;
color: white;
}
.header .content .nav li a:hover {
background-color: red;
}
.container {
width: 90%;
margin: 10px auto;
overflow: hidden;
}
.left {
width: 200px;
min-height: 800px;
background-color: #ffffff;
float: left;
margin-left: -100%;
border: solid 1px #999999;
box-sizing: border-box;
}
.left h3 {
padding-left: 20px;
}
.left ul {
list-style: none;
}
.left ul li{
text-align: center;
margin-bottom: 20px;
}
.left span {
display: block;
color: red;
text-align: left;
padding-left: 20px;
margin-top: 10px;
}
.left span:nth-of-type(2) {
color: #333333;
cursor: pointer;
}
.main {
width: 100%;
padding-left: 210px;
padding-right: 210px;
box-sizing: border-box;
min-height: 800px;
float: left;
}
.main ul {
list-style: none;
}
.main ul li {
width: 220px;
float: left;
margin-right: 20px;
padding: 5px;
border: solid 1px #ffffff;
margin-bottom: 20px;
}
.main ul li:hover {
border-color: lightgray;
-webkit-box-shadow: 2px 2px 5px #cccccc;
-moz-box-shadow: 2px 2px 5px #cccccc;
box-shadow: 2px 2px 5px #cccccc;
}
.main ul li p {
margin-top: 10px;
}
.main ul li p:nth-of-type(1) {
color: red;
}
.main ul li p:nth-of-type(2):hover {
color: red;
cursor: pointer;
}
.main ul li p span:nth-child(1) {
font-size: 22px;
}
.main ul li p span:nth-child(2) {
color: #999999;
text-decoration: line-through;
}
.main ul li p:nth-of-type(3) {
margin-bottom: 10px;
overflow: hidden;
}
.main ul li p:nth-of-type(3) i {
display: block;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-style: normal;
float: right;
margin-right: 10px;
border-radius: 50%;
background-color: orange;
color: #fff;
border: solid 1px #cccccc;
cursor: pointer;
}
.right {
width: 200px;
min-height: 800px;
float: left;
margin-left: -200px;
border: solid 1px #999999;
box-sizing: border-box;
}
.right h3 {
padding-left:20px;
}
.right ol {
margin-left: 25px;
}
.right ol li {
text-align: center;
margin-bottom: 25px;
}
.right ol li p:nth-of-type(2){
color: red;
}
.right ol li img {
margin: 10px 0;
}
.footer {
width: 100%;
background-color: lightgray;
}
.footer .content {
width: 90%;
height: 60px;
margin: 0 auto;
background-color: #444444;
}
.footer .content p {
text-align: center;
line-height: 60px;
}
.footer .content p a{
color: #999999;
text-decoration: none;
}
.footer .content p a:hover {
color: #ffffff;
}
</style>
</head>
<body>
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="">首页</a></li>
<li class="item"><a href="">公司新闻</a></li>
<li class="item"><a href="">最新产品</a></li>
<li class="item"><a href="">关于我们</a></li>
<li class="item"><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="main">
<h3>给力笔记本</h3>
<ul>
<li>
<a href=""><img src="imgs/ben01.jpg" alt=""></a>
<p>
<span>1000</span> <span>2000</span>
</p>
<p>超级笔记本超级配置 性能刚刚的</p>
<p>
<i>***</i>
</p>
</li>
<li>
<a href=""><img src="imgs/ben02.jpg" alt=""></a>
<p>
<span>1000</span> <span>2000</span>
</p>
<p>超级笔记本超级配置 性能刚刚的</p>
<p>
<i>***</i>
</p>
</li>
<li>
<a href=""><img src="imgs/ben03.jpg" alt=""></a>
<p>
<span>1000</span> <span>2000</span>
</p>
<p>超级笔记本超级配置 性能刚刚的</p>
<p>
<i>***</i>
</p>
</li>
<li>
<a href=""><img src="imgs/ben04.jpg" alt=""></a>
<p>
<span>1000</span> <span>2000</span>
</p>
<p>超级笔记本超级配置 性能刚刚的</p>
<p>
<i>***</i>
</p>
</li>
<li>
<a href=""><img src="imgs/ben05.jpg" alt=""></a>
<p>
<span>1000</span> <span>2000</span>
</p>
<p>超级笔记本超级配置 性能刚刚的</p>
<p>
<i>***</i>
</p>
</li>
<li>
<a href=""><img src="imgs/ben06.jpg" alt=""></a>
<p>
<span>1000</span> <span>2000</span>
</p>
<p>超级笔记本超级配置 性能刚刚的</p>
<p>
<i>***</i>
</p>
</li>
</ul>
</div>
<div class="left">
<h3>商品精选</h3>
<ul>
<li>
<a href=""><img src="imgs/sj01.jpg" alt=""></a>
<span>1000.00</span>
<span>超级手机A</span>
</li>
<li>
<a href=""><img src="imgs/sj02.jpg" alt=""></a>
<span>1000.00</span>
<span>超级手机B</span>
</li>
<li>
<a href=""><img src="imgs/sj03.jpg" alt=""></a>
<span>1000.00</span>
<span>超级手机C</span>
</li>
<li>
<a href=""><img src="imgs/sj04.jpg" alt=""></a>
<span>1000.00</span>
<span>超级手机D</span>
</li>
<li>
<a href=""><img src="imgs/sj05.jpg" alt=""></a>
<span>1000.00</span>
<span>超级手机E</span>
</li>
</ul>
</div>
<div class="right">
<h3>销量排名</h3>
<ol>
<li>
<p>超级手机A</p>
<a href=""><img src="imgs/sj01.jpg" alt=""></a>
<p>1000.00</p>
</li>
<li>
<p>超级手机A</p>
<a href=""><img src="imgs/sj02.jpg" alt=""></a>
<p>1000.00</p>
</li>
<li>
<p>超级手机A</p>
<a href=""><img src="imgs/sj03.jpg" alt=""></a>
<p>1000.00</p>
</li>
<li>
<p>超级手机A</p>
<a href=""><img src="imgs/sj04.jpg" alt=""></a>
<p>1000.00</p>
</li>
<li>
<p>超级手机A</p>
<a href=""><img src="imgs/sj05.jpg" alt=""></a>
<p>1000.00</p>
</li>
</ol>
</div>
</div>
<div class="footer">
<div class="content">
<p>
<a href="">© https:m.sbmmt.com</a> |
<a href="">京ICP-01087969</a> |
<a href="">电话：010-1223456</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
