search

博客列表 >浮动定位与布局--PHP九期线上班

浮动定位与布局--PHP九期线上班

丁磊
丁磊原创
2019年11月14日 23:17:52596浏览

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

HTML部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>商品信息表</title>
  6.     <link rel="stylesheet" href="css/style1.css">
  7. </head>
  8. <body>
  9. <table>
  10.     <!--    标题-->
  11.     <caption>商品信息表</caption>
  12.     <!--    表头-->
  13.     <thead>
  14.     <tr>
  15.         <th>***</th>
  16.         <th>名称</th>
  17.         <th>规格</th>
  18.         <th>单位</th>
  19.         <th>零售价</th>
  20.     </tr>
  21.     </thead>
  22.     <!--    主体-->
  23.     <tbody>
  24.     <tr>
  25.         <td rowspan="3"> 面</td>
  26.         <td>小麦粉</td>
  27.         <td>10kg</td>
  28.         <td>袋</td>
  29.         <td>52.8</td>
  30.     </tr>
  31.     <tr>
  32.         <td>雪花粉</td>
  33.         <td>10kg</td>
  34.         <td>袋</td>
  35.         <td>68</td>
  36.     </tr>
  37.     <tr>
  38.         <td>荞面</td>
  39.         <td>散装</td>
  40.         <td>500克</td>
  41.         <td>3.8</td>
  42.     </tr>
  43.     <tr>
  44.         <td rowspan="3"> 米</td>
  45.         <td>皇家贡米</td>
  46.         <td>10kg</td>
  47.         <td>袋</td>
  48.         <td>98</td>
  49.     </tr>
  50.     <tr>
  51.         <td>东北大米</td>
  52.         <td>10kg</td>
  53.         <td>袋</td>
  54.         <td>72.8</td>
  55.     </tr>
  56.     <tr>
  57.         <td>小米</td>
  58.         <td>散装</td>
  59.         <td>500克</td>
  60.         <td>7.8</td>
  61.     </tr>
  62.     </tbody>
  63.     <tfoot>
  64.     <tr>
  65.         <td colspan="5">大润发超市</td>
  66.     </tr>
  67.     </tfoot>
  68. </table>
  69. </body>
  70. </html>

CSS部分

  1. table {
  2.     /*直角矩形固定box尺寸*/
  3.     /*圆角矩形用border-collapse:separate*/
  4.     border-collapse: collapse;
  6.     /*border: 1px solid gray;*/
  7.     width: 700px;
  8.     box-shadow: 1px 1px 1px gray;
  9.     margin:20px auto;
  10. }
  11. table caption {
  12.     font-size: 1.3rem;
  13.     margin-bottom: 15px;
  14. }
  15. td,th {
  16.     border: 1px solid gray;
  17.     padding: 10px;
  18. }
  19. td {
  20.     /*表格内容居中显示*/
  21.     text-align: center;
  22. }
  23. /*颜色*/
  24. /*隔行变色*/
  25. table tbody tr:nth-of-type(2n+1){
  26.     background-color: lightgray;
  27. }
  28. /*表头颜色*/
  29. table thead tr:first-of-type {
  30.     background: linear-gradient(green,white);
  31. }
  32. tbody tr:first-of-type > td:first-of-type {
  33.     background: linear-gradient(to top, green,white);
  34. }
  35. tbody tr:nth-last-of-type(3) > td:first-of-type {
  36.     background: linear-gradient(to right, green, white);
  37. }

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

HTML部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="css/style2.css">
  7. </head>
  8. <body>
  9. <article class="table">
  10.        <h2 class="caption">课程表</h2>
  11.     <div class="thead">
  12.         <ul>
  13.             <li>时间</li>
  14.             <li>星期一</li>
  15.             <li>星期二</li>
  16.             <li>星期三</li>
  17.             <li>星期四</li>
  18.             <li>星期五</li>
  19.         </ul>
  20.     </div>
  21.     <div class="tbody">
  22.         <ul>
  23.             <li>8:00</li>
  24.             <li>语文</li>
  25.             <li>语文</li>
  26.             <li>语文</li>
  27.             <li>语文</li>
  28.             <li>语文</li>
  29.         </ul>
  30.         <ul>
  31.             <li>9:00</li>
  32.             <li>数学</li>
  33.             <li>数学</li>
  34.             <li>数学</li>
  35.             <li>数学</li>
  36.             <li>数学</li>
  37.         </ul>
  38.         <ul>
  39.             <li>10:00</li>
  40.             <li>英语</li>
  41.             <li>英语</li>
  42.             <li>英语</li>
  43.             <li>英语</li>
  44.             <li>英语</li>
  45.         </ul>
  46.         <ul>
  47.             <li>14:00</li>
  48.             <li>历史</li>
  49.             <li>历史</li>
  50.             <li>历史</li>
  51.             <li>历史</li>
  52.             <li>历史</li>
  53.         </ul>
  54.         <ul>
  55.             <li>15:00</li>
  56.             <li>地理</li>
  57.             <li>地理</li>
  58.             <li>地理</li>
  59.             <li>地理</li>
  60.             <li>地理</li>
  61.         </ul>
  62.         <ul>
  63.             <li>16:00</li>
  64.             <li>美术</li>
  65.             <li>美术</li>
  66.             <li>美术</li>
  67.             <li>美术</li>
  68.             <li>美术</li>
  69.         </ul>
  70.     </div>
  71. </article>
  72. </body>
  73. </html>

