第四次网页设计课后作业

已于 2023-12-25 12:31:01 修改
阅读量352 收藏 7
点赞数 7
文章标签： bootstrap
于 2023-12-18 22:20:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s1939273302/article/details/135072938
版权

bootstrap框架学习

​​​​​2023-12-18：

容器、网格基础、文字与排版、颜色、表格、图像、警告框、按钮、按钮组

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../../bootstrap-5/css/bootstrap.min.css" rel="stylesheet">
  <script src="../../bootstrap-5/js/bootstrap.bundle.min.js"></script>

</head>
<body>
  <div class="container pt-5 my-5 border" > <!--响应式、固定宽度的容器(并添加一个大的顶部填充)(边框)-->

    <hr>
    <h1 class="text-muted">h1标题</h1><!--此文本已静音。-->
    <h2 class="text-primary">h2标题</h2><!--此文字很重要。-->
    <h1 class="display-1 text-success">display-1</h1><!--display(1-6)标题标题用于比普通标题更突出(此文本表示成功。)-->
    <h1 class="text-info">h1 heading <small>h1 heading-small</small></h1><!--small用于在任何标题中创建较小的辅助文本(此文字代表了一些信息。)-->
    <p class="text-warning">使用mark元素（或.mark类）来<mark>突出显示</mark>文本</p><!--mark使用黄色背景颜色和一些内边距来设置(此文本表示警告。)-->
    <p class="text-danger">abbr元素用于<abbr title="标记缩写或首字母缩略词">标记</abbr></p><!--abbr元素的样式设置为底部带有虚线边框，悬停时带有问号的光标(此文字代表危险。)-->
    <blockquote class="blockquote text-secondary"><!--blockquote用于引用来源(次要文本。)-->
      <p>blockquote用于显示另一个来源内容</p>
      <footer class="blockquote-footer">来自XXX</footer>
    </blockquote>
    <dl><!--dl元素用于描述列表-->
      <dt>咖啡</dt>
      <dd>黑色的热饮</dd>
      <dt>牛奶</dt>
      <dd>白色的热饮</dd>
    </dl>
    <p class="text-dark">这些行内代码片段应该嵌入到code元素里：<code>daima</code></p><!--行内代码片段(此文字为深灰色。)-->
    <p class="text-body">用kbd元素表示用键盘输入的内容<kbd>cltl+a</kbd></p><!--键盘输入(默认主体颜色（通常为黑色）。)-->
    <p class="text-light">对于多行代码，使用pre元素：</p><!--多行代码(此文本为浅灰色——在白色背景下)-->
    <pre>这是代码1
      这是代码2
      这是代码3
    </pre>
  <hr>
  <table class="table table-borderless table-sm table-responsive-sm"><!--表格（无边框）（上下文类着色）（表头颜色）（小型表格）（响应式）-->
    <thead class="table-warning">
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-primary">
        <td>内容</td>
        <td>内容</td>
        <td>内容</td>
      </tr>
      <tr>
        <td class="table-success">内容</td>
        <td class="table-danger">内容</td>
        <td class="table-info">内容</td>
      </tr>
      <tr>
        <td>内容</td>
        <td>内容</td>
        <td>内容</td>
      </tr>
    </tbody>
  </table>
  </div>
  <hr>
  <div class="container-fluid pt-5 my-5 bg-primary text-white"><!--全宽容器（深色背景）（白色文本）-->
    <p class="h1">表格</p><!--文字（标题的另一种表现）-->
    <table class="table table-striped table-bordered table-hover table-dark"><!--表格(条纹行)（带边框）（有悬停效果）（深色）-->
      <thead>
        <tr>
          <th>表头1</th>
          <th>表头2</th>
          <th>表头3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>内容</td>
          <td>内容</td>
          <td>内容</td>
        </tr>
        <tr>
          <td>内容</td>
          <td>内容</td>
          <td>内容</td>
        </tr>
        <tr>
          <td>内容</td>
          <td>内容</td>
          <td>内容</td>
        </tr>
      </tbody>
    </table>
  </div><hr>
  <div class="container mt-3"><!--（警告框）（警告链接）（关闭警告）（警告框动画）-->
    <div class="alert alert-success"><strong>成功！</strong>此警报框表示成功或积极的动作</div>
    <div class="alert alert-info"><strong>信息！</strong>您应该<a href="https://blog.csdn.net/s1939273302" class="alert-link">阅读这条消息</a></div>
    <div class="alert alert-warning alert-dismissible">
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      <strong>信息！</strong>此警报框可能表示可能需要注意的警告
    </div>
    <div class="alert alert-danger alert-dismissible fade show">
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      <strong>危险！</strong>此警报框表示危险或潜在的负面操作
    </div>
  </div><hr>
  <div class="container mt-3"><!--（按钮）（按钮轮廓）（按钮尺寸）（块级按钮）（活动/禁用按钮）（加载器按钮）-->
    <button type="button" class="btn">基础</button>
    <a href="https://blog.csdn.net/s1939273302" class="btn btn-primary">链接按钮</a>
    <input type="button" class="btn btn-secondary active" value="输入按钮"></input>
    <input type="submit" class="btn btn-success btn-sm disabled" value="提交按钮"></input>
    <input type="reset" class="btn btn-info btn-md" value="重置按钮"></input>
    <button type="button" class="btn btn-outline-warning btn-lg">警告</button>
    <div class="d-grid gap-3">
      <button type="button" class="btn btn-danger btn-block">全宽按钮</button>
      <button type="button" class="btn btn-dark btn-block">全宽按钮</button>
      <button type="button" class="btn btn-light text-dark btn-block">全宽按钮</button>
    </div>
    <button class="btn btn-primary">
      <span class="spinner-border spinner-border-sm"></span>
    </button>
    <button class="btn btn-primary">
      <span class="spinner-border spinner-border-sm"></span>
      Loading..
    </button>
    <button class="btn btn-primary" disabled>
      <span class="spinner-border spinner-border-sm"></span>
      Loading..
    </button>
    <button class="btn btn-primary" disabled>
      <span class="spinner-grow spinner-grow-sm"></span>
      Loading..
    </button>
  </div><hr>
  <div class="container mt-3">
    <!--按钮组-->
    <div class="btn-group btn-group-lg">
      <button type="button" class="btn btn-primary">华为</button>
      <button type="button" class="btn btn-primary">大疆</button>
      <button type="button" class="btn btn-primary">小米</button>
    </div>
    <div class="btn-group-vertical btn-group-sm">
      <button type="button" class="btn btn-primary">华为</button>
      <button type="button" class="btn btn-primary">大疆</button>
      <button type="button" class="btn btn-primary">小米</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-primary">华为</button>
      <button type="button" class="btn btn-primary">大疆</button>
      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">小米</button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">手机</a>
          <a class="dropdown-item" href="#">平板电脑</a>
        </div>
      </div>
    </div>
  </div><hr>
  <hr>
  <!--（图片形状：圆角、圆形、缩略图）（对齐图像）（居中图像）(响应式图像)-->
  <img src="../../素材/img/000.jpg" class="rounded float-start" alt="dog" width="250" height="400">
  <img src="../../素材/img/001.jpg" class="rounded-circle mx-auto d-block float-end" alt="dog" width="250" height="400" style="width: 20%;">
  <img src="../../素材/img/002.jpg" class="img-thumbnail img-fluid" alt="dog" width="250" height="400">
