简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >CSS基础之表格控制、元素浮动定位、元素定位 九期第五课

CSS基础之表格控制、元素浮动定位、元素定位 九期第五课

叮叮当当
叮叮当当原创
2019年11月06日 14:41:391070浏览

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完成表格，圣杯布局的方法很多样，很灵活，条条大陆通罗马。

上一条：flex弹性容器下一条：1104作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多