我的家乡主题网页设计与制作_vscode页面设计家乡简介

作者：笔触狂放9 | 2024-02-15 13:24:53

踩

vscode页面设计家乡简介

网页的基本结构：

（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等

网页内容：

根据本网站的内容和功能划分为：首页、家乡简介、风景名胜、美食特色、留言板。

主要页面介绍及截图

（1）index首页

首页的header部分包括了上面的家乡风景图片，图片下面紧接着导航栏，导航栏左上角有个“小图片和家乡商丘”的logo，导航栏使用了div标签设了一个背景图片，导航栏包括了“首页”、“家乡简介”、“风景名胜”、“美食特色”和 “留言板”。

main部分包括三个风景名胜的介绍。

其中header部分的logo运用了浮动元素，导航栏运用Div、Css和超链接元素，设置字体颜色、大小、居中；使用定位布局调整导航栏的位置；调整了块元素的下边框，更加美观。

其中main部分设置三个div盒子，将三个小div盒子嵌套在大div盒子中，大div盒子利用position定位布局调整位置，嵌套在其中的三个小div盒子利用浮动元素和margin外边距进行设置。

三个小div盒子通过border-radius设置边框的弧度使页面更加美观，设置背景颜色并在其中插入图片和输入文字，并通过CSS样式添加了轮播图和滑动图片集，使整体更加美观。

在下方添加了footer页尾，并标注了版权。

（2）家乡简介

利用vedio标签插入一个家乡的宣传视频，利用postion定位布局调整视频位置，width和height调整视频的宽度和高度。

利用超链接在设置了一个目录，并采用了右浮动使其在主体的右上角位置。

利用div块元素，利用postion定位元素调整位置，通过border-radius设置边框的弧度，设置背景颜色为淡蓝色。在其中插入城市介绍的文字。嵌套多个div盒子，通过border-radius设置边框的弧度。并将插入的图片设置了鼠标经过放大1.2倍的效果。

（3）风景名胜

给每个著名景点都设置了超链接来查更多，同时将插入的图片设置了鼠标经过放大的效果。

（4）美食特色

利用div块元素，设置了四个个div盒子，利用浮动进行排列，并在其中插入图片和输入文字。

在下方添加了一个vedio美食宣传视频，并利用postion定位布局调整视频位置，width和height调整视频的宽度和高度

（5）留言板

留言板页面运用了列表和表单元素，并插入了一张图片来增加美观。

网页源码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="CSS/1.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="header">

<img src="images/26.jpg" width="100%" height="220" id="hi1">
</div>

<div class="dh">
<div class="total">
<div class="nav">
<div class="logo"></div>
<div class="home_name">家乡.商丘</div>

<ul>
<li><a href="index.html">首页</a></li>
<li><a href="Untitled-2.html">家乡简介</a></li>
<li><a href="fengjing.html">风景名胜</a></li>
<li><a href="msts.html">美食特色</a></li>
<li><a href="ly.html">留言板</a></li>
</ul>
</div>
</div>
</div>
<div class="line"></div>
<div class="donghua">

<div id="photo">
<img src="images/29.jpg">
<img src="images/30.jpg">
<img src="images/18.jpg">
<img src="images/3.jpg">
<img src="images/19.jpg">
</div>
</div>
<div class="zhuti">
<div id="zhuti-left">
<table>
<tr>
<img src="images/15.jpg">
</tr>
<h4>商丘新闻</h4>
<hr size="3" color="rgb(24, 24, 88)">
<p>
2023年5月21日,为贯彻落实省委文旅文创融合战略和市委打造文化强市、推动文旅产业高质量发展的战略部署。5月21日，商丘市文化广电和旅游局邀请了省文化和旅游厅副厅长李延庆和文旅规划方面专家组一行五人，对我市5A级旅游景区创建工作进行检查指导、把脉问诊。
</p>
</a>
</tr>

</table>
</div>

<div id="zhuti-right">
<table>
<tr>
<h4>商丘介绍</h4>
<hr size="3" color="rgb(24, 24, 88)">
<p>
商丘市，河南省辖地级市，位于河南省东部，简称“商”，是豫鲁苏皖接合部区域性中心城市。市域面积10704平方千米。截至2022年10月，商丘市辖2个区、6个县、1个省直管县级市和2个功能区。市政府驻睢阳区府前路1号。截至2021年末，商丘市户籍人口1012万人，截至2022年末，常住人口773万人。
</p>
<p>
商丘是国家历史文化名城，是华夏文明和中华民族的重要发祥地之一，中国重要古都城，被誉为“中国古城池建城史天然博物馆”。是“商祖、商人、商业、商品、商文化”的发源地，中华始祖、三皇之首燧人氏在这里发明了钻木取火，开创了人类文明历史新纪元。素有“中国火文化之乡”“汉兴之地”“两宋龙潜之地”之称，是孔子的祖籍地，涌现出商汤、庄子等名人。
</p>
</tr>
<tr>
<br>
<h4>主要风景</h4>
<hr size="3" color="rgb(24, 24, 88)">
<marquee behavior="scroll" height="170px">
<ul>
<li><img src="images/6.jpg"></li>
<li><img src="images/12.jpg"></li>
<li><img src="images/21.jpg"></li>
<li><img src="images/20.jpg"></li>
<li><img src="images/22.jpg"></li>
<li><img src="images/24.jpg"></li>
</ul>
</marquee>
<hr size="3" color="rgb(24, 24, 88)">
</tr>
</table>
</div>
</div>

</div>
<div id="" class="end">
<p>
版权所有
</p>
</div>
</body>
</html>

源文件

加作者QQ：3010331874获取(非免费）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/84869