综合案例

案例1-学生信息管理

表单

效果

源代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>学生表</title>
  <style>
    input[type=text],
    select,
    textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-top: 6px;
      margin-bottom: 16px;
      resize: vertical;
    }

    input[type=submit] {
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    input[type=submit]:hover {
      background-color: #45a049;
    }

    .container {
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 20px;
    }
  </style>
</head>

<body>
  <h3>学生表</h3>
  <div class="container">
    <form action="#">
      <label for="no">学号:</label>
      <input type="text" id="no" name="no" placeholder="请输入学号..">
      <label for="name">姓名:</label>
      <input type="text" id="name" name="name" placeholder="请输入姓名..">
      <label for="age">年龄:</label>
      <input type="text" id="age" name="age" placeholder="请输入年龄..">
      <input type="submit" value="提交">
    </form>
    </table>
</body>

表格

效果

源代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>学生表</title>
  <style>
    #STUDENT {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      width: 100%;
      border-collapse: collapse;
    }

    #STUDENT td,
    #STUDENT th {
      font-size: 1em;
      border: 1px solid #98bf21;
      padding: 3px 7px 2px 7px;
    }

    #STUDENT th {
      font-size: 1.1em;
      text-align: left;
      padding-top: 5px;
      padding-bottom: 4px;
      background-color: #A7C942;
      color: #ffffff;
    }

    #STUDENT tr.alt td {
      color: #000000;
      background-color: #EAF2D3;
    }
  </style>
</head>

<body>
  <h3>学生表</h3>
  <table id="STUDENT" border="1">
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>X1</td>
      <td>X1</td>
      <td>1</td>
      <td><a href="javascript:void()">修改</a>&nbsp;&nbsp;<a href="javascript:void()">删除</a></td>
    </tr>
    <tr>
      <td>X2</td>
      <td>X2</td>
      <td>2</td>
      <td><a href="javascript:void()">修改</a>&nbsp;&nbsp;<a href="javascript:void()">删除</a></td>
    </tr>
    <tr>
      <td>X3</td>
      <td>X3</td>
      <td>3</td>
      <td><a href="javascript:void()">修改</a>&nbsp;&nbsp;<a href="javascript:void()">删除</a></td>
    </tr>
    <tr>
      <td>X4</td>
      <td>X4</td>
      <td>4</td>
      <td><a href="javascript:void()">修改</a>&nbsp;&nbsp;<a href="javascript:void()">删除</a></td>
    </tr>
    <tr>
      <td>X5</td>
      <td>X5</td>
      <td>5</td>
      <td><a href="javascript:void()">修改</a>&nbsp;&nbsp;<a href="javascript:void()">删除</a></td>
    </tr>
    <tr>
      <td>X6</td>
      <td>X6</td>
      <td>6</td>
      <td><a href="javascript:void()">修改</a>&nbsp;&nbsp;<a href="javascript:void()">删除</a></td>
    </tr>
  </table>
</body>

</html>

案例2-下拉菜单

效果

源代码

<!DOCTYPE html>
<html>

<head>
  <title>下拉菜单实例</title>
  <meta charset="utf-8">
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    li {
      float: left;
    }

    li a,
    .dropbtn {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a:hover,
    .dropdown:hover,
    .dropbtn {
      background-color: #111;
    }

    .dropdown {
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {
      background-color: #f1f1f1
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }
  </style>
</head>

<body>

  <ul>
    <li><a class="active" href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <div class="dropdown">
      <a href="#" class="dropbtn">下拉菜单</a>
      <div class="dropdown-content">
        <a href="#">链接 1</a>
        <a href="#">链接 2</a>
        <a href="#">链接 3</a>
      </div>
    </div>
  </ul>

  <h3>导航栏上的下拉菜单</h3>
  <p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

</body>

</html>

案例3-提示工具

效果

源代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>提示工具</title>
</head>
<style>
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }

  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* 定位 */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
</style>

<body style="text-align:center;">

  <h2>头部提示工具</h2>
  <p>鼠标移动到以下元素:</p>

  <div class="tooltip">鼠标移动到我这
    <span class="tooltiptext">提示文本</span>
  </div>

</body>

</html>

案例4-布局

效果

源代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CSS 网页布局</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
    }

    /* 头部样式 */
    .header {
      background-color: #f1f1f1;
      padding: 20px;
      text-align: center;
    }

    /* 导航条 */
    .topnav {
      overflow: hidden;
      background-color: #333;
    }

    /* 导航链接 */
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    /* 链接 - 修改颜色 */
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }

    /* 创建三个相等的列 */
    .column {
      float: left;
      padding: 10px;
    }

    /* 左右两侧宽度 */
    .column.side {
      width: 25%;
    }

    /* 中间区域宽度 */
    .column.middle {
      width: 50%;
    }

    /* 列后面清除浮动 */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    /* 响应式布局 - 宽度小于600px时设置上下布局 */
    @media screen and (max-width: 600px) {

      .column.side,
      .column.middle {
        width: 100%;
      }
    }

    /* 底部样式 */
    .footer {
      background-color: #f1f1f1;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>

<body>

  <div class="header">
    <h1>头部区域</h1>
    <p>重置浏览器大小查看效果。</p>
  </div>

  <div class="topnav">
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#">链接</a>
  </div>

  <div class="row">
    <div class="column side">
      <h2>左侧栏</h2>
      <p>学的不仅是技术，更是梦想！</p>
    </div>

    <div class="column middle">
      <h2>主区域内容</h2>
      <p>学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！</p>
      <p>学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！</p>
    </div>

    <div class="column side">
      <h2>右侧栏</h2>
      <p>学的不仅是技术，更是梦想！</p>
    </div>
  </div>

  <div class="footer">
    <p>底部区域</p>
  </div>

</body>

</html>