HTML+CSS+JavaScript网页设计与制作实例 -三亚旅游网页（6个页面）

本文链接：https://blog.csdn.net/WebDesign_Mu/article/details/144096795

一、网站描述

“三亚旅游” 网页是一个以三亚旅游为主题的静态网站，通过 HTML、CSS 和 JavaScript 技术实现。Div+CSS、鼠标滑过特效、Table、导航栏效果、表单、二级页面等元素，基本期末作业所需的知识点全覆盖。作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。

二、作品介绍

采用HTML、CSS和JavaScript技术构建了一个关于三亚旅游的静态网页平台。整个网站设计简洁大方，色彩搭配和谐，注重用户体验，通过直观的导航结构和丰富的内容展示，让用户能够快速获取所需信息。网站共包含六个主要页面：首页、精选路线、旅游攻略、关于我们、详情页和联系我们。

首页：展示三亚的美丽风景图片和热门旅游景点推荐，引导用户快速了解三亚的魅力。提供导航栏，方便用户快速切换到其他页面。
精选路线页面：展示不同的三亚旅游路线，包括海滨度假、文化探索、美食之旅等。每条路线都有详细的介绍和图片展示，帮助用户选择适合自己的旅游路线。
旅游攻略页面：提供三亚旅游的实用攻略，包括交通指南、住宿推荐、美食介绍、景点攻略等。帮助用户更好地了解三亚，为旅行做好充分准备。
关于我们页面：介绍网站的创建目的、团队成员和联系方式等信息，让用户更好地了解网站的背景和宗旨。
详情页：针对特定的旅游景点、酒店或活动进行详细介绍，包括图片、文字描述、价格信息等。帮助用户深入了解感兴趣的旅游产品。
联系我们页面：提供联系方式，方便用户与网站管理员进行沟通和交流。用户可以通过填写表单提交问题、建议或反馈。

三、设计说明

色彩搭配：采用了与三亚海洋和热带风情相关的色彩，如蓝色代表海洋、绿色代表热带植物、黄色代表阳光等。整体色彩搭配清新自然，给人以舒适的视觉感受。
布局设计：采用了简洁明了的布局，各个页面的内容分布合理，易于用户浏览和阅读。导航栏位于页面顶部，方便用户快速切换不同的页面。页面主体部分采用了分栏布局，将文字和图片分别展示，增强了页面的可读性和美观性。
图片选择：选择了高质量的三亚风景图片和旅游景点图片，展示三亚的美丽自然风光和丰富的旅游资源。图片经过精心处理，大小适中，不会影响页面的加载速度。
文字排版：采用了清晰易读的字体，文字大小适中，颜色与背景搭配协调。段落之间的间距合理，增强了页面的可读性。

四、DIV+CSS 布局

结构清晰：使用 DIV 标签将页面划分为不同的区域，如头部、导航栏、主体内容、底部等。每个区域都有明确的职责和功能，使得页面结构更加清晰。
样式分离：使用 CSS 样式表对页面进行美化和布局。将样式与内容分离，使得页面的维护更加方便。可以通过修改 CSS 样式表来改变整个网站的外观和布局，而不需要修改每个页面的 HTML 代码。

五、页面结构

头部：包含网站的 logo、导航栏和搜索框等元素。
主体内容：根据不同的页面展示不同的内容，如首页的风景图片和景点推荐、精选路线页面的旅游路线介绍、旅游攻略页面的实用攻略等。
底部：包含版权信息、联系方式和友情链接等元素。

六、网页作品技术

HTML：用于构建网页的结构和内容。
CSS：用于美化网页的外观和布局。
JavaScript：用于实现网页的交互效果和动态功能。例如，在首页可以使用 JavaScript 实现图片轮播效果，在旅游攻略页面可以使用 JavaScript 实现页面的滚动加载效果。
图片处理：使用图片处理软件对图片进行优化和处理，以提高图片的质量和加载速度。