<hr>
  <div class="row"><!--网格（两个不等的响应式列）-->
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-8">.col-sm-8</div>
  </div>
  <hr>
</body>
</html>

2023-12-19： 

徽章、进度条、加载器、分页、列表组、卡片、下拉菜单、折叠、导航、导航栏

<!DOCTYPE html>
<html lang="en">
<head>
  <title>练习1</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../../bootstrap-5/css/bootstrap.min.css" rel="stylesheet">
  <script src="../../bootstrap-5/js/bootstrap.bundle.min.js"></script>

</head>
<body>
  <div class="container mt-3"><!--徽章-->
    <h1>这句话后面有个徽章<span class="badge bg-secondary">徽章</span></h1>
    <h2><span class="badge bg-success">这是其它颜色和大小的徽章</span></h2>
    <span class="badge rounded-pill bg-primary">胶囊徽章</span>
    <button type="button" class="btn btn-danger">
      元素内的徽章<span class="badge bg-info">4</span>
    </button>
  </div><hr>
  <div class="container mt-3"><!--进度条-->
    <div class="progress">
      <div class="progress-bar " style="width:  50%">50%</div>
      <div class="progress-bar bg-danger" style="width:10%">10%</div>
    </div>
    请注意，您必须为进度容器和进度条设置相同的高度：
    <div class="progress" style="height: 30px;">
      <div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" style="width: 60%;height: 30px;"></div>
    </div>
  </div><hr>
  <div class="container mt-3"><!--加载器-->
    <div class="spinner-border text-dark">AAAAAA</div>
    <div class="spinner-grow text-warning spinner-grow-sm">OOOOOO</div>
  </div>
  <div class="container mt-3"><!--分页-->
    <ul class="pagination pagination-sm justify-content-center" style="margin:20px 0">
      <li class="page-item"><a class="page-link" href="#">上一页</a></li>
      <li class="page-item disabled"><a class="page-link" href="#">1</a></li>
      <li class="page-item active"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    </ul>
    <ul class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">111</a></li>
      <li class="breadcrumb-item active">222</li>
    </ul>
  </div><hr>
  <div class="container mt-3"><!--列表组-->
    <ul class="list-group list-group-numbered list-group-flush">
      <a href="#" class="list-group-item list-group-item-action">第零项（包含链接）</a>
      <li class="list-group-item list-group-item-danger d-flex justify-content-between align-items-center">第一项<span class="badge bg-primary rounded-pill">12</span></li>
      <li class="list-group-item disabled">第二项(禁用)</li>
      <li class="list-group-item active">第三项（活动状态）</li>
    </ul>
  </div><hr>
  <div class="container mt-3"><!--卡片-->
    <div class="card" >
      <h4 class="card-title">卡片标题</h4>
      <div class="card-header bg-success ">页眉</div>
      <div class="card-body bg-info">内容</div>
      <a href="#" class="card-link">卡片链接</a>
      <div class="card-footer bg-warning">页脚</div>
  </div>
  <div class="container mt-3"><!--下拉列表-->
    <div class="dropdown ">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
        下拉按钮
      </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">链接 1</a></li>
        <li><hr class="dropdown-divider"></hr></li>
        <li><a class="dropdown-item-text" href="#">文本链接</a></li>
        <li><h5 class="dropdown-header">下拉标题</h5></li>
        <li><span class="dropdown-item-text">纯文本</span></li>
      </ul>
    </div>
  </div><hr>
  <div class="container mt-3"><!--折叠-->
    <div id="accordion">

      <div class="card">
        <div class="card-header">
          <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
            可折叠组项目 #1
          </a>
        </div>
        <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
          <div class="card-body">
            <h3>春日</h3>
            <p>胜日寻芳泗水滨，无边光景一时新。</p>
            <p>等闲识得东风面，万紫千红总是春。</p>
          </div>
        </div>
      </div>
    
      <div class="card">
        <div class="card-header">
          <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
            可折叠组项目 #2
          </a>
        </div>
        <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
          <div class="card-body">
            <h3>初夏绝句</h3>
            <p>纷纷红紫已成尘，布谷声中夏令新。</p>
            <p>夹路桑麻行不尽，始知身是太平人。</p>
          </div>
        </div>
      </div>
  </div><hr>
  <div class="container mt-3"><!--导航-->
    <ul class="nav justify-content-center  nav-tabs nav-justified">
      <li class="nav-item">
        <a class="nav-link active"  data-bs-toggle="tab" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">禁用</a>
      </li>
    </ul>
  </div><hr>
  <div class="container mt-3"><!--导航栏-->
    <nav class="navbar navbar-expand-sm bg-light  sticky-top">

      <div class="container-fluid">
        <ul class="navbar-nav  bg-success">
          <li class="nav-item">
            <a class="nav-link active" href="#">活动</a>
          </li>
          <span class="navbar-text">导航栏文本</span>
          <li class="nav-item ">
            <a class="nav-link " href="#">链接 </a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">禁用</a>
          </li>
        </ul>
      </div>
    
    </nav>
  </div>
