网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

cscscssjsp 2018-02-20

前面做了一个购物网站的首页,用的方式是表格布局,表格布局这种方式已经被淘汰了,现在我们用div+css的方式从新做这个购物网站的首页,首先分析一下,这个网站。

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

以上就是整个网站的具体情况,那么这个网站以前使用table来做的,下面用div+css方式来操作,首先分析一下大概情况

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

这个可以看成是两个div,下面一个上面一个,上面内部为三个div

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

这个就是一个div

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

这个可以堪称两个div,左边一个,右边全部为一个,然后右边全部又又十个小的div

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

这是一个div

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

这个是两个div

那么结构分析明白了,那么从整体的角度来说就是一个整体div中有8个div,具体到内部再一个一个具体实现就ok,

具体实现步骤

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

上面图可以看出,padding-top等于了20,马上就将height改为50-20=30,因为不改的话,盒子将为70,这就不符合要求了

li是一个默认向下的列表,可以通过设置属性display属性值为inline(内联)将其改为水平列表

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

这个div没有设置宽高就表示不存在一样,就相当于直接加了一个图片,高度是图片本身高度,宽度是100%就是上一级div 的100%,就是1200px网页制作之购物网站首页的设计及代码,通过div加css方式完成开发

<!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居中,不是内部居中

每天分享编程语言知识,欢迎关注,每天分享

相关推荐