Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS基础之表格控制、元素浮动定位、元素定位 九期第五课
Blogger Information
Blog 37
fans 1
comment 0
visits 27025
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS基础之表格控制、元素浮动定位、元素定位 九期第五课
叮叮当当
Original
1071 people have browsed it

1. 制作一张商品信息表,内容自定,要求用到行与列的合并

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>商品信息表</title>
  4.     <style>
  5.         /*给单元格加边框*/
  6.         td, th {
  7.             border: 1px solid #444;
  8.             text-align: center;
  9.             /*每个单元格加内边距*/
  10.             padding: 10px;
  11.         }
  13.         table {
  14.             box-sizing: border-box;
  15.             color: #444;
  16.             font-size: 0.9rem;
  17.             /*水平 垂直 扩散像素 颜色*/
  18.             box-shadow: 1px 1px 1px #999;
  19.             /*将表格中的边框进行折叠,相当于表格的cellspacing*/
  20.             border-collapse:collapse ;
  22.             width: 500px;
  23.             margin: 20px auto;
  24.         }
  26.         table caption {
  27.             font-size: 1.1rem;
  28.             margin-bottom: 15px;
  29.         }
  31.         /*隔行变色*/
  32.         tbody tr:nth-of-type(odd) {
  33.             background-color: lightgray;
  34.         }
  35.         /*设置上午单元格的背景色*/
  36.         tbody tr:first-of-type > td:first-of-type {
  37.             background-color:lightcoral ;
  38.             color: white;
  39.             text-shadow: 1px 1px 1px black;
  40.         }
  41.         /*设置下午单元格的背景色*/
  42.         tbody tr:nth-last-of-type(2) > td:first-of-type {
  43.             background-color:lightsalmon;
  44.             color: white;
  45.             text-shadow: 1px 1px 1px black;
  46.         }
  48.         /*表头表尾样式*/
  49.        table thead > tr:first-of-type, table tfoot >tr:last-of-type {
  50.             background-color: lightseagreen;
  51.             color: white;
  52.             /*描边*/
  53.             text-shadow: 1px 1px 1px black;
  54.         }
  55.     </style>
  56. </head>
  58. <body>
  59.     <table>
  60.         <caption>超市今日促销</caption>
  62.         <thead>
  63.             <tr>
  64.                 <th>商品分类</th>
  65.                 <th>果蔬</th>
  66.                 <th>肉鱼</th>
  67.                 <th>粮油</th>
  68.                 <th>乳饮</th>
  69.                 <th>零食</th>
  70.                 <th>百货</th>
  71.             </tr>
  72.         </thead>
  74.         <tbody>
  75.             <tr>
  76.                 <td rowspan="2">早晨<br>7-9点</td>
  77.                 <td>火龙果</td>
  78.                 <td>乌鸡</td>
  79.                 <td>大米</td>
  80.                 <td>老酸奶</td>
  81.                 <td>小面包</td>
  82.                 <td>不粘锅</td>
  83.             </tr>
  84.             <tr>
  85.                 <td>大青芒</td>
  86.                 <td>黑虎虾</td>
  87.                 <td>葵花油</td>
  88.                 <td>红参茶</td>
  89.                 <td>海苔</td>
  90.                 <td>洗衣液</td>
  91.             </tr>
  92.             <tr>
  93.                 <td rowspan="2">下午<br>4-5点</td>
  94.                 <td>猕猴桃</td>
  95.                 <td>鸭腿</td>
  96.                 <td>红豆</td>
  97.                 <td>椰汁</td>
  98.                 <td>酥饼</td>
  99.                 <td>***桌</td>
  100.             </tr>
  101.             <tr>
  102.                 <td>雪莲果</td>
  103.                 <td>三文鱼</td>
  104.                 <td>薏仁</td>
  105.                 <td>纯牛奶</td>
  106.                 <td>锅巴</td>
  107.                 <td>抽纸</td>
  108.             </tr>
  109.         </tbody>
  111.         <tfoot>
  112.         <tr>
  113.             <td>备注:</td>
  114.             <td colspan="6">每种促销商品每人限购一份</td>
  115.         </tr>
  116.         </tfoot>
  117.     </table>
  118. </body>