</body>
</html>

2023-12-20： 

模态、工具提示、弹出框、toast、Offcanvas

<!DOCTYPE html>
<html lang="en">
<head>
  <title>练习2</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="http://www.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script>

</head>
<body>
<div class="container mt-3"><!--模态-->
  <!-- 打开模态的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  打开模态
</button>

<!-- 模态 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-fullscreen modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">

      <!-- 模态标题 -->
      <div class="modal-header">
        <h4 class="modal-title">模态标题</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- 模态主体 -->
      <div class="modal-body">
        模态主体 ..
      </div>

      <!-- 模态页脚 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
      </div>

    </div>
  </div>
</div>
</div><hr>
<div class="container mt-3"><!--工具提示-->
  <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="太棒了！">请悬停在我上面！</button>
  <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="太棒了！">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="太棒了！">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="太棒了！">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="太棒了！">Hover</a>
  <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
    </script>
</div><hr>
<div class="container mt-3"><!--弹出框-->
  <button type="button" class="btn btn-primary" data-bs-toggle="popover" title="弹出框标题" data-bs-content="弹出框内的一些内容">Toggle popover</button>
  <a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
  <a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
  <a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">Left</a>
  <a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Right</a>
  <a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="单击文档中的任意位置可关闭此弹出窗口">点击我</a>
  <a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="弹出框文本">请在我上方悬停</a>
 <script>
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
      return new bootstrap.Popover(popoverTriggerEl)
    })
    </script>
