【HTML+CSS】静态网页设计期末大作业——我的家乡无锡印象
@码出未来-web网页设计
于 2022-10-13 12:30:39 发布
阅读量174
收藏
1
点赞数
于 2022-10-13 12:30:39 发布
阅读量174
收藏
1
点赞数
🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式： 【💌HTML七夕情人节表白网页制作 (110套) 】
📂文章目录
- 二、📚网站介绍
- 三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
- 四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
- 五、🎁更多源码
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
三、🔗网站效果
▶️1.视频演示
E87JP 无锡旅游8页含有轮播图原生js。关联旅游，家乡风景乡村。登陆注册，有视频音频
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<doctype>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/pptBox.js"></script>
<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="picture/logo.png" width="1010"></a>
</div>
<nav>
<ul>
<li><a href="">网站首页</a></li>
<li><a href="page1.html">历史沿革</a></li>
<li><a href="page2.html">地理环境</a></li>
<li><a href="page3.html">地方特产</a></li>
<li><a href="page4.html">旅游胜地</a></li>
<li><a href="page5.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="clear"></div>
<div class="lunbo">
<script>
var box = new PPTBox();
box.width = 1010; //宽度
box.height = 333; //高度
box.autoplayer = 3; //自动播放间隔时间
//box.add({"url":"图片地址","title":"悬浮标题","href":"链接地址"})
box.add({
"url": "picture/banner_1.png",
"href": "#",
"title": "1"
})
box.add({
"url": "picture/banner_2.png",
"href": "#",
"title": "2"
})
box.add({
"url": "picture/banner_3.png",
"href": "#",
"title": "3"
})
box.add({
"url": "picture/banner_4.png",
"href": "#",
"title": "3"
})
box.add({
"url": "picture/banner_5.png",
"href": "#",
"title": "3"
})
box.add({
"url": "picture/banner_6.png",
"href": "#",
"title": "3"
})
box.add({
"url": "picture/banner_7.png",
"href": "#",
"title": "3"
})
box.show();
</script>
</div>
<div class="clear"></div>
<div class="main">
<h2>家乡无锡简介</h2>
<p>无锡，简称“锡”，古称新吴、梁溪、金匮，是江苏省地级市，国务院批复确定的中国长江三角洲的中心城市之一、重要的风景旅游城市
。截至2018年，全市下辖5个区、代管2个县级市，总面积4627.47平方千米，建成区面积332.01平方千米，常住人口657.45万人，城镇人口501.50万人，城镇化率76.28%。</p>
<p> 无锡地处中国华东地区、江苏省南部、长江三角洲平原，是扬子江城市群重要组成部分，北倚长江、南滨太湖，被誉为“太湖明珠”，京杭大运河从无锡穿过；境内以平原为主，星散分布着低山、残丘；属北亚热带湿润季风气候区，四季分明，热量充足。
</p>
<p> 无锡是国家历史文化名城 ，自古就是鱼米之乡，素有布码头、钱码头、窑码头、丝都、米市之称。无锡是中国民族工业和乡镇工业的摇篮，是苏南模式的发祥地，也是联勤保障部队无锡联勤保障中心驻地
。无锡有鼋头渚、灵山大佛、无锡中视影视基地等景点。</p>
<p> 2017年11月，复查确认继续保留全国文明城市荣誉称号。
2018年12月，被评为2018中国大陆最佳地级城市第3名，2018中国创新力最强的30个城市之一，2018中国最佳旅游目的地城市第17名。2019年8月，中国海关总署主办的《中国海关》杂志公布了2018年“中国外贸百强城市”排名，无锡排名第11。2019年，无锡市地区生产总值为11852.32亿元，增长6.7%。分产业看，第一产业增加值122.50亿元，下降2.4%；第二产业增加值5627.88亿元，增长7.6%；第三产业增加值6101.94亿元，增长6.0%。
</p>
<p></p>
<p></p>
<p></p>
<h2>风景欣赏</h2>
<div class="main_list">
<ul>
<li>
<a href="#"><img class="img2" src="picture/p1.png"></a>
</li>
<li>
<a href="#"><img class="img2" src="picture/p2.png"></a>
</li>
<li>
<a href="#"><img class="img2" src="picture/p3.png"></a>
</li>
<li>
<a href="#"><img class="img2" src="picture/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样式代码
*{ 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:url(../image/bj.jpg) 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:#999595;}
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
867
优质web前端领域创作者
到【灌水乐园】发言
π女孩: 想问一下店面展示页面，搜获功能能用吗？还是只有一个样式？
window722: 源码怎么获得
2401_84830839: 压缩包和图片，求
HTML项目: 看看我的，楼主优先
碳烤小瘦羊: 请问有vision studio开发的网页吗？