七、作品演示

动态演示

八、代码目录

九、代码演示

首页html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <!-- logo -->
        <img src="./images/logo.png" class="logo" alt="" />
        <!-- 导航栏 -->
        <div class="nav">
            <ul>
                <li>
                    <a class="active" href="./index.html" target="_self">
                        <span title="首页">首页</span>
                    </a>
                </li>
                <li>
                    <a href="./routes.html" target="_self">
                        <span title="精选路线">精选路线</span>
                    </a>
                </li>
                <li>
                    <a href="./strategy.html" target="_self">
                        <span title="旅游攻略">旅游攻略</span>
                    </a>
                </li>
                <li>
                    <a href="./about.html" target="_self">
                        <span title="关于我们">关于我们</span>
                    </a>
                </li>
                <li>
                    <a href="./contact.html" target="_self">
                        <span title="联系我们">联系我们</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 主内容 -->
    <div class="main-content">
        <div class="banner">
            <img src="./images/banner.jpg" alt="" />
        </div>
        <div class="project-content">
            <p class="content-title">路线推荐</p>
            <div class="detail-content">
                <div class="detail-pic">
                    <img src="./images/tj.jpeg" alt="" />
                </div>
                <div class="detail-desc">
                    <p>大东海旅游区是三亚最早被开发的热带滨海度假区，也是离市区最近的海湾。</p>
                    <p>主要集中在海滩边一小片区域内，住宿价格比亚龙湾便宜不少。这里消费适中，夜晚也较为热闹。
                        </p>
                    <p>沙滩和海水质量比亚龙湾逊色，但比三亚湾要好很多，能见度很高，来这里晒日光浴的人较多。</p>
                    <p>公共游泳区域可以租赁救生圈、遮阳伞、躺椅等设施，冲淡水和柜子租赁单独收费。</p>
                    <p>门票：免费，园区全天开放，项目营业时间8:00-17:00。</p>
                    <p>开放时间：全天 (1月1日~12月31日 周一~周日)。</p>
                    <p>景点位置：海南省三亚市吉阳区榆亚大道(三亚海天大酒店旁)。</p>
                    <p>交通：可搭乘微4路公交车至东海龙宫(公交站)、珠江花园停车场(公交站)、银泰大酒店(公交站)下车，步行均可达。</p>
                </div>
            </div>
            <p class="content-title">精选路线</p>
            <div class="content-list">
                <ul>
                    <li>
                        <a href="./detail.html" target="_self">
                            <div class="cover-pic">
                                <img src="./images/lx2.jpeg" alt="" />
                            </div>
                            <p class="title">分界洲岛</p>
                        </a>
                    </li>
                    <li>
                        <a href="./detail.html" target="_self">
                            <div class="cover-pic">
                                <img src="./images/lx3.jpeg" alt="" />
                            </div>
                            <p class="title">亚龙湾</p>
                        </a>
                    </li>
                    <li>
                        <a href="./detail.html" target="_self">
                            <div class="cover-pic">
                                <img src="./images/lx4.jpeg" alt="" />
                            </div>
                            <p class="title">三亚千古情景区</p>
                        </a>
                    </li>
                    <li>
                        <a href="./detail.html" target="_self">
                            <div class="cover-pic">
                                <img src="./images/lx5.jpeg" alt="" />
                            </div>
                            <p class="title">椰梦长廊</p>
                        </a>
                    </li>
                    <li>
                        <a href="./detail.html" target="_self">
                            <div class="cover-pic">
                                <img src="./images/lx6.jpeg" alt="" />
                            </div>
                            <p class="title">鹿回头风景区</p>
                        </a>
                    </li>
                    <li>
                        <a href="./detail.html" target="_self">
                            <div class="cover-pic">
                                <img src="./images/lx7.jpeg" alt="" />
                            </div>
                            <p class="title">三亚湾</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <div class="contact-container">
            <div class="contact-title">
                <p>联系</p>
                <p>Contact</p>
            </div>
            <div class="contact-content">
                <p class="c-name">木番薯科技</p>
                <div class="c-addr">
                    <p>地 点：广州市天河区花城大道666号</p>
                    <p>邮编：510000</p>
                </div>
                <div class="c-addr">
                    <p>公众号名称：木番薯科技</p>
                    <p>公众号号码：mengchatchat91</p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