</div><hr>
<div class="container mt-3"><!--toast-->

  <button type="button" class="btn btn-primary" id="toastbtn">显示 Toast</button>
  
  <div class="toast">
    <div class="toast-header">
      <strong class="me-auto">Toast 标题</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      <p>toast 主体内的文本。</p>
    </div>
  </div>
</div>

<script>
document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  })
  toastList.forEach(toast => toast.show()) 
}
</script>

</div><hr>
<div class="container mt-3"><!--Offcanvas-->
  <div class="offcanvas offcanvas-start" id="demo">
    <div class="offcanvas-header">
      <h1 class="offcanvas-title">标题</h1>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
      <p>一些文本。一些文本。一些文本。</p>
      <p>一些文本。一些文本。一些文本。</p>
      <p>一些文本。一些文本。一些文本。</p>
      <button class="btn btn-secondary" type="button">按钮</button>
    </div>
  </div>
  
  <div class="container-fluid mt-3">
    <h3>Offcanvas 侧栏</h3>
    <p>Offcanvas 类似于模态，不同之处在于它经常用作侧边栏。</p>
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
      打开 Offcanvas 侧栏
    </button>
  </div>
  
</div>
</body>
</html>

2023-12-21： 

表单、选择菜单、复选框和单选按钮、范围、输入组、浮动标签、表单验证

<!DOCTYPE html>
<html lang="en">
<head>
  <title>练习3</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="http://www.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script>