CSS部分

  1. .table {
  2.     box-sizing: border-box;
  3.     display: table;
  5.     width: 900px;
  6.     border: gray 1px solid;
  7.     border-collapse: collapse;
  8. }
  10. .caption {
  11.     display: table-caption;
  12.     text-align: center;
  13. }
  15. .thead {
  16.     display: table-header-group;
  17.     font-weight: bold;
  18.     font-size: 1.2rem;
  19.     text-align: center;
  20.     letter-spacing: 5px;
  21.     background: linear-gradient(green, white);
  22.     color: white;
  23.     text-shadow: 1px 1px 0 black;
  24. }
  26. .tbody {
  27.     display: table-row-group;
  28.     text-align: center;
  29. }
  31. .tfoot {
  32.     display: table-footer-group;
  33.     width: 100%;
  34. }
  36. div ul {
  37.     display: table-row;
  38. }
  40. div ul li {
  41.     display: table-cell;
  42.     border: 1px solid gray;
  43.     padding: 10px;
  44. }

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

HTML部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>用户登录页面居中</title>
  6.     <link rel="stylesheet" href="css/style3.css">
  7. </head>
  8. <body>
  9. <h3>用户登录</h3>
  10. <div>
  11. <form action="">
  12.     <p>
  13.         <label for="username">用户名：</label>
  14.         <input type="text" id="username" name="username">
  15.     </p>
  17.     <p>
  18.         <label for="password">密码：</label>
  19.         <input type="password" id="password" name="password" placeholder="8位数字密码">
  20.     </p>
  22.     <p>
  23.         <input type="button" id="login" name="login" value="登录">
  24.     </p>
  25. </form>
  26. </div>
  27. </body>
  28. </html>

CSS部分

  1. h3 {
  2.     text-align: center;
  3. }
  5. body {
  6.     position: relative;
  7. }
  9. div {
  10.     border: 1px solid red;
  11.     width: 300px;
  13.     position: absolute;
  14.     left: 50%;
  15.     margin-left: -150px;
  16. }
  18. form > p:last-of-type{
  19.     text-align: center;
  20. }

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

1.给页面分区，分别为头部、底部、主体，其中主体分为左侧、右侧和主体内容区
2.css中定义头部、底部的基本属性
3.定义主体的基本属性
4.定义主体内容区的属性，高度、颜色、宽度（因为宽度随页面变化，设置为100%）
5.定义左侧、右侧的公共属性
6.设置主体内的三个元素为浮动元素
7.分别设置左侧、右侧的属性，把定位方式设置为相对定位，使侧部块位置处于主体的左上方和右上方

HTML部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>圣杯布局</title>
  6.     <link rel="stylesheet" href="css/style4.css">
  7. </head>
  8. <body>
  9. <header>头部</header>
  10. <main>
  11.     <article>主题内容区</article>
  12.     <aside>左侧</aside>
  13.     <aside>右侧</aside>
  14. </main>
  15. <footer>底部</footer>
  16. </body>
  17. </html>

CSS部分

  1. header,footer {
  2.     height: 50px;
  3.     background-color: lightgray;
  4. }
  6. main {
  7.     border: 2px solid red;
  8.     box-sizing: border-box;
  9.     padding-left: 200px;
  10.     padding-right: 200px;
  11.     /*转BFC块*/
  12.     overflow: auto;
  13. }
  15. main > article {
  16.     box-sizing: border-box;
  17.     min-height: 600px;
  18.     background-color: lightgreen;
  19.     width: 100%;
  20. }
  22. aside {
  23.     box-sizing: border-box;
  24.     min-height: 600px;
  25.     width: 200px;
  26. }
  28. main > article,
  29. main > aside:first-of-type,
  30. main > aside:last-of-type {
  31.     float: left;
  32. }
  34. main > aside:first-of-type {
  35.     background-color: lightcoral;
  36.     margin-left: -100%;
  37.     /*相对定位*/
  38.     position: relative;
  39.     left: -200px;
  40. }
  42. main > aside:last-of-type {
  43.     background-color: lightblue;
  44.     margin-left: -200px;
  45.     /*相对定位*/
  46.     position: relative;
  47.     left: 200px;
  48. }

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

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

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

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

相关文章

查看更多