06-作业练习盒子模型

最新推荐文章于 2024-04-23 17:45:12 发布

Sarrykiss

最新推荐文章于 2024-04-23 17:45:12 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/weixin_38178755/article/details/78708724

学习笔记专栏收录该内容

17 篇文章

订阅专栏

本文通过三个练习介绍CSS盒子模型的应用，包括表格的padding与border设置，以及无序列表的实践，强调在编写代码时先规划结构的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格的练习！有关padding与border很重要 编写代码的时候先把结构划分好！
第一个金牌练习
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>金牌top5</title>
    <style>
    *{
        margin: 0px;
        padding: 0px;
    }

    table{
        margin:20px;
        width: 238px;
        /*这个没有想到*/
        border-collapse: collapse;
        /*border: 2px solid #ccc;*/
        font: normal normal 10px Arial;
        text-align:center;
    }
    table caption{
        color:white;
        font:normal bold 14px "楷体";
        background: url(img/captionBg.gif) no-repeat;
        width: 238px;
        height:30px;
        line-height: 30px;
        /*text-indent: -10em;*/
        /*用的是text-left和padding*/
        text-align: left;
        padding-left: 10px;
        border: #0cbaff solid 1px;

    }
    thead{
        background: #D2E9F6;
        border: #a1d3ff solid 1px;

    }
    th{
        height: 27px;
        font-weight: normal;
    }
    tbody{

        border: 1px solid #ccc;

    }
    td{
        border-bottom: #CCC dotted 1px;
        line-height: 25px;
    }
    td a{
        text-decoration: none;
        color: #06c;
    }
    </style>
</head>
<body>
    <table>
       <caption>金牌TOP5</caption>
     <thead>
      <tr>
       <th>排名</th>
       <th>国家</th>
       <th>金</th>
       <th>银</th>
       <th>铜</th>
       <th>总计</th>
      </tr>
     </thead>
     <tbody></tbody>
     <tr>
       <td>1</td>
       <td>中国</td>
       <td>17</td>
       <td>9</td>
       <td>4</td>
       <td>30</td>
     </tr>
     <tr>
       <td>2</td>
       <td>美国</td>
       <td>12</td>
       <td>8</td>
       <td>9</td>
       <td>29</td>
     </tr>
     <tr>
       <td>3</td>
       <td>韩国</td>
       <td>6</td>
       <td>2</td>
       <td>4</td>
       <td>12</td>
     </tr>
     <tr>
       <td>4</td>
       <td>法国</td>
       <td>5</td>
       <td>3</td>
       <td>5</td>
       <td>13</td>
     </tr>
     <tr>
       <td>5</td>
       <td>朝鲜</td>
       <td>4</td>
       <td>0</td>
       <td>1</td>
       <td>5</td>
     </tr>
     <tfoot></tfoot>
    </table>
</body>
</html>

第二个最新文章就是无序表的练习
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0px；
        padding:0px;
    }
    body{
        background: #EEEEEE;

    }
    .content{
        width: 298px;/*减去padding的宽度*/
        height: 226px;/*减去padding的宽度*/
        border:#CCCCCC 1px solid;
        margin:0 auto;
        margin-top: 97px;
        padding:0 15px;


    }
       h3{
        font-size: 18px;
        margin-top: 18px;
        border-bottom: 1px solid #CCC;
        padding-bottom: 6px;
       }
       ul
       {
        margin: 10px;
        padding-left: 0px;
       }
       li{
        font-size: 12px;
        list-style: none;/*清楚li标签的小点点*/
        line-height: 30px;
        border-bottom: 1px dashed #ccc;
        padding-left: 20px;

       }
       a{
        text-decoration: none;
        color:black;
       }
    </style>
</head>
<body>
    <div class="content">
    <h3>最新文章/New Article</h3>
    <ul>
     <li><a href="#">你说什么我不知道</a></li>
     <li><a href="#">我就是电话喜欢</a></li>
     <li><a href="#">好你是因为我拍的几时回</a></li>
     <li><a href="#">神呢以哦是死的</a></li>
     <li><a href="#">发放啥叫方法方法记得发货</a></li>
    </ul>
    </div>
</body>
</html>

第三个爱宠知识练习也是无序列表的使用
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0px;
        padding: 0px;
    }
      div{
        width: 240px;/*减去边框的宽度*/
        height: 307px;/*减去边框的宽度*/
        margin:0 auto;
        border:#009900 1px solid;
        margin-top: 20px;
        padding:10px;
        background: url(img/bg.gif) repeat; 
      }
      h3{
        color:white;
        font:normal normal 20px"黑体";
        border-left: 4px solid #C9E143;
        padding-left: 5px;

      }
      ul{
        background: white;
        margin-top: 5px;
        padding: 0 10px;
      }
      li{
        font-size: 12px;
        list-style: none;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px dashed #666;
        background: url(img/tb.gif) no-repeat left center;
        padding-left: 16px;
      }
      a{
          text-decoration: none;
          color:blue;
      }

    </style>
</head>
<body>
    <div>
          <h3>爱宠知识</h3>
          <ul>
            <li><a href="#">养狗比养猫对健康更有利</a></li>
            <li><a href="#">日本正宗柴犬亮相，你怎么看柴犬</a></li>
            <li><a href="#">狗狗歌曲《新年旺旺》</a></li>
            <li><a href="#">带宠兜风，开车带宠需要注意什么？</a></li>
            <li><a href="#">【爆笑】这狗狗太不给力了</a></li>
            <li><a href="#">狗狗与男童相同着装拍有爱造型照</a></li>
            <li><a href="#">狗狗各个阶段健康大事件</a></li>
            <li><a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a></li>
            <li><a href="#">为什么每次大小便后，会用脚踢土？</a></li>

          </ul>
    </div>
</body>
</html>