</head>
  <div class="container mt-3"><!--表单--><!--输入组-->
    <div class="input-group mt-3 mb-3">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
        下拉按钮
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">链接 1</a></li>
        <li><a class="dropdown-item" href="#">链接 2</a></li>
        <li><a class="dropdown-item" href="#">链接 3</a></li>
      </ul>
      <input type="text" class="form-control" placeholder="用户名">
    </div>
    <form action="/action_page.php">
      <div class="input-group mb-3">
        <button class="btn btn-outline-primary" type="button">基础按钮</button>
        <input type="text" class="form-control" placeholder="一些文本">
      </div>
      
      <div class="mb-3 mt-3 input-group">
        <label for="email">电子邮件：</label>
        <span class="input-group-text">aaa </span>
        <span class="input-group-text">bbb </span>
        <div class="input-group-text">
          <input type="checkbox">
        </div>
        

        <input type="email" class="form-control" id="email" placeholder="请输入电子邮件地址" name="email">
      </div>
      <div class="mb-3 input-group">
        <label for="pwd">密码：</label>
        <input type="password" class="form-control" id="pwd" placeholder="请输入密码" name="pswd">
        <span class="input-group-text">aaa </span>

      </div>
      <div class="form-check mb-3">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox" name="remember">记住我
        </label>
      </div>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
    
    <label for="comment">评论：</label>
    <textarea class="form-control" rows="5" id="comment" name="text"></textarea>
    <form>
      <div class="row">
        <div class="col">
          <input type="text" class="form-control" placeholder="请输入电子邮件地址" name="email">
        </div>
        <div class="col">
          <input type="password" class="form-control" placeholder="请输入密码" name="pswd">
        </div>
      </div>
    </form>
  </div>
  <div class="container mt-3"><!--选择菜单-->
    <form action="/action_page.php">
      <label for="sel1" class="form-label">单选菜单：</label>
      <select form="form-select" id="sel1" name="sellist1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select><br>

      <label for="sel2" class="form-label">多选菜单：</label>
      <select multiple class="form-select" id="sel2" name="sellist2">
        <option>1</option>
        <option>2</option>
        <option>3</option>        
        <option>4</option>
        <option>5</option>
      </select>
      <button type="submit" class="btn btn-primary mt-3">提交</button>
    </form>
  </div><hr>
  <div class="container mt-3"><!--复选框和单选按钮-->
  <form action="/action_page.php">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>
      <label class="form-check-label" for="check1">选项1</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check1" name="option2" value="something">
      <label class="form-check-label" for="check2">选项2</label>
    </div>    
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check1" name="option3" value="something">
      <label class="form-check-label" for="check3">选项3</label>
    </div>
    <button type="submit" class="btn btn-primary mt-3">提交</button>
  </form>    
  <br>
  <form action="/action_page.php">
    <div class="form-check">
      <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>选项 1
      <label class="form-check-label" for="radio1"></label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">选项 2
      <label class="form-check-label" for="radio2"></label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" disabled>选项 3
      <label class="form-check-label"></label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
      <label class="form-check-label" for="mySwitch">深色模式</label>
    </div>
  </form>
  </div><hr>
  <div class="container mt-3"><!--范围-->
    <form action="/action_page.php">
      <label for="customRange" class="form-label">自定义范围</label>
      <input type="range"  min="0" max="4" class="form-range" id="customRange" name="points">
      <button type="submit" class="btn btn-primary mt-3">提交</button><br>

      <form action="/action_page.php">
        <label for="customRange" class="form-label">自定义范围</label>
        <input type="range" class="form-range"  id="customRange" step="10" name="points">
        
        <button type="submit" class="btn btn-primary mt-3">提交</button>
      </form>
    </form>  
  </div><hr>

  <div class="container mt-3"><!--浮动标签-->
    <form action="/action_page.php">
      <div class="form-floating mb-3 mt-3">
        <input type="text" class="form-control" id="email" placeholder="请输入电邮地址" name="email">
        <label for="email">电邮</label>
      </div>
      <div class="form-floating mt-3 mb-3">
        <input type="text" class="form-control" id="pwd" placeholder="请输入密码" name="pswd">
        <label for="pwd">密码</label>
      </div>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>
  <div class="form-floating">
    <textarea class="form-control" id="comment" name="text" placeholder="Comment goes here"></textarea>
    <label for="comment">评论</label>
  </div>
  </div>
  <div class="container my-3"><!--表单验证-->
    <p>请尝试提交表单。</p>
    
    <form action="/action_page.php" class="was-validated">
      <div class="mb-3 mt-3">
        <label for="uname" class="form-label">用户名：</label>
        <input type="text" class="form-control" id="uname" placeholder="请输入用户名" name="uname" required>
        <div class="valid-feedback">有效的。</div>
        <div class="invalid-feedback">请填写此字段。</div>
      </div>
      <div class="mb-3">
        <label for="pwd" class="form-label">密码：</label>
        <input type="password" class="form-control" id="pwd" placeholder="请输入密码" name="pswd" required>
        <div class="valid-feedback">有效的。</div>
        <div class="invalid-feedback">请填写此字段。</div>
      </div>
      <div class="form-check mb-3">
        <input class="form-check-input" type="checkbox" id="myCheck"  name="remember" required>
        <label class="form-check-label" for="myCheck">我同意这些条款。</label>
        </div>
  </div>
