• Bootstrap响应式轮播效果网页(1+X Web前端开发中级 例题)

    文章目录

     📄题目要求 

    🧩说明

    🧩效果图

    💻HTML代码

    🎯实现效果

    📰完整答案

     📄题目要求 

    • 阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（10）代码。

    🧩说明

    • 这是一个响应式完成，用bootstrap4完成响应式轮播效果。

    • 项目采用Bootstrap框架，包含首页index.html、css文件夹、js文件夹、img文件夹，其中，css文件夹包含style.css文件和bootstrap.min.css文件；js文件夹包含jquery.min.js文件、popper.min.js文件和bootstrap.min.js文件；img文件夹包含用到的图片。

    • 首页（index.html）使用Bootstrap响应式布局，PC端和移动端能够自适应显示，内容为【轮播图】，适配设备屏幕大小。

    🧩效果图

    💻HTML代码

    1. html>
    2. <html>
    3. <head>
    4.   <title>第一题--bootstraptitle>
    5.   <meta charset="utf-8">
    6.   
    7.   ___________(1)___ ____________
    8.  
    9.   
    10.   ___________(2)____ ___________
    11.  
    12.   <link rel="stylesheet" href="css/style.css">
    13.   
    14.   ___________(3)__ _____________
    15.   ___________(4)___ ____________
    16.   ___________(5)__ _____________
    17. head>
    18. <body>
    19.  
    20. <div id="demo" class="____(6)_ carousel ____ slide" data-ride="carousel">
    21.   
    22.   <ul class="carousel-indicators">
    23.     <li data-target="#demo" data-slide-to="0" class="active">li>
    24.     <li data-target="#demo" data-slide-to="1">li>
    25.     <li data-target="#demo" data-slide-to="2">li>
    26.   ul>
    27.  
    28.   
    29.   <div class="carousel-inner">
    30.     <div class="___(7)_ _____ active">
    31.       <img src="img/img_fjords_wide.jpg">
    32.       <div class="____(8)_carousel-caption_____">
    33.         <h3>第一张图片描述标题h3>
    34.         <p>描述文字!p>
    35.       div>
    36.     div>
    37.     <div class="___(7)______">
    38.       <img src="img/img_nature_wide.jpg">
    39.       <div class="____(8)______">
    40.         <h3>第二张图片描述标题h3>
    41.         <p>描述文字!p>
    42.       div>
    43.     div>
    44.     <div class="____(7)______">
    45.       <img src="img/img_mountains_wide.jpg">
    46.       <div class="____(8)______">
    47.         <h3>第三张图片描述标题h3>
    48.         <p>描述文字!p>
    49.       div>
    50.     div>
    51.   div>
    52.  
    53.   
    54.   <a class="____(9)_ ____" href="#demo" data-slide="prev">
    55.     <span class="carousel-control-prev-icon">span>
    56.   a>
    57.   <a class="_____(10)______" href="#demo" data-slide="next">
    58.     <span class="carousel-control-next-icon">span>
    59.   a>
    60.  
    61. div>
    62.  
    63. body>
    64. html>

    🎯实现效果

    📰完整答案

    试题一（20分）
    【问题】（20分）
    （1）或者

    （2）
    （3）
    （4） （4-5的答案可以换顺序）
    （5）
    （6）carousel
    （7）carousel-item
    （8）carousel-caption
    （9）carousel-control-prev
    （10）carousel-control-next
    （每空2分，共20分）

    🎯点赞收藏，防止迷路🔥 

  • 相关阅读:
    createSocketTask:fail wcwss url not in domain list 小程序网络异常
    问道管理：华为概念股捷荣技术13天10板，监管质疑迎合热点炒作
    Maven的聚合 继承 属性 版本管理 多环境资源配置 跳过测试
    大数据 为什么用
    java多线程应用场景
    【2023提前批 之 面经】~ 锐捷
    全自动测试-2-测试页面添加搜索
    【时间序列预测】Autoformer论文笔记
    网络安全宣传周|探索AI数字人的魅力和价值所在
    基础课18——智能客服系统架构
  • 原文地址：https://blog.csdn.net/weixin_53231455/article/details/127895815