web前端技术课程作业

web前端技术课程作业

1 网站的设计选题

主题:我的家乡—浙江省绍兴市诸暨市
目标用户:全国各地的游客
意义:向他们介绍我美丽家乡的特色小镇、主导产业、旅游景区、美食、名人、著名高校等等,从经济、文化等方面全方位介绍,让全国各地的人们都了解我的家乡,并喜欢上这座城市。

2 网站的内容规划

(1)本网站设置6个栏目,分别是“特色小镇”、“主导产业”和“旅游景区”、“美食”、“名人”和“著名高校”,但主要介绍“主导产业”、“著名高校”和“美食”
a)“主导产业”:经济是衡量一个城市的指标,因此会选择介绍与经济相关联的产业。主导产业之下又分为6个子栏目(即6个主导产业),因此挑选其中一个产业–珍珠业,具体介绍该产业的概况,附加两张珍珠图片,点击图片可以查看详情。
b)“著名高校”:教育水平一般也是人们时长关注的话题,因此会选择介绍相关教育的高校。著名高校之下又分为5个子栏目(即5所中学),因此挑选其中一所中学–牌头中学(浙江省一级重点中学),具体介绍它的荣誉、校训校歌、绩效以及简介。附加一张图片,并且设置在图片上悬停时会自下而上介绍牌头中学地理位置、理念的效果。最后再增加一段视频(牌头中学版南山南),视频中的文字贴近中学的人事物,视频的图片为中学的景色,这视频能提高网页的丰富之感。
c)“美食”:俗话说,民以食为天。因此还会介绍相关美食。美食之下又分为3个子栏目(即特色菜肴、点心、特产),现选择5种特色点心展开介绍,图文并茂,图片加一些旋转,文字主要介绍相关点心的概况和做法。
(2)主色调选择蓝色,蓝色是比较沉静的一种色调,来自于天空和海洋的颜色,是令人心旷神怡的颜色,会让人感觉时间更为宽松,浏览网页时会以轻松愉快的心情去看。
(3)网站特点:内容组织上较为整齐;风格设置上较为宽松、不紧凑,避免视觉疲劳。

3 网站实现

(1)本网站设置7个栏目组成,结构图如下:
web前端技术课程作业_第1张图片
(2)网站各栏目的实现

a)主页

web前端技术课程作业_第2张图片
头部header背景颜色为蓝色,设置0.85的透明度,且分为左右两部分。左边为logo。右边包含上下两行,link和nav两部分,link上包含一个显示当前时间的JavaScript脚本,两个超链接元素(手机、登录)、两个表单元素(文本框、提交按钮),并且在文本框设置默认值“欢迎来到诸暨大世界”;导航栏nav包含两个列表,其中一个列表作为下拉单。
banner部分插入背景图片,设置z-index保证它在头部的下面。
内容content部分首先为上下结构,其次为左右结构,上面部分分为cont_left和cont_right两部分,这两部分一个设置左浮动,另一个设置右浮动,而且结构类似,都包含面包屑导航和列表。下面部分左边通过设置transfrom-style可翻转图片,翻转后图片显示的文字主要为诸暨市的地理位置,右边部分为标题和段落。
尾部footer部分分为三部分,左边部分为logo部分,中间为网站相关信息,右边放置一个二维码。
返回fanhui部分一个小图标,设置固定定位fixed,滑到哪里一直在视线范围。
因设置w1200属性宽度width:1200,position:relative,每一张网页处于居中状态。

b)子栏目主要产业–珍珠业

web前端技术课程作业_第3张图片其中头部header、插入图片banner、尾部footer、返回fanhui与上述相同。
中间部分首先放置面包屑导航栏(mianbaoxie)部分,叙述当前位置。
其次为内容content部分,左边为子栏目下所包含的子页,放置在列表中。右边分为上下两部分,上面部分为文字text部分,下面部分为图片picture部分。其中两种图片设置弹性盒,间距均匀,而且设置过渡效果,利用transition属性渐变,当在图片上悬停时出现“点击查看详情”的超链接文字。

c)子栏目著名高校–牌头中学

web前端技术课程作业_第4张图片
其中头部header、插入图片banner、尾部footer、返回fanhui与上述相同。
中间部分首先放置面包屑导航栏(mianbaoxie)部分,叙述当前位置。
其次为内容content部分,左边为子栏目下所包含的子页,放置在列表中。右边分为上(top)中(center)下(bottom)部分,top部分包含多段文字,center部分利用iframe插入一段视频,bottom部分插入图片,且在图片上设置transition过渡样式,悬停在图片上时,文字说明自下而上出现。

d)子栏目美食–小吃

web前端技术课程作业_第5张图片
其中头部header、插入图片banner、尾部footer、返回fanhui与上述相同。
中间部分首先放置面包屑导航栏(mianbaoxie)部分,叙述当前位置。
其次为内容content部分,左边为子栏目下所包含的子页,放置在列表中。右边部分先分为两部分(before和stage),before部分放置标题和相关说明,stage部分放置弹性盒,为5个小块。每一个小块又包含两个内容,图片和文字说明,图片设置3D变换,悬停在图片上时,向右转45度。
(3)特色网页及其布局设计
选择某张网页:主页
主要思路:头部header背景颜色为蓝色,设置0.85的透明度,且分为左右两部分。左边为logo。右边包含上下两行,link和nav两部分,link上包含一个显示当前时间的JavaScript脚本,两个超链接元素(手机、登录)、两个表单元素(文本框、提交按钮),并且在文本框设置默认值“欢迎来到诸暨大世界”;导航栏nav包含两个列表,其中一个列表作为下拉单。banner部分插入背景图片,设置z-index保证它在头部的下面。内容content部分首先为上下结构,其次为左右结构,上面部分分为cont_left和cont_right两部分,这两部分一个设置左浮动,另一个设置右浮动,而且结构类似,都包含面包屑导航和列表。下面部分左边通过设置transfrom-style可翻转图片,翻转后图片显示的文字主要为诸暨市的地理位置,右边部分为标题和段落。尾部footer部分分为三部分,左边部分为logo部分,中间为网站相关信息,右边放置一个二维码。返回fanhui部分一个小图标,设置固定定位fixed,固定在网页的右下角。
a)该网页布局示意图:
web前端技术课程作业_第6张图片
b)每一块的CSS外观和定位的控制代码
提前设置好的样式为:
.fl{
float: left;#设置左浮动
}
.fr{
float: right;#设置右浮动
}
.clear{
clear: both;#清除两边的浮动
}
A、 .header块:
.header{
width: 100%;
height: 122px;
background: rgba(135,206,235,0.85);
position: absolute;
top: 0;
left: 0;
z-index: 9999999999;
}
.header块设置宽度为body的宽度和高度为122px,背景颜色为蓝色,透明度0.85,定位为绝对定位,设置top和left,使得位置在左上角
B、 .logo块:
.logo a{
display:inline-block;
height: 110px;
line-height: 110px;
padding:0 auto;
}
.logo a display使得inline行内元素a标签转换为inline-block可以设置高度,而且同时设置行高使得logo图垂直居中,上右内边距为0。

你可能感兴趣的:(前端)