一、👨🎓网站题目
旅游，当地特色，历史文化，特色小吃等网站的设计与制作。
二、✍️网站描述
- 株洲旅游主题的网页 一共八个页面
- 旅游网页使用html css js制作 有banana图
- 页面可以相互跳转 包含表单 三级页面
- 网页可以使用vscode hbuilder dw等打开修改
- 里面的图片和文字都可以替换为其他旅游网页
- 岳阳旅游网页介绍了历史革命 地方特产 关于我们等
- html静态网页 没有复杂效果 布局简单 原创html网页设计 适合当作业使用
👨🎓静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计👩🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
四、🌐网站效果
五、🪓 代码实现
🧱HTML
<doctype>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet">
<title>湖南株洲</title>
</head>
<body>
<embed src="file/m.mp3" width="0" height="0">
<div class="con">
<div style="position: fixed; top: 0px;right: 0px; font-size: 30px;"> </div>
<header>
<div class="logo">
<a href=""><img src="img/logo.png" width="1010" height="300"></a>
</div>
<nav>
<ul>
<li><a href="">网站首页</a></li>
<li><a href="lishi.html">历史沿革</a></li>
<li><a href="dili.html">地理环境</a></li>
<li><a href="tese.html">地方特产</a></li>
<li><a href="lvyou.html">旅游胜地</a></li>
<li><a href="guanyu.html">关于我们</a></li>
<li><a href="log.html">登录</a></li>
<li><a href="reg.html">注册</a></li>
</ul>
</nav>
<div class="clear"></div>
</header>
<div class="main">
<h2>家乡株洲简介</h2>
株洲，古称“建宁”，湖南省辖地级市，长株潭城市群核心城市、长江中游城市群城市之一。株洲位于湖南东部、湘江下游，东接江西省莲花县、永新县及井冈山市，南连衡阳和郴州，西接湘潭，北与长沙毗邻。地处罗霄山脉西麓，生态环境优美，截至2021年，辖三县一市五区，总面积1.1万平方公里，常住人口387.11万人（2022年末）。
</br>先后获得“全国绿化城市”、“全国城市环境综合整治优秀城市”、“全国造林绿化十佳城市”等荣誉称号。矿产资源丰富，水资源丰富。文化古迹众多，省级历史文化名城1处，名镇1处，名村1处。[3] 2022年全市实现GDP3616.8亿元。
</br>截至2022年末，全市有普通高校9所，国家级企业重点实验室5个，省级企业重点实验室20个。全市有卫生机构3002个，其中医院109个，妇幼保健院（所、站）10个，专科疾病防治院（所、站）2个，社区卫生服务中心41个，诊所、卫生所、医务室1017个，村卫生室1609个，疾病预防控制中心（防疫站）10个，卫生监督所（中心）9个，乡镇卫生院103个。
</br>因华夏始祖炎帝常活动于此，尝百草，开医学之先河，被称为“炎帝圣地”。后有湖湘文化，成就了株洲人“心忧天下、
百折不挠、敢为人先、兼容并蓄”的精神风貌。
素有滋养的文化沃土，拥有花鼓戏《生死牌》，歌剧《江姐》等艺术剧目。活跃的文旅产业，涌现出茶祖文化产业园、醴陵•世界陶瓷艺术城、汽车博览园等一批大型文化产业基地。珍贵的历史遗存，全国重点文物保护单位16处、省级文物保护单位70处，省级历史文化名城名镇名村各1处，国家级非物质文化遗产项目2个、省级非遗项目19个。
<div class="main_list">
<ul>
<li>
<a href="#"><img class="img2" src="img/p1.png"></a>
</li>
<li>
<a href="#"><img class="img2" src="img/p2.png"></a>
</li>
<li>
<a href="#"><img class="img2" src="img/p3.png"></a>
</li>
<li>
<a href="#"><img class="img2" src="img/p4.png"></a>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
<footer>
<p id="xx"></p>
</footer>
<div class="clear"></div>
</div>
</body>
</html>
<script>
var xx = document.getElementById('xx')
xx.innerHTML=itime()
setInterval(function(){
xx.innerHTML=itime()
},1000)
function itime() {
var date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.date = date.getDate();
this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];
this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
var currentTime = + this.year + "年" + this.month + "月" + this.date + "日 " + this.hour + ":" + this.minute + ":" + this.second + " " + this.day;
return(currentTime)
}
</script></doctype>
💒CSS样式代码
body {
font-family: Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.login {
width: 930px;
color: #000;
padding: 40px;
box-shadow: 10px 10px 25px #000000;
text-align: center;
}
.login input {
display: block;
margin: 20px auto;
text-align: center;
background: none;
padding: 12px;
font-size: 15px;
border-radius: 22px;
outline: none;
color: #000;
}
.login input[type="text"],
.login input[type="password"] {
border: 2px solid #3498db;
width: 220px;
}
.login input[type="submit"] {
width：150px;
border: 2px solid #2ecc71;
cursor: pointer;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus {
border-color: #2ecc71;
width: 250px;
translate: 0.5s;
}
.login input[type="submit"]:hover {
background-color: #2ecc71;
translate: 0.5s;
}
*{ margin:0; padding:0; font-family:Microsoft YaHei;}
.clear{ clear:both;}
.fl{ float:left;}
.fr{ float:right;}
img{ border:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
li{ list-style-type:none;}
.center{ text-align:center;}
.p10{ padding:10px;}
.p20{ padding:20px;}
img{-moz-border-radius:15px;border-radius:15px; }
.img2 {transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; }
.img2:hover {transform: scale(1.1); -webkit-transform: scale(1.1);-moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); }
body{ background-image:url(../img/bg.png); top center fixed no-repeat;}
/*----------------------con-------------------------*/
.con{ width:1024px; padding:20px; height:auto; margin:10px auto; background:#fff;background-color:rgba(255,255,255,0.85);-moz-border-radius:15px;border-radius:15px;}
/*----------------head-----------------*/
header{ width:1024px; height:auto; margin:auto;}
.logo{ width:1010px; height:auto; margin:10px auto;}
nav{ width:1010px; height:40px; margin:20px auto; border-top:1px dotted #611111; border-bottom:1px dotted #611111; }
nav ul{ }
nav li{ float:left; padding:5px 28px; text-align:center; }
nav li a{ font-size:18px; line-height:30px; color:#611111;}
nav li a:hover{ color:#611111; text-decoration:none;}
nav li:hover{}
nav li:hover a{ color:#a11a1a;}
.banner{ width:1010px; height:auto; margin:5px auto;}
.mainbox{ overflow:hidden; position:relative;}
.flashbox{ overflow:hidden; position:relative;}
.imagebox{ text-align:right;position:relative;}
.bitdiv{display:inline-block;width:12px;height:12px;margin:0 10px 10px 0px;cursor:pointer;float:right;}
.defimg{background-image:url(../image/02.png)}
.curimg{background-image:url(../image/01.png)}
/*----------------main-----------------*/
.main{ width:1000px; height:auto; margin:10px auto; font-size:14px; line-height:24px; color:#555;}
.main h2{ font-size:22px; line-height:40px; margin:10px auto;color:#611111;font-weight:normal; text-align:center; border-bottom:1px dotted #611111; font-family:楷体;}
.main h3{ font-size:16px; line-height:32px;color:#611111; text-align:left; }
.main p{ font-size:14px; line-height:26px;color:#666; text-align:left; }
.main p strong{ font-size:16px; line-height:32px;color:#611111; text-align:left; }
.main_list{ width:960px; height:auto; margin:30px auto; }
.main_list li{ width:210px;height:180px; float:left; margin:15px; }
.main_list li p{ text-align:center;}
.main_list li p a{font-size:18px; line-height:40px; color:#111; text-align:center;}
.main_list li p a:hover{ color:#611111;}
.main_list li:hover{}
.main_list li img{ width:211px; height:137px; }
/*----------------love-----------------*/
.love_in{ width:980px; height:auto; margin:10px auto;}
.love_in_l{ width:400px; height:auto; float:left; margin:10px;}
.love_in_r{ width:520px; height:auto; float:right; margin:10px;font-size:14px; line-height:26px; color:#111; }
/*----------------foot-----------------*/
footer{ width:1010px; height:auto; margin:10px auto; border-top:1px dotted #ccc; padding-top:10px; text-align:center; font-size:12px; line-height:24px; color:#
六、🥇 如何让学习不再盲目
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥源代码：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
