1.概述
本次网页设计全程由制作者本人独立完成。页面风格以简洁为主,导航栏设“首页”、“衣服系列”、“化妆品系列”、“家电系列”、“珠宝系列”、“食品系列”、“产品介绍宣传”共7项。源文件共计占用磁盘空间16MB左右,制作用时为7天,使用了Dreamweaver、Photoshop工具。本站页面共有8个页面,其中7个为导航页,其主要分为3部分页面一个主页面、6个副页面、还有1个产品宣传页。
2.详细设计
2.1网站结构说明
1、首页:头部有一行信息栏有:收藏该网页、登录、注册(登录与注册功能还没添加还是空链接)、登录后可以查看我的信息(该功能需要后台支持,本人也没有实现);接下来是,该网站的Logo图标、站内搜索;下来是导航菜单。上面简要地技术了该网站的头部的一些必须信息;如下就是首页的主要板块:有购物导航栏、商品促销区(以幻灯片形式展示)、公告栏、(新品上架、特价商品、热卖商品、热评商品、疯狂抢购)
2、副页面系列:(有衣服系列、珠宝系列、食品系列、家电系列、化妆系列)这个页面版式设计是一样的,有(购物、充值、公告栏)以一个选项卡的方式实现的、今天你购物了吗栏(显示该网站今天的销售情况)、各地商城栏(可以本质说是一个友情链接)、猜你喜欢栏(展示所在系列的商品)、浏览一下栏(展示该系列热卖的的商品)。
3.产品介绍宣传页:主要使用视频来介绍一些商品,分为商品视频播放区,商品视频列表区。
网站结构流程图:
2.2首页设计说明
首页设计关键说明
首先设定一个总的DIV,然后里面放的各个栏目都用DIV嵌套来完成。根据自己的设计需要来确定DIV的层次。每个网站的细节都很多。顶部的信息条是使用也使用一个DIV里面在嵌套一些DIV,嵌套的DIV里面嵌套了<span>标签来完成。 购物车的那一行信息使用DIV里面嵌套<ul><li>标签来实现的,其中<li>还嵌套了另一个<ul>实现超链接伪类。
具体代码如下:(只显示了一部分代码)
<div class="headinfomation">
<span><img src="images/icon/SY.png" width="10px" height="10px" /><a href="#"> 收藏购物轩</a></span>
<span>您好,欢迎登录购物轩网!</span>
</div>
<div class="guowuche">
<ul>
<li><img src="images/icon/guowuche.png" width="12px" height="12px" /><a href="#"><span> </span>购物车</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">我的金币</a>
<ul>
<li><a href="#">购物礼劵</a></li>
<li><a href="#">我的消费纪录</a></li>
</ul>
</li>
<li><a href="#">手机购物</a></li>
<li><a href="#">企业销售</a></li>
<li><a href="#">帮助</a>
<ul>
<li><a href="#">常见问题</a></li>
<li><a href="#">申请退货</a></li>
</ul>
</li>
</ul>
</div>
</div>
写好了html就为其编写css规则。css规则主要是背景、宽度、高度、字体大小 要不要float, ling-height, align等等。
接下来的的栏目其编写原理都是差不多的.我就不一一细说了。接下来就说说那个五个栏目商品是怎样实现的。主要是运用CSS+js来实现的。
<div id="listBT">
<ul>
<li id="L01" class="LB1">新品上架</li>
<li id="L02" class="LB2">特价商品</li>
<li id="L03" class="LB2">热卖商品</li>
<li id="L04" class="LB2">热评商品</li>
<li id="L05" class="LB2">疯狂抢购</li>
</ul>
</div>
上面的代码是商品栏目
<div class="xianshiNR">
<div id="xs1">
<ul>
<li><div class="XPSJ"><div class="XPSJ_img"><img src="images/shangpinimg/1.jpg"</div> <p><a href="#">照相机</a></p> <p>价格:<span>900元</span></p> </div></li>
<li><div class="XPSJ"><div class="XPSJ_img"><img src="images/shangpinimg/2.jpg"</div> <p><a href="#">显示屏<a></p> <p>价格:<span>1200元</span></p> </div></li>
<li><div class="XPSJ"><div class="XPSJ_img"><img src="images/shangpinimg/3.jpg"</div> <p><a href="#">WindosPhone</a></p> <p>价格:<span>1900元</span></p> </div></li>
</ul>
</div>
上面的图片的展示区,我只给出展示区的一个栏目的部分代码。
SDmodel.sd(["L01","L02","L03","L04","L05"],["xs1","xs2","xs3","xs4","xs5"],"LB1","LB2");这时JS代码调用函数来实现该功能。
下面是CSS规则代码,这是布局网页设计必须掌握的。
#zhengti #main #listBT{ width:960px; height:40px; border:1px solid #0C0; background-image:url(../images/icon/lis1.png);}
#zhengti #main #listBT ul li{ float:left; font-size:18px; list-style-type:none;}
#zhengti #main #listBT ul .LB1{
cursor:pointer;
color:#666;
display:block;
width:120px;
height:40px;
text-align:center;
line-height:40px;
background-image:url(../images/icon/lis2.png);
}
#zhengti #main #listBT ul .LB2{
cursor:pointer;
color:#000;
display:block;
width:120px;
height:40px;
text-align:center;
line-height:40px;
background-image:url(../images/icon/lis1.png);}
#zhengti #main .xianshiNR
{
width:940px;
height:540px;
margin-left:8px;
margin-top:10px;
border:0px solid #0C0;
}
#zhengti #main .xianshiNR .tupian{display:none;}
#zhengti #main .xianshiNR #xs1
{
width:940px;
height:540px;
border:0px solid #0C0;
}
#zhengti #main .xianshiNR #xs1 ul li
{
float:left;
margin-left:15px;
margin-top:20px;
width:165px;
height:220px;
list-style-type:none;
}
#zhengti #main .xianshiNR #xs1 ul li .XPSJ
{
text-align:center;
line-height:30px;
padding-top:20px;
}
#zhengti #main .xianshiNR #xs1 ul li .XPSJ p span{color:#C00; font-weight:bold;}
2.3商品页面设计效果图,主要是运用Javascript+CSS
2.4产品宣传页设计效果图,主要是运用Javascript+CSS
分享到:
相关推荐
主要技术div、css、jquery技术,适合再次开发,网站有各个板块的内容,比如,服饰、车类,男士用品、数码产品、女性化妆品等各类网站。功能:登录、注册、订单、商品列表、购物车等相关功能,共计15个网页模板html
这个一个电子商务的静态html网页模板,里面有前台和后台两个模板,适合初学者改成动态界面
基于HTML+CSS写的静态华为购物商城PC端页面源码.zip基于HTML+CSS写的静态华为购物商城PC端页面源码.zip基于HTML+CSS写的静态华为购物商城PC端页面源码.zip基于HTML+CSS写的静态华为购物商城PC端页面源码.zip基于...
2.添加并设计网站导航栏(导航栏目内容和样式自定),链接为空链接; 3.添加并设计商品轮播图,图片、位置、大小等自定义; 4.设计商品分类展示效果(样式自定义),每件商品必须有:商品名称、图片、价格内容;商品数目...
包括登陆注册详细页面,购物网站,非常好用,值得参考 包括登陆注册详细页面,购物网站,非常好用,值得参考 包括登陆注册详细页面,购物网站,非常好用,值得参考 包括登陆注册详细页面,购物网站,非常好用,值得...
4 系统的设计 12 4.1流程图设计 12 4.2系统ER图设计 13 5系统功能模块实现 14 5.1.登录注册页面实现 14 5.2商品列表页面实现 16 5.3商品详细页面实现 17 5.4商品购物车页面实现 18 5.5订单页面实现 19 5.6我的账户 ...
1 前言 4 ...5网站的测试 29 6后续工作 30 7结论 30 8结束语 31 参考文献 32 烟台工程职业技术学院 34 毕业(设计)成绩评定评分表 34 烟台工程职业技术学院 35 毕业设计(论文)成绩评定评审等级表 35
伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪静态伪...
静态网站页面的设计静态网站页面的静态网站页面的设计设计静态网站页面的设计
购物e家静态网站。购物e家静态网站。购物e家静态网站。
HTML写的简单购物类静态网站,可直接在浏览器上运行
静态网站建设
本网站是用html和js制作的静态购物网站
购物网站静态模板
大学生静态网页设计期末作业(必过版),大学生静态网页设计期末作业(必过版)大学生静态网页设计期末作业(必过版)大学生静态网页设计期末作业(必过版)大学生静态网页设计期末作业(必过版)大学生静态网页设计...
基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发...
购物静态网站
花店购物网站html页面设计,包括网站关于页面、相关博客页面、购物车、首页、登陆界面、注册界面、商品详情页、轮播图等等。界面样式通过css实现,动态效果采用JavaScript技术。该项目网页包含28个页面
电子商务网站大作业静态页面包含注册、登录、首页、购物车、支付等页面电子商务网站大作业静态页面包含注册、登录、首页、购物车、支付等页面电子商务网站大作业静态页面包含注册、登录、首页、购物车、支付等页面...