web期末作业设计网页：旅游网站设计——北海银滩(12页) HTML+CSS 学生DW网页设计作业成品网页设计作业 web网页设计与开发 html实训大作业

最新推荐文章于 2024-06-02 21:13:12 发布

深巷积木青春

最新推荐文章于 2024-06-02 21:13:12 发布

阅读量233

点赞数 6

文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_62153875/article/details/134829629

版权

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。

作品目录

一、📚网站介绍

二、🔗网站效果

🧩1.图片演示

三、💒网站代码

二、📚网站介绍

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

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

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

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

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中：
(1)📜html文件包含：其中index.html是首页、其他html为二级页面；
(2)📑 css文件包含：css全部页面样式；
(3)📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。

三、🔗网站效果

四、💒代码展示

代码说明：以下仅展示部分代码供参考~

🧱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>网站首页</title>
    <link rel="stylesheet" href="css/index.css">
    <style>

    </style>
</head>
<body>
    <div class="qb">
        <div class="header">
            <img src="./images/banner.webp" alt="">
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a href="index.html">网站首页</a>
                </li>
                <li>
                    <a href="index01.html">景致简介</a>
                </li>
                <li>
                    <a href="index02.html">主要景点</a>
                </li>
                <li>
                    <a href="index03.html">旅游信息</a>
                </li>
                <li>
                    <a href="index04.html">景区特点</a>
                </li>
                <li>
                    <a href="index05.html">地理环境</a>
                </li>
                <li>
                    <a href="index06.html">节日活动</a>
                </li>
                <li>
                    <a href="index07.html">所获荣誉</a>
                </li>
                <li>
                    <a href="index08.html">景点特色</a>
                </li>
                <li>
                    <a href="index09.html">发展规划</a>
                </li>
                <li>
                    <a href="index10.html">在线登陆</a>
                </li>
                <li>
                    <a href="index11.html">在线注册</a>
                </li>
            </ul>
        </div>
        <div class="qb_1">
            <h1>北海银滩</h1>
            <h4>中国4A级旅游景区</h4>
            <p>北海银滩是北海市的著名的旅游景点，位于广西壮族自治区北海市银海区，占地面积约38平方公里。西起冠头岭，东至大冠沙，由西区、东区和海域沙滩区组成，东西绵延约24公里，海滩宽度在30--3000米之间，陆地面积12平方公里，总面积约38平方公里。北海银滩面积超过大连、烟台、青岛、厦门和北戴河海滨浴场沙滩的总和，而平均坡度仅为0.05。沙滩均由高品位的石英砂堆积而成，在阳光的照射下，洁白、细腻的沙滩会泛出银光，故称银滩，北海银滩以其“滩长平、沙细白、水温净、浪柔软、无鲨鱼”等特点，而被称为“天下第一滩”。广西则以“北有桂林山水，南有北海银滩”而自豪。北海银滩度假区内的海域海水纯净，陆岸植被丰富，环境优雅宁静，空气格外清新，可容纳国际上最大规模的沙滩运动娱乐项目和海上运动娱乐项目，是中国南方最理想的滨海浴场和海上运动场所。1997年1月4日，杨尚昆在北海银滩挥毫写下“天下第一滩”。在2012年7月2日，第一届“中国十大最美海滩”网络评选中，北海银滩位列第三名。</p>
            <div class="wq">
                <img src="./images/banner1.jpg" alt="">
            </div>
        </div>
        <div class="qb_2">
            <h1>景致简介</h1>
            <p>北海位于广西壮族自治区南端，北部湾东北岸，合浦作为“古代海上丝绸之路”的重要始发港，这里也是国家历史文化名城、广西北部湾经济区重要组成城市。如今，北海的旅游业已经十分成熟，坐拥银滩、北海老街、星岛湖、山口红树林自然保护区等多个旅游景点。</p>
            <p>北海银滩是北海市的著名旅游景点，其面积超过大连、烟台、青岛、厦门和北戴河海滨浴场沙滩的总和，而平均坡度仅为0.05。</p>
            <p>沙滩均由高品位的石英砂堆积而成，在阳光的照射下，洁白、细腻的沙滩会泛出银光，故称银滩，北海银滩以其“滩长平、沙细白、水温净、浪柔软、无鲨鱼”等特点，因此，这里也被人们称为“天下第一滩”。</p>
            <p>广西则以“北有桂林山水，南有北海银滩”而自豪。北海银滩度假区内的海域海水纯净，陆岸植被丰富，环境优雅宁静，空气格外清新，可容纳国际上大规模的沙滩运动娱乐项目和海上运动娱乐项目，是中国南方理想的滨海浴场和海上运动场所。</p>
            <ul>
                <li>
                    <img src="./images/jj1.jpg" alt="">
                </li>
                <li>
                    <img src="./images/jj2.jpg" alt="">
                </li>
                <li>
                    <img src="./images/jj3.jpg" alt="">
                </li>
                <li>
                    <img src="./images/jj4.jpg" alt="">
                </li>
            </ul>
        </div>
        <div class="qb_3">
            <h1>主要景点</h1>
            <ul>
                <li>
                    <img src="./images/jd1.jpg" alt="">
                    <p>银滩公园</p>
                </li>
                <li>
                    <img src="./images/jd2.jpg" alt="">
                    <p>海滩公园</p>
                </li>
                <li>
                    <img src="./images/jd3.jpg" alt="">
                    <p>情人岛公园</p>
                </li>
                <li>
                    <img src="./images/jd4.jpg" alt="">
                    <p>银滩乐园</p>
                </li>
            </ul>
        </div>
        <div class="qb_4">
            <h1>旅游信息</h1>
            <h4>价格信息</h4>
            <p style="margin: 10px 0;">北海银滩门票免费</p>
            <h4>交通信息</h4>
            <p style="margin: 10px 0;">3路车（海滨公园—银滩）</p>
        </div>
        <div class="qb_5">
            <h1>景区特点</h1>
            <p>在银滩长达七八个月的诱人泳季，在蓝天白云下沐浴着灿烂的阳光，在洁白的沙滩上游玩嬉戏，在轻柔的波浪中尽情畅游，在微腥阵阵的海风中冥想；乘海上降落伞翱翔蓝天，驾惊险刺激的摩托艇乘风破浪，还有悠闲轻松的沙滩运动，愉情悦性的鸟类表演，赏心悦目的异国风情歌舞，极目天涯，海天相连，渔帆点点。</p>
        </div>
        <div class="qb_6">
            <h1>精彩风景</h1>
            <video src="./video/1.mp4" class="my-video" controls poster="./images/banner2.jpg"></video>
        </div>
        <div class="bj">
            <img src="./images/banner1.jpg" alt="">
        </div>
        <div class="footer">
            <span>深巷积木青春 © 版权所有</span>
        </div>
    </div>
