【网页制作html】第003篇-html网页制作 [家乡主题-河南开封]

页面分为页头、菜单导航栏、中间内容板块、页脚四大部分。
页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，菜单链接都能跳转。
要有JS效果，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
页面清爽、美观、大方，不雷同。。
不仅要能够把要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaer、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字图片等；

四、🌐网站演示

完整效果：

目录结构

1、首页

2、开封游玩

3、开封美食

4、开封历史

5、留言

五、⚙️ 网站代码

🧱HTML结构代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>首页</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/index.css">
    
</head>

<body>
    <div class="total">
        <div class="totalbox">
            <div class="nav">
                <div class="logo"></div>
                <div class="home_name">河南开封</div>
                <ul>
                    <a href="index.html">
                        <li class="active">首页</li>
                    </a>
                    <a href="sub1.html">
                        <li>开封游玩</li>
                    </a>
                    <a href="sub2.html">
                        <li>开封美食</li>
                    </a>
                    <a href="sub4.html">
                        <li>开封历史</li>
                    </a>
                    <a href="sub3.html">
                        <li>留言</li>
                    </a>
                </ul>
            </div>
        </div>
        <div class="banner" id="banner">
            <ul id="img-list">
                <li><img width="1900px" height="400px" src="images/banner1.png" alt="1" /></li>
                <li><img width="1900px" height="400px" src="images/banner2.png" alt="2" /></li>
                <li><img width="1900px" height="400px" src="images/banner3.png" alt="3" /></li>
            </ul>
            <div id="list">
                <span index="1" class="on"></span>
                <span index="2"></span>
                <span index="3"></span>
            </div>
        </div>
        
        <div class="main">
            <div class="main_text">
                <div class="main_part">
                    <div class="text1">
                        <h2>河南-开封</h2>
                        <p>xxx</p>
                        <p>xxx</p>
                    </div>
                    <div class="parts">
                        <div class="part"><img width="160" height="160" src="images/img_001.jpg" alt=""></div>
                        <div class="part"><img width="160" height="160" src="images/img_002.jpg" alt=""></div>
                        <div class="part"><img width="160" height="160" src="images/img_004.jpg" alt=""></div>
                        <div class="part"><img width="160" height="160" src="images/img_003.jpg" alt=""></div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    <div class="footer">河南开封 2024年制作</div>
</body>

</html>
<script src="js/lunbo.js"></script>