2. 使用<div><span><p><ul>…等标签来制作一张课程表

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>课程表</title>
  4.     <style>
  5.         .table {
  6.             display: table;
  7.             box-sizing: border-box;
  8.             /*边框折叠*/
  9.             border-collapse: collapse;
  10.             border: 1px solid #444;
  11.             box-shadow: 1px 1px 1px #999;
  13.             width: 500px;
  14.             margin: auto;
  15.             color: #444;
  16.             text-align:center;
  17.         }
  18.         .caption {
  19.             display: table-caption;
  20.         }
  21.         .thead {
  22.             display: table-header-group;
  23.             font-weight: bold;
  24.             /*字间距*/
  25.             letter-spacing: 4px;
  26.         }
  27.         .thead, .tfoot {
  28.             background-color: lightseagreen;
  29.             color: white;
  30.             text-shadow: 1px 1px 1px black;
  31.         }
  32.         .tbody {
  33.             display: table-row-group;
  34.         }
  35.         span ul {
  36.             display: table-row;
  37.         }
  38.         span ul li {
  39.             display: table-cell;
  40.             border: 1px solid #444;
  41.             padding: 4px;
  42.         }
  43.         span ul li p {
  44.             color: lightseagreen;
  45.             font-weight: bold;
  46.         }
  47.         .tfoot {
  48.             display: table-footer-group;
  49.         }
  50.     </style>
  51. </head>
  53. <body>
  54. <div class="table">
  55.     <h2 class="caption">课程安排</h2>
  56.     <span class="thead">
  57.         <ul>
  58.             <li>序号</li>
  59.             <li>课程</li>
  60.             <li>描述</li>
  61.         </ul>
  62.     </span>
  64.     <span class="tbody">
  65.         <ul>
  66.             <li>1</li>
  67.             <li>英语结构</li>
  68.             <li><p>英语常用结构语法讲解</p></li>
  69.         </ul>
  70.         <ul>
  71.             <li>2</li>
  72.             <li>英语阅读</li>
  73.             <li><p>大量英语文章阅读练习分析</p></li>
  74.         </ul>
  75.         <ul>
  76.             <li>3</li>
  77.             <li>英语口语</li>
  78.             <li><p>小电影带你进入口语的世界</p></li>
  79.         </ul>
  80.     </span>
  82.     <span class="tfoot">
  83.         <ul>
  84.             <li>备注:</li>
  85.             <li>全程直播互动教学</li>
  86.             <li>每周六12:00 - 15:00，我们不见不散</li>
  87.         </ul>
  88.     </span>
  89. </div>
  90. </body>

3. 使用绝对定位,实现用户登录框在页面中始终居中显示

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>绝对定位</title>
  4.     <style>
  5.         body {
  6.             /*定位父级 / 定位上下文到<body>上*/
  7.             position: relative;
  8.             height: 500px;
  9.         }
  11.         .box {
  12.             box-sizing: border-box;
  13.             margin:40px 0;
  14.             width: 60%;
  15.             height: 280px;
  17.             /*圆角*/
  18.             border-radius: 8px 8px 8px 8px;
  19.             background-color: lightblue;
  20.             text-align: center;
  22.             position: absolute;
  23.             left: 20%;
  24.         }
  25.         .box h3 {
  26.             font-size: 1.2rem;
  27.             color:white;
  28.             text-shadow: 1px 1px 1px black;
  29.         }
  30.         .box1 {
  31.             box-sizing: border-box;
  32.             width: 250px;
  33.             /*由于父元素设置了宽高，以及绝对定位，并没有出现传递问题*/
  34.             margin: auto ;
  35.             padding: 10px;
  36.             background-color: lightcyan;
  37.             border-radius: 8px 8px 8px 8px;
  38.         }
  39.     </style>
  40. </head>
  42. <body>
  43.     <div class="box">
  44.         <h3>用户登录</h3>
  45.         <div class="box1">
  46.             <form action="" method="post">
  47.                 <p>
  48.                     <label for="username">用户:</label>
  49.                     <input type="text" name="username" id="username" value="" >
  50.                 </p>
  51.                 <p>
  52.                     <label for="psd">密码:</label>
  53.                     <input type="password" name="psd" id="psd" placeholder="请输密码">
  54.                 </p>
  55.                 <p>
  56.                     <input type="submit" name="submit" value="提交">
  57.                 </p>
  58.             </form>
  59.         </div>
  60.     </div>
  61. </body>

