最后一次实验课-实验8 综合实例-设计一款购物网站
最后一次实验课-实验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 currentp>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备13385453p>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;}
至此试验结束。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！