轻奢电商——轻奢新主义,只为懂你的人
- 轻奢国际尖货,跟踪国际一流品牌,提供超一流服务
- 轻奢母婴专享,提供超豪华护理套餐,限时一折抢购
- 轻奢化妆品专柜,超乎实体店的感官体验,限时特卖
- 轻奢零食主会场,进口零食倾情享受,酒水七折特卖
《网页设计与制作课程设计》实验报告
院系名称:管理学院专业班级:电子商务XXX 学生姓名: XXX 学号: XXXXXXX
网页界面网站栏目网站功能(JS程序)合计
50分10分40分100分
2016年06 月
一、实验目的
本实验属于设计性实验,在学习完《网页设计与制作》课程的基础上,通过实验学习网页制作的步骤与方法,使用CSS+DIV制作一个简单的网站,能够对网站有一个清晰的认知和规划。进一步熟悉和领悟HTML语言、CSS样式表和JAVASCRIPT语言的语法结构。将理论与实践相结合,加深对本课程的理解。
二、实验步骤
1、进行网站整体规划,包括网站主题、栏目以及界面的构思,确定网站结构,形成初步设计思路。
2、设计网站的主页以及栏目,利用CSS+DIV制作网站主页和弹出式导航条菜单,利用JavaScript制作动态效果,并用firework软件对主页进行切图。
3、设计并利用CSS+DIV制作列表页,并用firework软件对列表页进行切图。
4、设计并利用CSS+DIV制作内容页,并用firework软件对内容页进行切图。
5、进行调试和修改已形成最终实验结果。
三、网站设计思路
1、参照“唯品会”“折800”等电商网站,确定网站主题为“轻奢电商”。
2、设计网站主页,主页设置首页、美妆、服饰、零食、母婴、关于我们、在售分类等七个一级栏目。其中美妆、服饰、零食、母婴四个栏目含有二级栏目。
3、首页设置品牌热卖、限量抢购等图片展示,并利用Javascript设置用户名和密码的表单验证,在图片之下设置一个新闻列表提供有关网站的最新消息,右侧设置账户、密码的表单验证,并在网页结尾处写上官方微信和版权信息。
4、由主页导航栏上的的在售分类引出列表页,在列表页中采用新闻列表样式具体展示本企业的全部商品分类并设置超链接。
5、由列表页中美妆|女士护肤|洁面弹出具体的内容页面,主要由图片以及相应的文字介绍组成。
四、网站的核心代码
1、主页
body{
min-width:1080px;
color:#006e89;font-family:微软雅黑; background-image:url(images/轻奢背景.jpg); }
#outermost #title{
margin: 0 auto;
width: 1080px;
}
#nav{
width: 1080px;
margin:0 auto
}
#nav ul li{
padding:0 5px;
color:#CCC;
margin:10px 0 0 0;
float:right;
list-style: none
}
#nav ul li a{
color:#666;
text-decoration: none
}
#nav ul li a:hover{
color:#F00;
text-decoration: underline
}
#outermost{
clear:both;
width:1080;
margin-left:auto;
margin-right:auto
}
#top{
font-family: 隶书;
font-size: 55px;
margin:0
}
#outermost #title{
margin: 0 auto;
width: 1080px
}
#outermost #sddm{
margin:0 auto;
padding: 0;
width: 1080px;
z-index: 30;
background-color:#030303;
height:40px
}
#sddm li{
margin:50;
padding:0;
list-style: none;
float: left;
font: bold 20px arial
}
#sddm li a{
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 120px;
background:#030303;
color: #FFF;
text-decoration: none
}
#sddm li a:hover{
background: #030303
}
#sddm div{
position: absolute;
visibility: hidden;
margin: 0 35 0 0;
padding: 0 35 0 0;
background: #030303;
border: 1px solid #030303 }
#sddm div a {
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: 120;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #030303;
color: #2875DE;
font: 20px arial
}
#sddm div a:hover {
background: #030303;
color: #FFF
}
#main{margin:auto;
font-size:30px;
width:1000px;
text-align:center
}
#content{magin-left:20px;
font-size:22px;
width:auto;
height:200px;
float:left
}
#content1{float:left;}
#content2{magin:auto 0 auto auto;
font-size:18px;
height:200px;
float:right
}
#bottom{magin:auto auto 0 auto;
text-align:center;
font-size:18px;
clear:left
}
$(function(){
$("#KinSlideshow").KinSlideshow({
moveStyle:"down",
intervalTime:8,
mouseEvent:"mouseover",
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} });
})
}
document.onclick = mclose;
// -->
轻奢电商
正品保障7天退换
轻奢电商——轻奢新主义,只为懂你的人
官方微信:4783952zxx
©版权所有 1294715678@https://www.360docs.net/doc/6c3912020.html,
2、列表页
body{color:#006e89;font-family:微软雅黑;background-image:url(images/轻奢背景.jpg)}
#sddm{
padding:0;
z-index: 30;
background-color:#030303;
height:40px;
color:#FFF
}
#sddm li{
padding:10px 30px 5px 30px;
list-style: none;
float: left;
width:130px;
font: bold 20px arial;
color:#FFF
}
#sddm1{background-color:#006e89}
#top{font-family:隶书;font-size:45px;text-align:center}
#content{font-size:24px;padding:10px auto auto 20px;magin:auto auto auto 30px}
#content ul first{font-size:24px;margin-left:50px}
#content ul second{font-size:18px;margin-left:60px}
a{font-size:18px;text-decoration:underline;color:#006e89}
a:hover{font-size:18px;text-decoration:underline;color:#000}
#bottom{magin:auto auto 0 auto;text-align:center;font-size:18px;clear:left}
轻奢电商
正品保障7天退换
官方微信:4783952zxx
©版权所有 1294715678@https://www.360docs.net/doc/6c3912020.html,