</body>
</html>

s1939273302
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于Dreamweaver8的简单网页设计课后作业
03-09
基于Dreamweaver8的简单网页设计课后作业,服装类网站
网页小新闻框课后作业
06-16
自己动手做一个网页得新闻小界面，内容包括新闻标题，以及标签，图片的使用。属于网页设计课程的课后小作业
第一次网页设计课后作业
s1939273302的博客
11-04 86
完成HTML第三章至第八章内容。 完成一个界面。
第二次网页设计课后作业
s1939273302的博客
11-13 70
完成HTML所有内容。 完成CSS第十一章至第十四章。 继续完成界面。
第三次网页设计课后作业
s1939273302的博客
11-19 56
完成CSS全部内容。 学习用div+css进行布局。
网页设计--第2次课课后作业
hinxx的博客
11-15 91
文本或图片
网页设计--第4次课后作业
wyhwust的博客
10-18 511
2、预习JavaScript。1、完成的完整页面编写。
网页设计——第一次课后作业
hinxx的博客
11-06 115
style标签（CSS)，script标签(javaScript)，link标签(CSS), base标签(无意义)2.http-equiv属性。--注释的内容-->head，body标签。3-3 body标签。3-4 HTML注释。
网页设计--第7次课后作业
2301_80812728的博客
12-29 326
3、跟着视频对默认的vue项目做一些简单的修改。1、根据教程安装nodejJS。3.Pagination 分页。2、安装vue-cli。4.Dialog 对话框。一、配置环境的相关准备。1.Button按钮。
网页设计--第5次课后作业
wyhwust的博客
11-27 586
1、快速学习JavaScript的基本知识第1-10章。附源代码（先自己尽量自己做，然后再参考。2、使用所学的知识完成以下练习。使所有的复选框呈现被选中的状。标签的标签体内容后面加上。
网页设计——第四次课后作业
hinxx的博客
12-22 30
【代码】网页设计——第四次课后作业。
网页作业——大二下web程序设计课后作业.zip
10-22
网页作业——大二下web程序设计课后作业.zip
微机原理与接口技术第4章课后作业答案PPT课件.ppt
11-11
本节课后作业答案PPT课件涵盖了微机原理与接口技术第4章的相关知识点，包括汇编语言程序设计、数据定义语句、指令语句的执行结果、无符号双子长数之和的程序设计、测试寄存器的某一位是否为0、将二进制数转换为ASCII...
战略规划之五看三定方法论.pptx
06-14
战略规划之五看三定方法论.pptx
cutcamera1718339848103.png
06-14
cutcamera1718339848103.png
小游戏的java程序开发
06-14
小游戏的java程序开发
python 4个作业.zip
最新发布
06-14
Python学习笔记，复习巩固，作业！！！
Python基础-第三节作业.zip
06-14
Python学习笔记，复习巩固，作业！！
html5网页设计课后作业
05-25
好的，以下是一些HTML5网页设计的课后作业建议： 1. 创建一个简单的网站页面。使用HTML5的语义标签，例如、、和等来组织你的内容。 2. 制作一个表单页面，包括文本框、单选框、复选框和下拉列表框等表单元素。 3. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值