【网页制作html】第001篇-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、风土人情

6、留言

五、⚙️ 网站代码

🧱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="nacv">
            <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="sub3.html">
                    <li>历史文化</li>
                </a>
                <a href="sub4.html">
                    <li>风土人情</li>
                </a>
                <a href="sub5.html">
                    <li>留言</li>
                </a>
            </ul>
        </div>
        <div class="line"></div>
        <div class="banner"></div>
        <div class="main">
            <div class="main_text">
                <h2>关于南京</h2>
                <p>
                    南京，简称“宁”，古称金陵、建康，...
                </p>
            </div>
            <img src="images/img_001.png" alt="">
        </div>

    </div>
    <div class="footer">家乡南京</div>
</body>

</html>