最后一次实验课-实验8 综合实例-设计一款购物网站
一个学期的网站设计实验课结束了，最后一次实验内容也成了重中之重。本来看到实验内容时博主是有些崩溃的。先附上例题。
最终博主经历了近六个小时的爆肝，勉强完成了任务，现在开始分析。第一步依旧是div分块。
大家可以明显的感觉的，这次分块就明显感觉到复杂，但似乎也很条理。但这就更需要我们耐性的来敲代码。
导航框
这是的分布还不是很复杂，唯一有些难度的便是超链接的编译。这里咱们可以采用列表或者表单可以，博主此次采用了列表的方式来实现。字与字之间采用了简单粗暴的 ；来产生间隔。
<div id="header">
<div id="h1">
<div id="h1_1"></div>
<div id="h1_2"></div>
</div>
<div id="h2">
<img src="logo.png">
</div>
<div id="h1_3">
<div id="h1_3_1">
<ul>
<li><a href="#"> 穿搭速递 </a></li>
<li><a href="#"> 时尚大片 </a></li>
<li><a href="#"> 星看装 </a></li>
<li><a href="#"> 时尚圈 </a></li>
<li><a href="#"> 时尚专栏 </a></li>
<li><a href="#"> 会员/登陆 </a></li>
</ul>
</div>
<div id="h1_3_2"></div>
</div>
</div>
图片
第二块只是一个简单的图片引用，在此不多做赘述。
穿戴速配
重点来了，这一块可以说是整个中最复杂的地方，采用了div的嵌套，以及一个div中多个div的平埔。这个地方其实没有什么太难的代码，只要是需要时间和耐性来编译，这一块的编译占用了整个编写近三分之二的时间，也就不到四个小时。这里要注意，书写这种复杂的div尽量采用层进时的是写，写起来会略微条理一点，博主就差点砸键盘。并且写一个div就应用一个id，你不知道什么时候就会用到。在此附上代码。
<div id="h3">
<div id="h3_1">
<div id="left">
<div left_up>
<div id="left_up_1">
<img src="pic01.jpg">
</div>
<div id="left_up_2">
<p>明星时尚</p>
</div>
<div id="left_down_1">
<img src="pic02.jpg">
</div>
<div id="left_down_2">
<p>时尚博主</p>
</div>
</div>
</div>
<div id="center">
<div left_up>
<div id="center_up_1">
<img src="pic03.jpg">
</div>
<div id="center_up_2">
<p>流程搭配</p>
</div>
<div id="center_down_1">
<img src="pic04.jpg">
</div>
<div id="center_down_2">
<p>精选秀场</p>
</div>
</div>
</div>
<div id="right">
<div left_up>
<div id="right_up_1">
<img src="pic05.jpg">
</div>
<div id="right_up_2">
<p>环球街拍</p>
</div>
</div>
</div>
</div>
</div>
这在里，写出左侧两列，复制一下，直接修改想要id即可，也可以一定程度的避免效果不理想。
第二次分块
下边这一块较之上边，显得更加规范，这里可以横着分块也可以竖着分块，博主此次采用了恒分块。可以写一块复制一块，主要是博主能力有限一次写一列有很多问题总是出错。最终选择了横分。
<div id="bq"><p>潮流前言 / Tidal current</p></div>
<div id="current">
<div>
<div id="i1"><img src="match01.jpg"></div>
<div id="i2"><img src="match02.jpg"></div>
<div id="i3"><img src="match03.jpg"></div>
<div id="i4"><img src="match04.jpg"></div>
</div>
</div>
<div id="sp">
<div id="sp1">潮流饰品</div>
<div id="sp2">潮流饰品</div>
<div id="sp3">潮流饰品</div>
<div id="sp4">潮流饰品</div>
</div>
<div id="gm">
<div id="tp">
<img src="gouwu.jpg">
</div>
<div id="td">
<p>快速购买通道</p>
</div>
<div id="tp">
<img src="gouwu.jpg">
</div>
<div id="td">
<p>快速购买通道</p>
</div>
<div id="tp">
<img src="gouwu.jpg">
</div>
<div id="td">
<p>快速购买通道</p>
</div>
<div id="tp">
<img src="gouwu.jpg">
</div>
<div id="td">
<p>快速购买通道</p>
</div>
</div>
备案号
最后一个备案号就很简单了，宽度100%用center使文字左右居中，通过line-height来交接行高使得文字上下居中即可。
<div id="ba">
<p>Copyright C2006-2016 CHAOLIUFUSHlcom, All rights reserved.<br>
2001-2018，版权所有潮流服饰85CP备13385453</p>
</div>
CSS
哪里有div哪里就有css，使用div要做到div和id一一对应，在此，附上div
li a:hover {background: url(images/xuanfu.png) center center;}
li a{line-height: 70px; text-decoration: none;color: white;}
li{list-style: none; float: left;}
body{background: rgb(255,249,237); }
P{color: white; text-align: center; margin: 0 0;}
#header{width: 100%;height: 118px;}
#h1{width: 350px; height: 118px;float: left;}
#h2{float: left; padding: 0 0 0 0;}
#h1_1{background: rgb(243,115,78);height: 70px;}
#h1_2{background: rgb(241,241,241);height: 48px;}
#h1_3_1{background: rgb(243,115,78);height: 70px; }
#h1_3_2{background: rgb(241,241,241);height: 48px;}
#h3{height: 330px; width: 980px; margin: 0 auto;background:rgb(243,115,78);padding-top: 8px;}
#h3_1{width: 892px; height: 314px; margin:auto;background: white; padding-left: 8px;}
#left{width: 279px; height: 314px;float: left;}
#left_up_1{float: left;}
#left_up_2{width: 117px;height: 169px;background: black;float: left; line-height: 130px;}
#left_down_1{float: left;}
#left_down_2{width: 117px; height: 137px; background: black;float: right;line-height: 120px;}
#center{width: 279px; height: 314px;float: left;}
#center_up_1{float: left;}
#center_up_2{width: 117px;height: 117px;background: black;float: left;line-height: 100px; }
#center_down_1{float: left; width: 162px; height: 188px;}
#center_down_2{width: 117px; height: 188px; background: black;float: right;line-height: 150px;}
#right:{width: 279px; height: 314px;float: left;}
#right_up_1{float: left;}
#right_up_2{width: 117px;height: 314px;background: black;float: left; line-height: 250px;}
#bq{width: 260px; height:25px;position: relative;left: 261px;top: 100px;background: rgb(243,115,78);}
#current{width: 980px; height: 228px;position: relative; top: 100px;left: 261px;background: white;}
#i1{float: left;padding-top: 8px;padding-left: 18px;}
#i2{float: left;padding-top: 8px;padding-left: 8px;}
#i3{float: left;padding-top: 8px;padding-left: 8px;}
#i4{float: left;padding-top: 8px;padding-left: 8px;}
#sp{ width: 980px; height: 35px;position: relative;top: 100px;left: 261px;background: white;padding-top: 25px;text-indent: 15px;}
#sp1{float: left;position: relative;left: 80px;}
#sp2{float: left;position: relative;left: 240px;}
#sp3{float: left;position: relative;left: 410px;}
#sp4{float: left;position: relative;left: 560px;}
#gm{width: 960px;height: 50px;position: relative;top: 100px; left: 261px;background: white;padding-left: 20px;}
#tp{float: left;}
#td{width: 150px;height: 38px;float: left;background: rgb(243,115,78);}
#ba{width: 100%;height: 180px; background: black;position: relative;top: 150px;padding-top: 100px;}
至此试验结束。