4.模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>圣杯布局</title>
  4.     <style>
  5.         body {
  6.             text-align: center;
  7.         }
  9.         header, footer {
  10.             height: 60px;
  11.             background-color: lightyellow;
  12.             /*与高度值一致，垂直居中*/
  13.             line-height: 30px;
  14.         }
  16.         /*主体*/
  17.         main {
  18.             box-sizing: border-box;
  19.             /*给左右边栏预留空间*/
  20.             padding-left: 100px;
  21.             padding-right: 100px;
  22.             /*将main转为BFC块, 使浮动元素包含在内, 撑开父级*/
  23.             overflow: hidden;
  24.         }
  26.         main > article {
  27.             box-sizing: border-box;
  28.             background-color: lavender;
  29.             /*占据父容器全部空间*/
  30.             width: 100%;
  31.             /*演示案例,使用最小高度弥补内容不足问题*/
  32.             min-height: 100px;
  33.             line-height: 100px;
  34.         }
  36.         /*左右侧通用样式*/
  37.         main > aside {
  38.             box-sizing: border-box;
  39.             width: 100px;
  40.             min-height: 100px;
  41.             line-height: 100px;
  42.         }
  43.         main > aside:first-of-type {
  44.             background-color: lightcyan;
  45.         }
  46.         main  > aside:last-of-type {
  47.             background-color: lightpink;
  48.         }
  50.         /*主体区内容全部浮动*/
  51.         main > article,
  52.         main > aside:first-of-type,
  53.         main > aside:last-of-type {
  54.             float: left;
  55.         }
  57.         /*将左侧拉到主体的左边*/
  58.         main > aside:first-of-type {
  59.             /*从当前位置从左向右推-100%，即从右向左推100%(一个父元素宽度)*/
  60.             margin-left: -100%;
  61.             /*相对定位*/
  62.             position: relative;
  63.             /*在margin-left位置从左向右推-100,即从右向左推100 */
  64.             left: -100px;
  65.         }
  66.         main > aside:last-of-type {
  67.             margin-right: -100px;
  68.         }
  69.     </style>
  70. </head>
  72. <body>
  73.     <header>头部</header>
  75.     <main>
  76.         <article>中间</article>
  77.         <aside>左侧</aside>
  78.         <aside>右侧</aside>
  79.     </main>
  81.     <footer>底部</footer>
  82. </body>

思路：

  • 整个布局的DOM结构：头部，底部，主体，其中主体包括左中右三栏；

  • （1）将主体转为BFC块, 使浮动元素能够包含在内, 撑开父级overflow: hidden;;

  • （2）给主体左右边栏各预留空间100px，以便后面主体的左右侧区块浮动；
    padding-left: 100px;， padding-right: 100px;

  • （3）将主体中间区块的宽度设置100%，占据父容器全部空间；

  • （4）将主体左右区块宽度各设为100px，以便后面浮动后宽度正好合适；

  • （5）主体区内容全部浮动 float: left;；

  • （ps: 由于中间区宽度100%，所以左右侧被挤到下一行了)

  • （6）将左侧拉到主体的左边margin-left: -100%;；

  • （7）将左侧从当前位置拉到左侧预留空间；
    position: relative;， left: -100px;

  • （8）将右侧拉到右侧预留空间margin-right: -100px;；

5. (选做): 不使用<table>...写表格时,如何实现行与列合并

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.         ul{
  6.             list-style: none;
  7.             padding: 0;
  8.         }
  10.         .table {
  11.             box-sizing: border-box;
  12.             width: 505px;
  13.             margin: auto;
  14.             text-align: center;
  15.         }
  16.         .caption{
  17.             margin: 20px 0 0 0;
  18.             color: #333333;
  19.         }
  21.         .box{
  22.             box-sizing: border-box;
  23.             width: 100%;
  24.             margin: 0;
  25.         }
  26.         .box ul{
  27.             float: left;
  28.         }
  30.         .box li {
  31.             width: 100px;
  32.             height: 30px;
  33.             float: left;
  34.             line-height: 30px;
  35.             border: 1px solid black;
  36.             /*margin负值去除重叠边框*/
  37.             margin: 0 -1px -1px 0;
  38.         }
  40.         .box ul .rowspan1 {
  41.             height: 61px;
  42.             line-height: 61px;
  43.         }
  44.         .box ul .tbody2 {
  45.             position: relative;
  46.             top: -31px;
  47.         }
  49.         .box ul .tbody3 {
  50.             position: relative;
  51.             left: -303px;
  52.         }
  54.         .box ul .tbody3-rest {
  55.             position: relative;
  56.             left: 202px;
  57.             top: -31px;
  58.         }
  60.         .box ul .tfoot {
  61.             position: relative;
  62.             top: -31px;
  63.         }
  65.         .thead, .tfoot {
  66.             background-color: lightseagreen;
  67.             color: white;
  68.             text-shadow: 1px 1px 1px black;
  69.         }
  71.     </style>
  72. </head>
  74. <body>
  75.     <div class="table">
  76.         <h2 class="caption">商品信息表</h2>
  77.         <div class="box">
  78.             <ul>
  79.                 <li class="thead">编号</li>
  80.                 <li class="thead">名称</li>
  81.                 <li class="thead">单价(元)</li>
  82.                 <li class="thead">数量</li>
  83.                 <li class="thead">金额(元)</li>
  85.                 <li>1</li>
  86.                 <li>铅笔</li>
  87.                 <li>1</li>
  88.                 <li class="rowspan1">3</li>
  89.                 <li class="rowspan1">3</li>
  91.                 <li class="tbody2">2</li>
  92.                 <li class="tbody2">橡皮</li>
  93.                 <li class="tbody2">1</li>
  95.                 <li class="tbody3">3</li>
  96.                 <li class="tbody3">文具盒</li>
  97.                 <li class="tbody3-rest">10</li>
  98.                 <li class="tbody3-rest">1</li>
  99.                 <li class="tbody3-rest">10</li>
  101.                 <li class="tfoot" style="width: 302px;">合计:</li>
  102.                 <li class="tfoot">4</li>
  103.                 <li class="tfoot">13</li>
  104.             </ul>
  105.         </div>
  106.     </div>
  107. </body>

