web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript
👨🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。
🏀 精彩专栏推荐👇🏻👇🏻👇🏻
💝 【作者主页——🔥获取更多优质源码】
💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
@TOC
一、网站题目👨🎓
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。
二、网站描述✍️
旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。
三、网站介绍📖
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2）css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）js文件包含：js实现动态轮播特效, 点击事件等等（个别网页中运用到js代码）。
四、网站效果🌐
网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面：计划实现简洁大气的网页设计效果。
网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。
五、网站代码制作部分 📕
（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。
HTML结构代码🧱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>唯一</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="nav">
<img src="picture/logo.png" alt="">
<a href="" class="active">首页</a>
<a href="case.html">看客片</a>
<a href="address.html">去哪拍</a>
<a href="about.html">关于我们</a>
<a href="comment.html">查评价</a>
<a href="login.html">登录</a>
</div>
<div class="banner">
<img src="picture/ban.jfif" alt="">
</div>
<div class="address ban">
<h2>专注旅拍15年 超100万新人选择</h2>
<h3>甄选全球200大拍摄目的地</h3>
<table border="1" cellspacing='1'>
<tr class="thead">
<td colspan="2" class="black">国内
<span>OMESTIC</span>
</td>
<td colspan="2">东南亚</td colspan="2">
<td colspan="2">欧洲海外</td>
</tr>
<tr>
<td>
<img src="picture/origin2(1).png" alt="">
<div>三亚</div>
</td>
<td>
<img src="picture/origin2.png" alt="">
<div>丽江</div>
</td>
<td>
<img src="picture/origin2(2).png" alt="">
<div>大理</div>
</td>
<td>
<img src="picture/origin2(3).png" alt="">
<div>上海</div>
</td>
<td>
<img src="picture/origin2(4).png" alt="">
<div>大连</div>
</td>
<td>
<img src="picture/origin2(5).png" alt="">
<div>青岛</div>
</td>
</tr>
<tr>
<td>
<img src="picture/origin2(6).png" alt="">
<div>杭州</div>
</td>
<td>
<img src="picture/origin2(7).png" alt="">
<div>温州</div>
</td>
<td>
<img src="picture/origin2(8).png" alt="">
<div>青海</div>
</td>
<td>
<img src="picture/origin2(9).png" alt="">
<div>西藏</div>
</td>
<td>
<img src="picture/origin2(10).png" alt="">
<div>稻城</div>
</td>
<td>
<img src="picture/origin2(11).png" alt="">
<div>新疆</div>
</td>
</tr>
</table>
</div>
<div class="pro ban">
<h2>WPC中国冠军技术领衔</h2>
<img src="picture/wpc.jpg" alt="">
</div>
<div class="list">
<h2>每季客片TOP榜</h2>
<h3>唯一旅拍坚持以客照说话</h3>
<div class="case ban">
<div class="item">
<img src="picture/index.jfif" alt="">
<div class="sub">#11月第一季 原创客片</div>
<div class="find">查看详情</div>
</div>
<div class="item">
<img src="picture/index2.jfif" alt="">
<div class="sub">#10月第四季 原创客片</div>
<div class="find">查看详情</div>
</div>
<div class="item item1">
<img src="picture/index3.jfif" alt="">
<div class="sub">#10月第三季 原创客片</div>
<div class="find">查看详情</div>
</div>
</div>
</div>
<div class="comment ban">
<h2>真实用户评价 不止是拍得好</h2>
<div class="more"><a href="###">查看更多评价</a></div>
<div class="com-list">
<div class="com-item">
<img src="picture/com.jpg" alt="">
<div class="com">很满意哦，化妆老师特别棒，每个造型妆容都特别仔细，我个人非常喜欢，服务非常好，很喜欢小姐姐。摄影老师技术特别棒，每张底片都很棒，优秀，棒棒的。</div>
<div class="user">@***糍</div>
</div>
<div class="com-item">
<img src="picture/comment2.jpg" alt="">
<div class="com">万分感谢唯一旅拍的化妆师春雨And摄影师小段，还有一个欢脱的摄影助理大龙，很高兴和你们一起完成这次旅拍，大理一直梦寐以求的地方，这次终于来</div>
<div class="user">V***D</div>
</div>
<div class="com-item">
<img src="picture/comment3.jpg" alt="">
<div class="com">非常满意的一天，非常感谢摄影师王继伟老师，化妆师琪琪，超级感谢，非常辛苦的一天，来来回回帮忙，非常贴心，服务态度也特别好，之前会有担</div>
<div class="user">W**X</div>
</div>
<div class="com-item">
<img src="picture/comment4.jpg" alt="">
<div class="com">从网上预订的婚纱照，和最爱的人来到三亚，风景好，门店环境好，服务周到，热情，所有的老师们都很尽心尽力，全程为我们提供优质的服务</div>
<div class="user">小***S</div>
</div>
</div>
</div>
<div class="footer">
版权信息
</div>
</body>
</html>
CSS样式代码🏡
*{
margin: 0;
padding: 0;
}
bady{
color: #333;
}
a{
text-decoration: none;
color: #333;
}
.ban{
width: 1200px;
margin: 0 auto;
}
img{
width: 100%;
}
.nav{
height: 95px;
line-height: 95px;
text-align: center;
}
.nav img{
width: 170px;
height: 42px;
vertical-align: middle;
margin-right: 60px;
}
.nav a{
padding: 0 20px;
}
.active{
color: #f56f00;
}
.footer{
padding: 30px 0;
text-align: center;
}
六、遇到问题及如何解决🔍
实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。
七、实训总结😊
通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。
八、更多干货🎁
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥!
💂【获取方式】
- 点赞
- 收藏
- 关注作者
评论（0）