web前端技术课程作业

web前端技术课程作业

1 网站的设计选题

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

2 网站的内容规划

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

3 网站实现

(1)本网站设置7个栏目组成,结构图如下:
在这里插入图片描述
(2)网站各栏目的实现

a)主页

在这里插入图片描述
头部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)子栏目主要产业–珍珠业

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

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

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

d)子栏目美食–小吃

在这里插入图片描述
其中头部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)该网页布局示意图:
在这里插入图片描述
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。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 是的,有些web前端作业的源码是可以免费获取的。正如在各种开源社区和代码分享平台上所见,许多前端开发者乐于将他们的作品共享给其他人使用。 免费获取web前端作业源码有几个好处。首先,对于学习者来说,这些源码可以作为学习和参考的资源。通过查看他人的代码,我们可以学习到他们的开发思路、技术实现以及代码组织方式。这有助于我们提升自己的编程能力和设计水平。 第二,对于那些刚刚开始前端开发的人来说,免费获取源码可以帮助他们更快地入门。通过使用他人开发的代码,他们可以通过修改、调试和实践来快速构建自己的项目。这有助于他们加深对前端开发的理解,并逐渐独立完成自己的作品。 当然,免费获取源码也有一些限制和注意事项。首先,我们必须遵守源码的使用许可协议。有些作品可能会附带特定的开源协议,我们需要在使用时遵守这些协议中的规定。其次,我们应该尊重作者的劳动成果,不应该将这些源码用于商业目的,而应该把它们仅限于学习和个人非盈利使用。 总之,免费获取web前端作业源码是一个很好的资源,可以帮助我们在前端开发领域更好地学习和成长。我们应该充分利用这些开源资源,同时要尊重作者的劳动和知识产权。 ### 回答2: 是的,很多web前端作业的源码是免费提供的。 由于web前端是一个非常开放的领域,许多人都乐于分享他们的代码和项目。这些开源项目通常以GitHub等代码托管平台的形式存在,任何人都可以免费获取和使用这些源码。 获得免费的web前端作业源码有几个途径。首先,你可以在搜索引擎中输入相关的关键词,例如“web前端作业开源项目”等,就能找到一些资源分享网站和论坛上的帖子,里面有人分享他们的作业源码和项目。其次,你还可以关注一些web前端开发者的博客和社交媒体账号,他们会定期发布一些开源项目的源码,供其他人学习和使用。此外,还有一些知名的学术机构和在线教育平台也会免费提供他们的课程和相关作业的源码,供学习者参考。 获得免费的web前端作业源码对于学习者来说是非常有价值的。通过阅读和理解他人的代码,我们可以学习到不同的编程技巧、设计思路和最佳实践。同时,我们也可以借鉴他人的代码,将其应用到自己的项目中,提高开发效率和代码质量。在开源社区中,我们可以积极参与讨论和贡献自己的代码,与其他开发者一起相互学习和进步。 总之,web前端作业的源码免费提供给大家,既丰富了学习资源,也促进了开源和协作精神的传播。希望大家能够善用这些资源,不断提升自己的前端技术。 ### 回答3: 当我完成了一个满意的web前端作业,并且经过我自己的测试验证,我想与其他的前端开发者分享我的成果,帮助他们提高他们的编程技能,所以我决定将我的项目源码免费提供给大家使用。 首先,通过免费提供源码,我能够为其他人提供学习的机会。在web前端开发的学习过程中,经常遇到问题和困惑,而参考他人的源码是一种非常实用的学习方法。通过分享源码,其他前端开发者可以学习我在项目中使用的各种技术和解决问题的方法,从而提高他们自己的编程水平。 其次,通过免费提供源码,我可以得到其他开发者的反馈和建议。每个人在编程过程中都有自己的风格和方法,通过与其他人分享源码,我可以了解到其他前端开发者对我的项目的看法和建议,从而使我自己的编码技能不断地进步和改进。 最后,免费提供源码也是对开源社区的贡献。在开源社区中,开发者们相互分享他们的项目,帮助他人解决问题,共同进步。通过将我的项目源码免费提供,我也可以积极参与到这个社区中,为社区的发展做出贡献。 总而言之,我免费提供web前端作业的源码,是为了帮助他人学习和提高编程技能,接收他人的反馈和建议,并为开源社区做出贡献。这是一个互惠互利的过程,通过分享源码,我们可以一起进步,共同推动Web前端开发的发展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

freetozn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值