收藏
批改状态：合格
老师批语：已经相当不错了, 通过这个案例,相信你对一些商业网站的布局有了自己的理解
<style>
body,
p,
h2 {
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
margin: 0 auto;
background-color: black;
}
.header .content {
width: 90%;
min-height: 40px;
margin: 0 auto;
background-color: black;
}
.header .content ul {
margin: 0px;
padding: 0px;
}
.header .content .item {
list-style: none;
}
.header .content .item a {
float: left;
color: white;
font-size: 0.8em;
padding-left: 40px;
padding-right: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
}
.header .content .item a:hover {
color: #888;
}
.slider {
width: 90%;
margin: 0 auto;
}
.slider img {
width: 30%;
height: 300px;
}
.container {
width: 90%;
margin: 5px auto;
/* border: 2px solid green; */
}
/* 第二步 */
.main {
width: 100%;
min-height: 600px;
/* border: 2px solid lightseagreen; */
}
.main .box1 {
margin: 0px;
}
.main .box1 img,
.main .box2 img,
.main .box3 img,
.main .box4 img,
.main .box5 img,
.main .box6 img {
margin: 0px;
width: 160px;
height: 160px;
}
.main .box1 .floor-price,
.main .box2 .floor-price,
.main .box3 .floor-price,
.main .box4 .floor-price,
.main .box5 .floor-price,
.main .box6 .floor-price {
margin: 10px 0px;
color: red;
font-weight: bold;
}
.main .box1 .floor-item,
.main .box2 .floor-item,
.main .box3 .floor-item,
.main .box4 .floor-item,
.main .box5 .floor-item,
.main .box6 .floor-item {
margin: 0 0 20px 0;
color: #555;
cursor: pointer;
}
.main {
position: relative;
}
.main .box2 {
position: absolute;
top: 0px;
left: 500px;
}
.main .box3 {
position: absolute;
top: 0px;
left: 800px;
}
.main .box5 {
position: absolute;
top: 245px;
left: 500px;
}
.main .box6 {
position: absolute;
top: 245px;
left: 800px;
}
.left {
width: 180px;
min-height: 600px;
/* border: 1px solid lightgray; */
background-color: white;
}
.left ul {
margin: 0px;
/* padding: 0px; */
}
.left a {
color: #333;
font-weight: bolder;
line-height: 80px;
text-decoration: none;
}
.left ul li {
list-style: none;
}
.right {
width: 178px;
min-height: 600px;
/* border: 1px solid blue; */
background-color: white;
}
.right ol {
line-height: 60px;
font-weight: bold;
}
.main,
.left,
.right {
float: left;
}
.container {
overflow: hidden;
}
.main {
box-sizing: border-box;
padding-left: 180px;
padding-right: 180px;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -180px;
}
.footer {
width: 100%;
margin: 0 auto;
background-color: #333;
}
.footer .content {
width: 90%;
min-height: 60px;
margin: 0 auto;
background-color: #333;
}
.footer .content p {
text-align: center;
}
.footer .content a {
text-decoration: none;
color: #888;
font-size: 0.8em;
line-height: 60px;
}
.footer .content a:hover {
color: #fff;
text-decoration-line: underline
}
</style>
<body>
<div class="header">
<div class="content">
<ul>
<li class="item"><a href="">Mac</a></li>
<li class="item"><a href="">ipad</a></li>
<li class="item"><a href="">iphone</a></li>
<li class="item"><a href="">Watch</a></li>
<li class="item"><a href="">Music</a></li>
<li class="item"><a href="">技术支持</a></li>
</ul>
</div>
</div>
<div class="slider">
<img src="static\img\3.jpg" alt="iphone">
<img src="static\img\watch.jpg" alt="watch">
<img src="static\img\10.jpg" alt="ipad">
</div>
<hr>
<div class="container">
<div class="main">
<div class="box1">
<img src="static\img\1.jpg" alt="">
<div class="floor-price">￥5560</div>
<div class="floor-item">Apple/苹果 iphone X</div>
</div>
<div class="box2">
<img src="static\img\4.jpg" alt="">
<div class="floor-price">￥3500</div>
<div class="floor-item">Apple/苹果 ipad Air</div>
</div>
<div class="box3">
<img src="static\img\13.jpg" alt="">
<div class="floor-price">￥4560</div>
<div class="floor-item">Apple/苹果 iphone Xr</div>
</div>
<div class="box4">
<img src="static\img\15.jpg" alt="">
<div class="floor-price">￥7500</div>
<div class="floor-item">Apple/苹果 1.6G双核处理器</div>
</div>
<div class="box5">
<img src="static\img\17.jpg" alt="">
<div class="floor-price">￥2500</div>
<div class="floor-item">Apple/苹果 1.6G双核处理器</div>
</div>
<div class="box6">
<img src="static\img\18.jpg" alt="">
<div class="floor-price">￥1550</div>
<div class="floor-item">Apple/苹果 1.6G双核处理器</div>
</div>
</div>
<div class="left">
<h2>更多商品：</h2>
<ul>
<li class="item"><a href="">Iphone >></a></li>
<li class="item"><a href="">Ipad >></a></li>
<li class="item"><a href="">Watch >></a></li>
<li class="item"><a href="">Mac >></a></li>
<li class="item"><a href="">AirPods >></a></li>
</ul>
</div>
<div class="right">
<div class="content">
<h2> 畅销排行 TOP5</h2>
<ol>
<li class="item">Iphone X</li>
<li class="item">Iphone XS</li>
<li class="item">AirPods</li>
<li class="item">Watch Series4</li>
<li class="item">MacBook Pro</li>
</ol>
</div>
</div>
</div>
<div class="footer">
<div class="content">
<p><a href="">Copyright©2019 Apple inc</a> |
<a href="">隐私政策</a> |
<a href="">使用政策</a> |
<a href="">法律政策</a>
</p>
</div>
</div>
</body>点击 "运行实例" 按钮查看在线实例
总结：走了许多弯路，用了两天时间，总算做出来，后来再想法优化吧。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
