我的家乡主题网页设计

最新推荐文章于 2023-11-07 22:33:07 发布

clearAutumn

最新推荐文章于 2023-11-07 22:33:07 发布

阅读量1.6w

点赞数 26

本文链接：https://blog.csdn.net/m0_58152036/article/details/118015258

版权

这个网页是期末考核作业，介绍了我的家乡-广西南宁，我只用了html+css+javascript实现。

图片来自站酷、百度百科、小红书，如果图片侵权，请联系我删除！

由于我的电脑比较小，13.3存，因此显示设置了150%。

文件夹的内容如下：

总结文档记录了我在制作网页过程中遇到的问题还有一些属性设置的方法（不常用会忘记）。

首页

首页这里只制作了轮播图，不过它更像幻灯片，不能控制左右，设置了定时器，每两秒播放一张图。

因为轮播图的javascript代码较少，我就把它和index.html写在了一起。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/subMenu.js"></script>
    <!-- 轮播图制作 -->
    <script type="text/javascript">
        var index = 0;
        //改变图片
        function ChangeImg() {
            index++;
            var a = document.getElementsByClassName("img-slide");
            if (index >= a.length) index = 0;
            for (var i = 0; i < a.length; i++) {
                a[i].style.display = 'none';
            }
            a[index].style.display = 'block';
        }
        //设置定时器，每隔两秒切换一张图片
        setInterval(ChangeImg, 2000);
    </script>
</head>

<body>
    <img class="h_nav" src="images/h_nav.jpg" alt="">
    <!-- 开始制作头部区域 -->
    <div class="header w">
        <!-- 导航栏模块 -->
        <div class="nav">
            <div id="container">
                <ul>
                    <li class="menu"><a href="index.html" style="color: #00a4ff;">首页</a></li>
                    <li class="menu"><a href="history.html">南宁历史</a></li>
                    <li class="menu"><a href="#">南宁方言</a>
                        <ul class="subMenu">
                            <li>
                                <a href="vernacular.html">白话</a>
                            </li>
                            <li>
                                <a href="zhuang.html">壮话</a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu"><a href="rite.html">南宁民俗</a></li>
                    <li class="menu"><a href="food.html">南宁美食</a></li>
                    <li class="menu"><a href="build.html">南宁建筑</a></li>
                </ul>
            </div>
        </div>
        <!-- 用户模块 -->
        <div class="user">
            <img src="images/user.png" alt="">LMQ
        </div>
    </div>
    <!-- 轮播图制作 -->
    <div class="imgBox">
        <img class="img-slide img1" src="images/h01.jpg" alt="1">
        <img class="img-slide img2" src="images/h02.jpg" alt="2">
        <img class="img-slide img3" src="images/h03.jpg" alt="3">
        <img class="img-slide img3" src="images/h04.jpg" alt="4">
        <img class="img-slide img3" src="images/h05.jpg" alt="5">
        <img class="img-slide img3" src="images/h06.jpg" alt="6">
        </diiv>
</body>

</html>