html+css+js 三亚旅游网页设计与制作实例(6个页面)

最新推荐文章于 2024-10-20 18:03:05 发布

mon_star°

最新推荐文章于 2024-10-20 18:03:05 发布

阅读量417

点赞数 1

文章标签： html css javascript 网页设计与制作旅游网站课程设计大作业

本文链接： https://blog.csdn.net/qq_29528701/article/details/134851487

版权

一、作品介绍

HTML+CSS+JS网页设计与制作，三亚旅游网页设计与制作实例，本实例适合于初学HTML+CSS+JS的同学。该案例里面有div+css的样式布局设置，这个实例比较全面，有一级页、二级页、详情页、输入表单等，共6个页面。本文将介绍如何通过从零开始设计旅游网站，并将其转换为代码的过程来实现设计与制作。（网页设计与制作分享。源码分享。）

1.网页作品简介方面：蓝色简约风格，底部深色，div+css布局。主要有：首页、关于我们、精选路线、详情页、旅游攻略、联系我们等总共6个页面html下载。

2.网页作品编辑方面：此作品为旅游网页设计题材，代码为 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、Vscode 、Sublime 所有编辑器均可使用）

3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，图片居中布局，文本描述对齐方式设置了左对齐。

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果等。首页制作了留言表单。

二、作品效果

视频演示：

html+css+js 三亚旅游网页设计与制作实例(6个页面

截图演示：

首页

精选路线

详情页

旅游攻略

关于我们

联系我们

三、作品代码

文件目录：

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>

也适用于：大学生网页作业制作 (HTML+CSS)、大学生HTML期末大作业、web前端期末大作业、web课程设计网页规划与设计、旅游网页设计作业成品、HTML+CSS+JS网页设计期末课程大作业等。

css样式：