html5网页制作代码大学生网页制作作业代码 (旅游网站官网滚动模板)

最新推荐文章于 2024-06-27 11:37:00 发布

web网站建设

最新推荐文章于 2024-06-27 11:37:00 发布

阅读量1.9k

点赞数 5

分类专栏：网页设计与制作文章标签： html网页模版学生网页作业网页设计与制作 web期末大作业网站建设

本文链接：https://blog.csdn.net/qq_38512571/article/details/127237971

版权

网页设计与制作专栏收录该内容

1187 篇文章 97 订阅

订阅专栏

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

二、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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代码）。

三、🔗网站效果

▶️1.视频演示

E02 旅游网站官网-滚动模板

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱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="./style.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <div id="menu-bar" class="fas fa-bars"></div>
        <a href="#" class="logo"><span>J</span>acky</a>
        <nav class="navbar">
            <a href="#home">首页</a>
            <a href="#book">预定</a>
            <a href="#packages">套餐</a>
            <a href="#services">服务</a>
            <a href="#gallery">相册</a>
            <a href="#review">评价</a>
            <a href="#contact">联系我们</a>  
          
        </nav>
        <!-- 图标 -->
        <div class="icons">
            <i class="fas fa-search" id="search-btn"></i>
            <i class="fas fa-user" id="login-btn"></i>
        </div>
        <!-- 搜索框 -->
        <form action="" class="search-bar-container">
            <input type="search" id="search-bar" placeholder="search here...">
            <label for="search-bar" class="fas fa-search"></label>
        </form>
    </header>
    <!-- 登录表单 -->
    <div class="login-form-container">
        <i class="fas fa-times" id="form-close"></i>
        <form action="">
            <h3>login</h3>
            <input type="email" class="box" placeholder="enter your email">
            <input type="password" class="box" placeholder="enter your password">
            <input type="submit" value="login now" class="btn">
            <input type="checkbox" id="remember">
            <label for="remember">remember me</label>
            <p>forget password? <a href="#">click here</a></p>
            <p>don't have and account? <a href="#">register now</a></p>
        </form>

                <p>这里有你梦想中的迪士尼。</p>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
                <div class="price"> $90.00 <span>$120.00</span> </div>
                <a href="#" class="btn">立即 预订</a>
            </div>
        </div>

        <div class="box">
            <img src="images/p-3.jpg" alt="">
            <div class="content">
                <h3> <i class="fas fa-map-marker-alt"></i> 广州 </h3>
                <p>两千多年沉淀，打磨出中国独树一帜的海阔天空之城。</p>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
                <div class="price"> $90.00 <span>$120.00</span> </div>
                <a href="#" class="btn">立即 预订</a>
            </div>
        </div>

        <div class="box">
            <img src="images/p-4.jpg" alt="">
            <div class="content">
                <h3> <i class="fas fa-map-marker-alt"></i> 深圳 </h3>
                <p>有钱人的天堂.创业者向往的城市。</p>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
                <div class="price"> $90.00 <span>$120.00</span> </div>
                <a href="#" class="btn">立即 预订</a>
            </div>
        </div>

        <div class="box">
            <img src="images/p-5.jpg" alt="">
            <div class="content">
                <h3> <i class="fas fa-map-marker-alt"></i> 北京 </h3>
                <p>北京你爱来不来。</p>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
                <div class="price"> $90.00 <span>$120.00</span> </div>
                <a href="#" class="btn">立即 预订</a>
            </div>
        </div>

        <div class="box">
            <img src="images/p-6.jpg" alt="">
            <div class="content">
                <h3> <i class="fas fa-map-marker-alt"></i> 武汉 </h3>
                <p style="font-size: 0.75rem;">武汉的樱花有如我和你初见时的阳光只是多了一些忧愁。</p>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
                <div class="price"> $90.00 <span>$120.00</span> </div>
                <a href="#" class="btn">立即 预订</a>
            </div>
        </div>
    </div>
</section>
<!-- 服务部分 -->
<section class="services" id="services">

    <h1 class="heading">
        <span>s</span>
        <span>e</span>
        <span>r</span>
        <span>v</span>
        <span>i</span>
        <span>c</span>
        <span>e</span>
        <span>s</span>
    </h1>

    <div class="box-container">

        <div class="box">
            <i class="fas fa-hotel"></i>
            <h3>affordable hotels</h3>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>
        <div class="box">
            <i class="fas fa-utensils"></i>
            <h3>food and drinks</h3>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>
        <div class="box">
            <i class="fas fa-bullhorn"></i>
            <h3>safty guide</h3>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>
        <div class="box">
            <i class="fas fa-globe-asia"></i>
            <h3>around the world</h3>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>
        <div class="box">
            <i class="fas fa-plane"></i>
            <h3>fastest travel</h3>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>
        <div class="box">
            <i class="fas fa-hiking"></i>
            <h3>adventures</h3>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

    </div>
</section>
<!-- 相册部分 -->

<section class="gallery" id="gallery">

        <div class="box">
            <h3>关于我们</h3>
            <a href="#">weibo</a>
            <a href="#">qq</a>
            <a href="#">twitter</a>
            <a href="#">wechat</a>
        </div>

    </div>

    <h1 class="credit"> created by <span> JackySei </span> | all rights reserved! </h1>

</section>


    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="./script.js"></script>
</body>
</html>

🏠CSS样式代码



*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    text-transform: capitalize;
    outline: none; 
    border:none;
    text-decoration: none;
    transition: all .2s linear;
    scroll-behavior: smooth;
  }
  /* 导航栏 */
  header{
    position: fixed;
    top:0; 
    left: 0; 
    right:0;
    background:#333;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:1rem 5%;
  }

    header .logo span{
        color: #ffa500;
    }

    header .logo{
    font-size: 1.5rem;
    font-weight: bolder;
    color:#fff;
    text-transform: uppercase;
    }


      .packages .box-container .box{
        flex:1 1 25rem;
        border-radius: .5rem;
        box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
      }
      
      .packages .box-container .box img{
        height: 15rem;
        width:100%;
        background-size: contain;
      }
      
      .packages .box-container .box .content{
        padding:0.5rem;
      }
      
      .packages .box-container .box .content h3{
        font-size:2rem;
        color:#333;
      }
      
      .packages .box-container .box .content h3 i{
        color:#ffa500;
      }
      
      .packages .box-container .box .content p{
        font-size:1rem;
        color:#666;
        padding:0.5rem 0;
      }
      
  
      

        .contact .row form .inputBox input{
          width:100%;
        }

        .footer  .box-container .box{
          flex: 1 1 18rem;
          padding: 1rem 0;
          text-align: center;
        }
      
      }

五、🎁更多源码

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

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

web网站建设

关注

5
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5网页制作代码大学生网页制作作业代码 (旅游网站官网滚动模板)

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

扫一扫