1200字范文 > web前端期末大作业——基于HTML+CSS制作河南旅游网页设计

web前端期末大作业——基于HTML+CSS制作河南旅游网页设计

时间：2022-04-17 08:35:53

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

文章目录🌰

一、网页介绍📖一、网页效果🌌二、代码展示😈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 lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/index.css"></head><body><div class="header"><h1 class="title">红色河南旅游网</h1></div><div class="banner"><img src="picture/banner.jpg" alt=""></div><div class="main"><div class="left"><div class="main-title"><h3>导航</h3></div><ul class="content"><li><a href="">首页</a></li><li><a href="hongqiqu.html">红旗渠</a></li><li><a href="zhugou.html">竹沟革命纪念馆</a></li></ul><div class="clear"></div></div><div class="center"><div class="main-title"><h3>河南简介</h3></div><div class="content jianjie"><img src="picture/map.png" class="map" alt=""><p>河南历史悠久，是中华民族和华夏文明的重要发祥地；是全国农产品主产区和重要的矿产资源大省；人口众多，是全国第一人口大省，区位优越，是全国重要的交通通信枢纽和物资集散地；农业领先，是全国第一农业大省、第一粮食生产大省、第一粮食转化加工大省；发展较快，经济总量稳居全国第五位；潜力很大，正处于工业化、城镇化加快发展阶段，发展的活力和后劲不断增强。</p><h3>名称由来</h3><p>河南位于中国中东部、黄河中下游，因大部分地区位于黄河以南，故称河南。远古时期，黄河中下游地区河流纵横，森林茂密，野象众多，河南又被形象地描述为人牵象之地，这就是象形字“豫”的根源，也是河南简称“豫”的由来。《尚书禹贡》将天下分为“九州”，豫州位居天下九州之中，现今河南大部分地区属九州中的豫州，故有“中原”、“中州”之称。</p><h3>山水胜景</h3><p>河南既是历史文化资源大省，也是自然景观荟萃之地，山川壮美，风光秀丽，融南秀北雄于一体。全省有国家级风景名胜区8处，省级23处。郑州的嵩山，洛阳的龙门山、白云山，信阳的鸡公山，焦作的云台山，济源的王屋山，平顶山的石人山，安阳的太行大峡谷，南阳的宝天曼、老界岭，鹤壁的云梦山，驻马店的嵖岈山等均属山水奇观；黄河自西向东流经河南，出三门峡后经小浪底流入黄淮平原，郑州至开封段河床高出地面，形成地上悬河的独特自然景观。</p><div class="fj-image"><img src="picture/1.jpg" alt=""><img src="picture/2.jpg" alt=""><img src="picture/3.jpg" alt=""><img src="picture/4.jpg" alt=""></div></div><div class="clear"></div></div><div class="clear"></div></div><div class="footer"><p></p></div></body></html>

2.CSS样式代码 🏠

*{margin: 0;padding: 0;list-style: none;box-sizing: border-box;}body{background: #f2f2f2;}a{text-decoration: none;color: #df4b4b;display: block;}h1, p, span{cursor: default;}img{border: none;}.box{max-width: 1200px;margin: 0 auto;border: 2px solid red;}.fl{float: left;}.fr{float: right;}.clear{clear: both;}.header{width: 100%;height: 60px;line-height: 60px;background: #2567b6;background: linear-gradient(to right, #df4b4b, #ffd2d2);margin-bottom: 20px;}.title{max-width: 1200px;margin: 0 auto;color: #fff;font-size: 28px;}.banner{max-width: 1200px;margin: 20px auto;}.banner img{width: 100%;height: auto;border-radius: 12px;overflow: hidden;}.main{max-width: 1200px;margin: 0 auto;/* border: 2px solid red; */}.left{width: 20%;min-height: 400px;background: #fff;float: left;border-radius: 12px;overflow: hidden;}.center{width: 80%;float: left;padding: 0 30px;border-radius: 12px;}.right{width: 20%;float: left;border-radius: 12px;overflow: hidden;}.fj-image{margin: 10px 0;}.fj-image img{display: inline-block;width: 200px;height: 180px;margin-right: 5px;}.main-title{text-align: center;height: 40px;line-height: 40px;color: #fff;background: #df4b4b;border-radius: 12px 12px 0 0;}.content{background: #fff;}.content li{height: 60px;line-height: 60px;text-align: center;cursor: pointer;}.content li:hover{background: #ffd2d2;}.content li:hover a{color: #fff;}.jianjie{background: #fff;padding: 10px;}.map{width: 280px;height: auto;float: left;margin-right: 10px;}p{text-indent: 2em;font-size: 14px;letter-spacing: 2px;line-height: 1.8;color: #666;}.jianjie h3{margin: 10px 0;color: #df4b4b;text-align: center;}.gonglue li, .meishi li{height: 40px;line-height: 40px;font-size: 14px;cursor: default;margin-left: 30px;}ol li{list-style-type:decimal;}.gonglue li:hover, .meishi li:hover{color: #df4b4b;}.right-one{background: #fff;margin-bottom: 20px;overflow: hidden;border-radius: 12px;}.right-two{background: #fff;}.meishi li{list-style-type:disc;}.right-two .main-title{border-radius: 12px 12px 0 0;}.footer{width: 100%;height: 60px;text-align: center;background: #df4b4b;margin-top: 40px;}.footer p{line-height: 60px;color: #fff;}.js{width: 400px;float: left;margin-right: 20px;}.fr{width: 400px;float: right;margin-left: 20px;}

三、个人总结😊

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

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