</body>
</html>

🏠CSS样式部分代码

* {
    margin: 0;
    padding: 0;
}
.qb {
    width: 1200px;
    margin: 0 auto;
    background-color: rgb(235, 248, 255);
}
.header {
    width: 100%;
    height: 438px;
}
.header img {
    float: left;
    width: 100%;
}
.nav {
    width: 100%;
    height: 60px;
}
.nav ul {
    padding: 0;
    margin: 0;
}
.nav ul li {
    float: left;
    list-style: none;
    width: 100px;
    text-align: center;
    line-height: 60px;
    height: 60px;
    background-color: rgb(0, 183, 255);
}
.nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}
.qb_1 {
    padding: 30px;
}
.wq {
    text-align: center;
}
.wq img {
    width: 70%;
    margin-top: 20px;
}
h1 {
    color:  rgb(0, 183, 255);
    font-weight: 500;
    font-size: 36px;
    margin-bottom: 10px;
}
.qb_1 h4 {
    color: #626675;
    margin-bottom: 20px;
}
.qb_1 p {
    line-height: 30px;
    text-indent: 2em;
}
.qb_2 {
    padding: 0 30px;
}
.qb_2 p {
    line-height: 30px;
    text-indent: 2em;
}
.qb_2 ul {
    width: 100%;
    height: 180px;
    padding: 0;
    margin: 0;
    margin-top: 20px;
}
.qb_2 ul li {
    float: left;
    list-style: none;
    width: 273px;
    height: 180px;
    margin-right: 16px;
    text-align: center;
}
.qb_2 ul li:last-child {
    margin-right: 0;
}
.qb_2 ul li img {
    width: 100%;
    height: 100%;
}
.qb_3 {
    width: 100%;
    height: 250px;
    padding: 30px;
}
.qb_3 ul {
    width: 100%;
    /* height: 180px; */
    padding: 0;
    margin: 0;
    margin-top: 20px;
}
.qb_3 ul li {
    float: left;
    list-style: none;
    width: 273px;
    /* height: 180px; */
    margin-right: 16px;
    text-align: center;
}
.qb_3 ul li:last-child {
    margin-right: 0;
}
.qb_3 ul li img {
    width: 100%;
    height: 183px;
}
.qb_3 p{
    margin: 5px 0;
}
.qb_4 {
    padding: 30px;
}
.qb_5 {
    padding: 30px;
}
.qb_5 p {
    line-height: 30px;
}
.qb_6 {
    padding: 30px;
}
.qb_6 video {
    width: 100%;
    height: 640px;
    margin-top: 20px;
}
.my-video {
    width: 100%;
    object-fit: cover;
}
.bj {
    padding: 0 30px 30px 30px;
}
.bj img {
    width: 100%;
}
.footer {
    width: 100%;
    height: 50px;
    color: white;
    line-height: 50px;
    text-align: center;
    background-color: rgb(0, 183, 255);
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习🔥

深巷积木青春

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
web期末作业设计网页：旅游网站设计——北海银滩(12页) HTML+CSS 学生DW网页设计作业成品网页设计作业 web网页设计与开发 html实训大作业

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
复制链接

扫一扫