6.(选做): 将圣杯布局中的左右二列,使用绝对定位来实现

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>圣杯布局左右二列:绝对定位</title>
  4.     <style>
  5.         body {
  6.             text-align: center;
  7.         }
  9.         header, footer {
  10.             height: 30px;
  11.             background-color: lightyellow;
  12.             line-height: 30px;
  13.         }
  15.         main {
  16.             box-sizing: border-box;
  17.             /*给左右边栏预留空间*/
  18.             padding-left: 100px;
  19.             padding-right: 100px;
  21.             overflow: auto;
  22.             /*子元素有绝对定位时，祖先元素需设置定位属性(除static定位)*/
  23.             /*最靠近的第一个祖先元素就是该子元素的参照物*/
  24.             position: relative;
  25.         }
  26.         main > article {
  27.             box-sizing: border-box;
  28.             background-color: lavender;
  29.             width: 100%;
  30.             min-height: 100px;
  31.             line-height: 100px;
  32.         }
  34.         /*左右侧通用样式*/
  35.         main > aside {
  36.             box-sizing: border-box;
  37.             width: 100px;
  38.             min-height: 100px;
  39.             line-height: 100px;
  40.         }
  41.         main > aside:first-of-type {
  42.             background-color: lightcyan;
  43.         }
  44.         main  > aside:last-of-type {
  45.             background-color: lightpink;
  46.         }
  48.         /*主体区内容全部浮动*/
  49.         article, aside {
  50.             float: left;
  51.         }
  53.         /*绝对定位*/
  54.        main > aside:first-of-type {
  55.             position: absolute;
  56.             left: 0;
  57.         }
  58.         main > aside:last-of-type {
  59.             position: absolute;
  60.             right: 0;
  61.         }
  62.     </style>
  63. </head>
  65. <body>
  66.     <header>头部</header>
  68.     <main>
  69.         <article>主体内容区</article>
  70.         <aside>左侧</aside>
  71.         <aside>右侧</aside>
  72.     </main>
  74.     <footer>底部</footer>
  75. </body>

7.(选做): 与圣杯类似的”双飞翼”布局如何实现,并实例演示

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>双飞翼</title>
  4.     <style>
  5.         header, footer {
  6.             height: 30px;
  7.             background-color: lightyellow;
  8.             text-align: center;
  9.             /*与高度值一致，垂直居中*/
  10.             line-height: 30px;
  11.         }
  12.         /*主体*/
  13.         main {
  14.             box-sizing: border-box;
  15.             overflow: hidden;
  16.         }
  17.         main > article {
  18.             box-sizing: border-box;
  19.             width: 100%;
  20.             background-color: lavender;
  21.             min-height: 100px;
  22.             line-height: 100px;
  23.         }
  25.         main > aside {
  26.             box-sizing: border-box;
  27.             width: 100px;
  28.             min-height: 100px;
  29.             line-height: 100px;
  30.         }
  32.         /*主体区内容全部浮动*/
  33.         article, aside {
  34.             float: left;
  35.         }
  37.         main > aside:first-of-type {
  38.             background-color: lightcyan;
  39.             margin-left: -100%;
  40.         }
  41.         main  > aside:last-of-type {
  42.             background-color: lightpink;
  43.             margin-left: -100px;
  44.         }
  46.         /*设置左右外边框，使其不被左右侧区块盖住*/
  47.         .center {
  48.             margin: 0 100px;
  49.         }
  50.     </style>
  51. </head>
  53. <body>
  54.     <header>头部</header>
  55.     <main>
  56.         <article><div class="center">内容区</div></article>
  57.         <aside>左侧</aside>
  58.         <aside>右侧</aside>
  59.     </main>
  61.     <footer>底部</footer>
  62. </body>

作业手抄


总结：CSS完成表格，圣杯布局的方法很多样，很灵活，条条大陆通罗马。

Correction status：qualified

Teacher's comments：你的进度有点慢
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post