【HTML+CSS】静态网页设计期末大作业——我的家乡无锡印象_一、制作网页“无锡印象” html-CSDN博客

本文链接：https://blog.csdn.net/ruan365392777/article/details/127026481

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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;}