15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 静态HTML网页设计作品 DIV布局家乡介绍网页模板代码---(杭州 10页带本地存储登录

静态HTML网页设计作品 DIV布局家乡介绍网页模板代码---(杭州 10页带本地存储登录

时间:2023-10-03 16:06:02 | 来源:网站运营

时间:2023-10-03 16:06:02 来源:网站运营

静态HTML网页设计作品 DIV布局家乡介绍网页模板代码---(杭州 10页带本地存储登录注册 js表单校验):> ⛵ 源码获取 文末联系

Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 家乡旅游景点 | 家乡民生变化 | 介绍自己的家乡 | 我的家乡 | 家乡主题 | HTML期末大学生网页设计作业
  1. HTML:结构
  2. CSS:样式 在操作方面上运用了html5和css3, 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
  3. JavaScript:做与用户的交互行为
@TOC


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面; (2)css文件:css全部页面样式,文字滚动, 图片放大等; (3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个   (2)二级页面:从首页点击进入之后的页面叫做二级页面 (3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的 首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名 导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用. 网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示




在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述



HTML结构代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; box-sizing: border-box; font-family: "微软雅黑"; } .content{ width: 1000px; background: #fde8cb; margin: auto; padding: 0 50px; position: relative; } .top{ width: 100%; display: flex; height: 70px; align-items: center; justify-content: space-between; } .zuo{ font-size: 40px; color: #ca6a67; } .serach{ border-radius: 20px; height: 35px; width: 200px; border: 1px solid #ca6a67; text-align: right; line-height: 35px; padding-right: 10px; color: #ca6a67; } .nav{ width: 100%; background: #facd89; height: 50px; display: flex; align-items: center; position: absolute; left: 0; padding: 0 50px; justify-content: space-around; } .nav a{ color: #ca6a67; text-decoration: none; } .middle{ background: white; padding: 0 20px; width: 100%; padding-top: 30px; padding-bottom: 50px; } </style> <style> * { padding: 0px; margin: 0px; } #flash { width: 100%; height: 535px; margin: 50px auto; position: relative; } #flash #play { width: 100%; height: 535px; list-style: none; position: absolute; top: 0px; left: 0px; } #flash #play li { display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #flash #play li img { float: left; width: 100%; height: 100%; } #button { position: absolute; bottom: 20px; left:400px; list-style: none; } #button li { margin-left: 10px; float: left; } #button li div { width: 12px; height: 12px; background: #DDDDDD; border-radius: 6px; cursor: pointer; } #prev { width: 40px; height: 63px; background: url(images/beijing.png) 0px 0px; position: absolute; top: 205px; left: 10px; z-index: 1000; } #next { width: 40px; height: 63px; background: url(images/beijing.png) -40px 0px; position: absolute; top: 205px; right: 10px; z-index: 1000; } #prev:hover { background: url(images/beijing.png) 0px -62px; } #next:hover { background: url(images/beijing.png) -40px -62px; } .neirong{ width: 100%; display: flex; justify-content: space-between; } .neirong img{ width: 100%; } .neirong1{ width: 100%; display: flex; justify-content: space-between; margin: 20px 0; } .neirong>div{ width: 30%; } .neirong>div h3{ margin-bottom: 10px; } .neirong1>div{ width: 70%; } .neirong1>img{ width: 25%; } .neirong1>div h3{ margin-bottom: 10px; } p{ font-size: 13px; line-height: 25px; } .foot{ width: 100%; position: absolute; background: #facd89; color: #da8865; text-align: center; height: 70px; left: 0; line-height: 70px; } </style> <!-- <script type="text/javascript" src="js/script.js"></script> --></head><body> <div class="content"> <div class="top"> <div class="zuo"> 杭州 </div> <div class="you"> <div class="serach"> 搜索 </div> </div> </div> <div class="nav"> <a href="index.html">杭州首页</a> <a href="page1.html">城市简介</a> <a href="page2.html">行政区域</a> <a href="page3.html">地理环境</a> <a href="page4.html">自然环境</a> <a href="page5.html">历史文化</a> <a href="page6.html">地方特产</a> <a href="page7.html">风景名胜</a> <a href="register.html">用户注册</a> <a href="login.html">用户登录</a> </div> <div class="middle"> <div id="flash"> <ul id="play"> <li style="display: block;"><img src="images/027ecb78be92fdbc472af36b67eeeac.png" alt="" /></li> <li><img src="images/d009b3de9c82d15841bf77d9800a19d8bc3e429c.webp" alt="" /></li> </ul> </div> <div class="neirong"> <div> <h3>城市简介</h3> <p>杭州,简称“并(bīng)”,古称晋阳,别称并州、龙城,浙江省辖地级市、省会、国务院批复确定的中部地区重要的中心城市、以能源、重化工为主的工业基地。 [1] [161] 截至2021年,全市辖6个区、3个县,代管1个县级市, [172] 总面积6988平方千米 </p> </div> <div> <h3>行政区划</h3> <p>1996年,全市辖南城、北城、河西、南郊、北郊5个区,古交1个市,清徐、阳曲、娄烦3个县;41个街道,1174个居民委员会(以下简称居委会);61个乡,22个镇,1280个村民委员会(以下简称村委会)。</p> </div> <div> <h3>地理环境</h3> <p> 杭州市位于浙江省中部、晋中盆地北部地区,地理坐标为北纬37°27′~38°25′,东经111°30′~113°09′。北、东、西三面群山巍峙,北靠系舟山、云杭州,东据太行,西依吕梁,南接晋中平原,汾水自北向南纵贯全境。古昔有“襟四塞之要冲,控五原之都邑”之称誉。 </p> </div> </div> <div class="neirong1"> <img src="./images/625f381766910b8bec7cbfca31ccb5b.png" alt=""> <div> <h3>自然环境</h3> <p>杭州市水资源严重不足。全市多年平均水资源总量6.6亿立方米,人均占有水资源量202立方米,仅为浙江省人均占有量的38.5%,全国人均占有量的11.9%,世界人均占有量的1.7%。大气降水是杭州市水资源的主要补给源,但降水和径流变化大,分配不均匀,在连续干旱和多年枯水时期,水资源紧缺问题严重。地下水是杭州市的主要供水源,占总供水量的75%以上。全市平均年超采地下水资源量为1.12亿立方米,平均日超采量31万立方米。 [11] </p> </div> </div> <div class="neirong1"> <div> <h3>历史文化</h3> <p>杭州市宗教历史悠久,有佛教、道教、伊斯兰教、天主教、基督教。东汉建安年间(196—220)兴建的普光寺,是杭州市现存最早的佛寺。北魏时道教兴起,唐代道教、佛教达到鼎盛时期。唐朝中叶伊斯兰教传入杭州,现存的清真古寺据说建于唐代。明崇祯七年(1634),比利时耶稣会金尼格来杭州建堂,设立会口,传播天主教。清光绪三年(1877),英国传教士李提摩太在杭州设立基督教浸礼会,传播基督教。</p> </div> <img src="./images/0a2fdaf50548ab9ca4ef3205fd9d0dc.png" alt=""> </div> <div class="neirong"> <div> <h3>地方特产</h3> <img src="./images/90e81eee348147deb73064a35f31a55.png" alt=""> <p>杭州人的传统饮食习俗以面食为主,副食是蔬菜和少量的肉类。长期重主食、轻副食。杭州面食品种丰富,制作精美,尤以煮食类面食为代表,有“河捞”“拨鱼儿”“抿圪蚪”“抿尖”“圪搓搓”“包皮面”“煮疙瘩”,等等。 </p> </div> <div> <h3>旅游景点</h3> <img src="./images/2a1007d2865d8059005a626c1a35c7a.png" alt=""> <p>杭州是中国优秀的旅游城市,国家历史文化名城 [90] ,2020年度臻选旅游城市 [80] ,其中,杭州市A级旅游景区30处 [91] ,全国重点文物保护单位名单38处 [89] ,省级文物保护单位名单28处 [81] ,市级文物保护单位名单143处 [88] 文物古迹</p> </div> <div> <h3>城市荣誉</h3> <img src="./images/c69e1e26724cd7940b2030ff57c628f.png" alt=""> <p> 杭州是国家历史文化名城 [90] ,一座有两千多年建城历史的古都,“控带山河,踞天下之肩背”,“襟四塞之要冲,控五原之都邑”的历史古城。全市三面环山,黄河第二大支流汾河自北向南流经,自古就有“锦绣杭州城”的美誉。 </p> </div> </div> </div> <div class="foot"> Capyrigh1@2022 taiyua1.ca1杭州出版社 </div> </div></body></html>

学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光 —————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识





在这里插入图片描述


关键词:本地,杭州,作品,设计,布局,静态,家乡,模板

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