网页制作之购物网站首页的设计及代码，通过div加css方式完成开发
cscscssjsp 2018-02-20
前面做了一个购物网站的首页，用的方式是表格布局，表格布局这种方式已经被淘汰了，现在我们用div+css的方式从新做这个购物网站的首页，首先分析一下，这个网站。
以上就是整个网站的具体情况，那么这个网站以前使用table来做的，下面用div+css方式来操作，首先分析一下大概情况
这个可以看成是两个div，下面一个上面一个，上面内部为三个div
这个就是一个div
这个可以堪称两个div，左边一个，右边全部为一个，然后右边全部又又十个小的div
这是一个div
这个是两个div
那么结构分析明白了，那么从整体的角度来说就是一个整体div中有8个div，具体到内部再一个一个具体实现就ok，
具体实现步骤
上面图可以看出，padding-top等于了20，马上就将height改为50-20=30，因为不改的话，盒子将为70，这就不符合要求了
li是一个默认向下的列表，可以通过设置属性display属性值为inline（内联）将其改为水平列表
这个div没有设置宽高就表示不存在一样，就相当于直接加了一个图片，高度是图片本身高度，宽度是100%就是上一级div 的100%，就是1200px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#father{
border: 1px solid red;
width:1200px;
height:2140px;
margin:auto;<!--外边距上下左右一样，效果就是居中 -->
}
#logo{
border:1px solid brown;
width:1200px;
height:50px;
}
.top{
border :1px solid black;
width:398px;
height: 50px;
float:left;
}
#top{
padding-top: 20px;
width:398px;
height:30px;
}
#menu{
border:1px solid red;
width:1200px;
height:50px;
background-color: black;
}
ul li{
display: inline;
color: white;
}
#product{
border:1px solid red;
width:1200px;
height: 558px;
}
#product_top{
border:1px solid blue;
width:1200px;
height:50px;
padding-top:8px;
}
#product_bottom{
border:1px solid green;
width:1200px;
height:496px;
}
#product_bottom_left{
border:1px solid red;
width:200px;
height:496px;
float:left;
}
#product_bottom_right{
border:1px solid yellow;
width:996px;
height:496px;
float:left;
}
#big{
border:1px solid yellow;
width:495px;
height:246px;
float:left;
}
.small{
border:1px solid red;
width:164px;
height:246px;
float:left;
text-align: center;
}
#bottom{
text-align:center;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="father">
<!--1 -->
<div id="logo">
<div class="top">
<img src="../img/alibaba.jpg" height="46px"/>
</div>
<div class="top">
<img src="../img/header.png" height="46px" />
</div>
<div class="top" id="top">
<a href="#">登陆</a>
<a href="#">注册</a>
<a href="#">购物</a>
</div>
</div>
<!--2 -->
<div id="menu">
<ul>
<a href="#"><li style=" font-size: 25px;">首页</li></a>
<a href="#"><li>电器</li></a>
<a href="#"><li>服饰</li></a>
<a href="#"><li>宠物</li></a>
<a href="#"><li>护肤品</li></a>
<a href="#"><li>箱子</li></a>
</ul>
</div>
<!--3 -->
<div id="">
<img src="../img/lunbo.jpg" width="100%"/>
</div>
<!--4 -->
<div id="product">
<div id="product_top">
<span style=" font-size: 25px;">最新商品</span>
<img src="../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../img/big01.jpg" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<img src="../img/middle01.jpg" width="100%" height="100%"/>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
</div>
</div>
</div>
<!--5 -->
<div id="">
<img src="../img/ad.jpg" width="100%" />
</div>
<!--6 -->
<div id="product">
<div id="product_top">
<span style=" font-size: 25px;">最新商品</span>
<img src="../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../img/big01.jpg" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<img src="../img/middle01.jpg" width="100%" height="100%"/>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
<div class="small">
<img src="../img/small09.jpg" />
<a href="#"><p style="color:red">电炖锅</p></a>
<p style="color: red"/>￥200.0</p>
</div>
</div>
</div>
</div>
<!--7 -->
<div id="">
<img src="../img/footer.jpg" width="100%" />
</div>
<!--8 -->
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">加入我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
</div>
</div>
</body>
</html>
text-align：center 为内部居中，属性规定元素中的文本的水平对齐方式
margin:auto;<!--外边距上下左右一样，效果就是居中 -->，这个是div居中，不是内部居中
