CSS网站首页优化.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站首页优化</title>
<style>
.logo{
float: left;
width: 33%;
height: 60px;
line-height: 60px;
/*border: 1px;
border-color: red;
border-style: solid;*/
border: 1px red solid;
}
.meau{
color: white;
text-decoration: none;
height: 60px;
line-height: 60px;
}
.product{
width:16%;
height:240px;
float:left;
text-align: center;
}
</style>
</head>
<!--
#### 步骤分析:
1. 创一个最外层div
2. 第一部份: LOGO部分: 嵌套三个div
3. 第二部分: 导航栏部分 : 放置5个超链接
4. 第三部分: 轮播图
5. 第四部分:
6. 第五部分: 直接放一张图片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一张图片
9. 第八部分: 放一堆超链接
-->
<body>
<!--1. 创一个最外层div -->
<div>
<!-- 2. 第一部份: LOGO部分: 嵌套三个div -->
<div>
<div class="logo">
<img src="img/logo2.png"/>
</div>
<div class="logo">
<img src="img/header.jpg"/>
</div>
<div class="logo">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清空浮动-->
<div style="clear: both;"></div>
<!-- 3. 第二部分: 导航栏部分 : 放置5个超链接-->
<div style="background: black;height: 60px;">
<a href="#" class="meau">首页</a>
<a href="#" class="meau">鞋靴箱包</a>
<a href="#" class="meau">服装配饰</a>
<a href="#" class="meau">手机数码</a>
<a href="#" class="meau">电脑办公</a>
<a href="#" class="meau">美酒美食</a>
</div>
<!-- 4. 第三部分: 轮播图 -->
<div>
<img src="img/1.jpg" width="100%"/>
</div>
<!-- 5. 第四部分: -->
<div>
<!--上方-->
<div>
<h2>最新商品<img src="img/title2.jpg"/></h2>
</div>
<!--左侧-->
<div style="width: 15%;height: 480px;float: left">
<img src="products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--右侧-->
<div style="width: 85%;height: 480px;float:left">
<div style="width: 50%;height: 240px;float: left;">
<img src="products/hao/middle01.jpg" width="100%" height="100%"/>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small03.jpg" width="100%" height="100%"/>
<p>锅</p>
<p style="color: red;">$299</p>
</div>
</div>
</div>
<!-- 6. 第五部分: 直接放一张图片 -->
<div>
<img src="products//hao/ad.jpg" width="100%"/>
</div>
<!-- 7. 第六部分: 抄第四部分的 -->
<div>
<!--上方-->
<div>
<h2>最新商品<img src="img/title2.jpg"/></h2>
</div>
<!--左侧-->
<div style="width: 15%;height: 480px;float: left">
<img src="products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--右侧-->
<div style="width: 85%;height: 480px;float:left">
<div style="width: 50%;height: 240px;float: left;">
<img src="products/hao/middle01.jpg" width="100%" height="100%"/>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small01.jpg" width="100%" height="100%"/>
<p>榨汁机</p>
<p style="color: red;">$299</p>
</div>
<div class="product">
<img src="products/hao/small03.jpg" width="100%" height="100%"/>
<p>锅</p>
<p style="color: red;">$299</p>
</div>
</div>
</div>
<!-- 8. 第七部分: 放置一张图片 -->
<div>
<img src="img/footer.jpg" width="100%"/>
</div>
<!-- 9. 第八部分: 放一堆超链接 -->
<div style="text-align: center;">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<br/>
CopyRight@2016-2020版权所有
</div>
</div>
</body>
</html>