1500字范文 > web前端期末大作业(我的家乡广安网页设计与制作)HTML+CSS网页设计实例企业网站制作

web前端期末大作业(我的家乡广安网页设计与制作)HTML+CSS网页设计实例企业网站制作

时间：2020-03-04 03:42:02

家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

一、网页介绍📖一、网页效果🌌二、代码展示😈1.HTML结构代码 🧱2.CSS样式代码 🏠 三、个人总结😊四、更多干货🚀

一、网页介绍📖

1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>我的家乡广安</title><link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><div class="main"><div class="top"><div class="logo"><img src="images/logo.png" /></div></div><div id="nav"><ul> <li><a class="hos" href="index.html">首页</a></li><li><a href="about.html">关于家乡</a></li><li><a href="jingdian.html">家乡景点</a></li><li><a href="news.html">家乡新闻</a></li><li><a href="jingji.html">经济状况</a></li><li><a href="liuyan.html">在线留言</a></li></ul></div><div class="nerong"><div class="left"><div class="title">家乡介绍</div><div class="jieshao"><img src="images/xuex.jpg" width="300" height="175"><p>广安，四川省地级市，世纪伟人邓小平的故乡。位于四川省东北部，东、南两部分与重庆市垫江县、长寿区、渝北区、合川区接壤，西部与遂宁市蓬溪县和南充市嘉陵区、高坪区相邻，北部与南充市蓬安县和达州市渠县、大竹县毗连。广安是四川省唯一的"川渝合作示范区"和距离重庆主城区最近的地级市，纳入了重庆1小时经济圈。</p><p> 1993年7月2日，经国务院批准设立广安地区，1998年7月31日，经国务院批准撤销广安地区设立广安市。现总辖广安区、前锋区、岳池县、武胜县和邻水县，代理管辖华蓥市，总面积约6344平方千米，市人民政府驻广安区思源大道。拥有国家A级景区16个，其中1个5A级，5个4A级。国家水利风景区3处，省级湿地公园2处。乡村旅游每年接待游客数百万。邓小平故里市及相关遗迹，宝箴塞、褒先寺、肖溪古镇等遗址文化积淀丰厚，嘉陵江、金城山、御临河小山峡等景色亦是游客探古访幽、观光休闲的好去处。广安不仅是邓小平同志的故乡，这里还孕育了"红岩魂"，形成了独具特色的红色旅游资源，成为了全国12个"重点红色旅游区"和30条红色旅游精品线路之一，是四川红色旅游的龙头和全国红色旅游的重要目的地。 </p><p>广安先后获得全国文明城市、全国卫生城市、中国优秀旅游城市、全国双拥模范城市、国家园林城市和国家森林城市等殊荣。</p></div><div class="title">家乡新闻</div><div class="news"><ul><li><a href="#"><p>"澳门林"在广安邓小平故里旅游景区揭碑</p><span>-11-25</span></a></li><li><a href="#"><p>广安来重庆推介"红色旅游"，三大定制路线邀您体验 </p><span>-11-25</span></a></li><li><a href="#"><p>第六届中国广安龙安柚旅游文化节开幕吸引近万人来尝鲜 </p><span>-11-25</span></a></li><li><a href="#"><p>"柚"有新玩法今年广安龙安柚旅游文化节新活动新玩法不断</p><span>-11-25</span></a></li><li><a href="#"><p>广安市首届"小平故里工匠杯" 广安思源酒店荣获5项大奖</p><span>-11-25</span></a></li><li><a href="#"><p>首届广安美食文化节今日在广安启幕</p><span>-11-25</span></a></li><li><a href="#"><p>摩力圣汇：春季泡温泉，养生一整年!</p><span>-11-25</span></a></li></ul></div></div><div class="right"><div class="title">地理环境</div><img src="images/ah01.jpg" /><p>广安地理坐标为北纬30°01′-30°52′，东经105°56′-107°19′，东西宽134.5公里，南北长93.6公里，幅员面积6344平方千米。广安市呈扇形分布于川中丘陵与平行岭谷两大地形区之间，是三峡库区发展的接力带。广安是四川省毗邻重庆主城区最近的地级市，有"川东门户"之谓。</p><img src="images/ah02.jpg" /><p>广安地处中亚热带湿润季风气候区，气候温暖，热量充足，雨量丰沛，空气湿度大，日照少，霜期短，风力大。年平均气温16℃，最冷月（1月）平均气温3℃，最热月（7月）平均气温33℃。多年大于或等于10℃以上的年积温5600℃，无霜期306-328天。年平均降水量1200毫米，43%的降水量集中于作物生长旺盛的夏季。多年平均径流系数0.48，即降水量的48%汇入河川，52%为土壤吸收和植物蒸腾所消耗。终年植物繁茂，且无季节性河流。</p></div></div><div class="foot"><p>-@版权所有我的家乡广安 </p></div></div></body></html>