首页css

/* 头部样式 */
.header {
    background-color: #3785ff;
    overflow: hidden;
    padding: 0 0 0 50px;
}

.header .logo {
    width: 120px;
    float: left;
    padding-top: 5px;
}

.header .nav {
    overflow: hidden;
    float: right;
}

.header .nav ul {
    overflow: hidden;
    float: right;
}

.header .nav ul li {
    float: left;
}

.header .nav ul li a {
    font-size: 14px;
    color: #eee;
    display: block;
    line-height: 3.7;
    width: 150px;
    text-align: center;
}

.header .nav ul li a:hover, .header .nav ul li a.active {
    color: #fff;
    background-color: #186cf3;
}

/* 主内容样式 */
.main-content .banner img {
    width: 100%;
}

.main-content .project-content {
    width: 1185px;
    margin: 0 auto 50px;
    padding-left: 14px;
}
.main-content .project-content .content-title {
    font-size: 24px;
    color: #444;
    text-align: center;
    padding-top: 80px;
    padding-bottom: 40px;
}

.main-content .detail-content {
    padding: 0 0 20px;
    overflow: hidden;
}
.main-content .detail-content .detail-pic {
    text-align: center;
    margin-bottom: 10px;
    float: left;
    width: 550px;
}
.main-content .detail-content .detail-pic img {
    width: 100%;
    display: inline-block;
}
.main-content .detail-content .detail-desc {
    float: left;
    width: 550px;
    padding: 10px 30px;
}
.main-content .detail-content p {
    line-height: 24px;
    font-size: 13px;
    color: #6a6a6a;
    margin-bottom: 10px;
}

.main-content .project-content .content-list ul {
    overflow: hidden;
}

.main-content .project-content .content-list ul li {
    float: left;
    width: 380px;
    margin-bottom: 25px;
    height: 270px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.main-content .project-content .content-list ul li:not(:last-child) {
    margin-right: 15px;
}

.main-content .project-content .content-list ul li .cover-pic img {
    width: 100%;
}
.main-content .project-content .content-list ul li .title {
    font-size: 15px;
    color: #666;
    height: 24px;
    line-height: 24px;
    padding: 15px 30px 0px 10px;
    text-align: center;
}
.main-content .project-content .content-list ul li .sub-title {
    font-size: 12px;
    color: #b7b7b7;
    height: 20px;
    line-height: 24px;
    overflow: hidden;
    padding: 0px 10px;
}

/* 底部样式 */
.footer {
    background-color: #333;
}
.contact-container {
    width: 1000px;
    margin: 0 auto;
    padding: 80px 30px 68px;
    overflow: hidden;
}
.footer .contact-title {
    float: left;
    width: 300px;
}
.footer .contact-title p:first-child {
    color: #f1f1f1;
    font-size: 24px;
    margin-bottom: 5px;
}
.footer .contact-title p:last-child {
    color: #c1c1c1;
    font-size: 16px;
}
.footer .contact-content {
    float: left;
    overflow: hidden;
}
.footer .contact-content .c-name {
    font-size: 16px;
    color: #f1f1f1;
    line-height: 24px;
    margin-bottom: 25px;
    font-weight: 100;
}
.footer .contact-content .c-addr {
    float: left;
}
.footer .contact-content .c-addr p {
    padding-right: 60px;
    margin-top: 14px;
    height: auto;
    color: #eee;
    font-size: 12px;
}