2.CSS样式代码 🏠

@charset "utf-8";/* CSS Document */body {margin: 0 auto;font-size: 14px;font-family: "微软雅黑";line-height: 22px;background: #fbf6d9}div{height: auto;margin: 0;padding: 0;}p{height: auto;margin: 0;padding: 0;}input{height: auto;margin: 0;padding: 0;}li {list-style: none;margin: 0;padding: 0;}ul {list-style: none;margin:0;padding:0;}img {border: 0;margin: 0;padding: 0;}a {text-decoration: none;color: #333;font-weight: normal;}a:link {color: #333;}a:hover {color: #629705;text-decoration: none;overflow: hidden;}.main {width: 1000px;height: auto;overflow: hidden;margin: 0 auto;background: #FFF;}.top {width: 1000px;height: 189px;background: url(../images/top-bg.jpg) no-repeat;}.logo {width: 500px;height: 80px;margin-left: 20px;display: block;padding-top: 50px;}#nav {width: 1000px;height: 50px;background: #000000;margin: 0 auto;}#nav ul {width: 1000px;height: 50px;line-height: 50px;font-size: 14px;margin: 0 auto;}#nav ul li {width: 166px;height: 50px;line-height: 50px;color: #FFF;float: left;text-align: center;}#nav li a {color: #FFF;font-family: "微软雅黑";font-size: 16px;margin-left: 2px;display: block;font-weight: bold;}#nav li a:hover {color: #FF3;background: #fe9d2a;}.hos {color: #FF3 !important;background: #fe9d2a;}.nerong {width: 964px;height: 870px;margin: 0 auto;margin-top: 20px;}.left {width: 650px;height: auto;float: left;margin-right: 15px;}.jieshao {font-size: 14px;line-height: 25px;font-weight: normal;text-align: left;width: 618px;height: 452px;}.jieshao img {float: left;margin: 20px;}.jieshao p {text-indent: 2em;}.jies {width: 964px;margin: 0 auto;margin-top: 0px;margin-bottom: 0px;margin-top: 20px;margin-bottom: 50px;}.jies img {float: left;margin: 15px;}.jies p {text-indent: 2em;line-height: 25px;font-size: 14px;}.xq-box01 {width: 960px;height: 1150px;padding: 20px;}.xq-box01 ul {padding: 0px;}}.zbox1 .bx .rig h1 {width: 225px;height: 35px;background: #b7885d;border-radius: 15px;text-align: center;color: #FFF;font-size: 18px;margin-bottom: 10px;line-height: 35px;font-weight: normal;}.zbox1 .bx .rig p {line-height: 25px;font-size: 14px;}.neirong {width: 960px;height: auto;overflow: hidden;background: #FFF;padding: 20px;}.neirong p {text-indent: 2em}.neirong img {display: block;margin: 0 auto;margin-top: 10px;margin-bottom: 10px;}.ntitle {font-size: 16px;height: 80px;line-height: 40px;margin: 0 auto;text-align: center;color: #333;margin-left: 20px;font-weight: bold;border-bottom: #CCC 1px dashed;margin-bottom: 20px;}.title2 {height: 30px;line-height: 30px;font-size: 12px;text-align: center;color: #999;font-weight: normal;}.title2 span {background: url(../images/ico01.jpg) 0px 0px no-repeat;padding-left: 20px;color: #666 !important;font-weight: normal;}.jtitle {font-size: 16px;height: 40px;line-height: 40px;margin: 0 auto;text-align: center;color: #333;margin-left: 20px;font-weight: bold;border-bottom: #CCC 1px dashed;margin-bottom: 20px;}.jdi {padding: 0px 10px;}.jdi img {display: block;margin: 0 auto;padding-top: 15px;padding-bottom: 15px;}.foot {height: 143px;line-height: 143px;text-align: center;font-size: 14px;color: #FFF;background: #000;}

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；所有页面相互超链接，可到三级页面，有5-10个页面组成；页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；菜单美观、醒目，二级菜单可正常弹出与跳转；要有JS特效，如定时切换和手动切换图片新闻；页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；页面清爽、美观、大方，不雷同。网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。