简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 浮动定位于布局（第五章 11月1日-11月3日作业）-PHP培训九期线上班
Blogger Information
Blog 8
fans 0
comment 0
visits 4897
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
浮动定位于布局（第五章 11月1日-11月3日作业）-PHP培训九期线上班
yany
Original
555 people have browsed it

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

代码：
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.     <caption>商品信息表</caption>
  11.     <thead>
  12.         <tr>
  13.             <th>类别</th>
  14.             <th>产品编号</th>
  15.             <th>名称</th>
  16.             <th>型号</th>
  17.             <th>产地</th>
  18.             <th>数量(KG)</th>
  19.         </tr>
  20.     </thead>
  21.     <tbody>
  22.         <tr>
  23.             <td rowspan="3">笔类<br>办公用品</td>
  24.             <td>gb001</td>
  25.             <td>中性笔</td>
  26.             <td>蓝色</td>
  27.             <td>苏州</td>
  28.             <td>100</td>
  29.         </tr>
  30.         <tr>
  31.             <td>gb002</td>
  32.             <td>中性笔</td>
  33.             <td>黑色</td>
  34.             <td>佛山</td>
  35.             <td>3580</td>
  36.         </tr>
  37.         <tr>
  38.             <td>qb003</td>
  39.             <td>自动铅笔</td>
  40.             <td>橙光全自动铅笔</td>
  41.             <td>广州</td>
  42.             <td>5000</td>
  43.         </tr>
  44.         <tr>
  45.             <td rowspan="2">其他文具类</td>
  46.             <td>xp001</td>
  47.             <td>橡皮擦</td>
  48.             <td>晨光中号</td>
  49.             <td>苏州</td>
  50.             <td>1300</td>
  51.         </tr>
  52.         <tr>
  53.             <td>xz001</td>
  54.             <td>修正液</td>
  55.             <td>真彩速干</td>
  56.             <td>南京</td>
  57.             <td>8400</td>
  58.         </tr>
  59.     </tbody>
  60.     <tfoot>
  61.         <tr>
  62.             <td colspan="5" align="center">合计：</td>
  63.             <td>18380</td>
  64.         </tr>
  65.     </tfoot>
  66. </table>
  68. </body>
  69. </html>

css:

  1. table{
  2.     border:1px solid black;
  3.     box-sizing: border-box;
  4.     border-collapse: collapse;
  5.     width: 700px;
  6.     height: 300px;
  7.     margin: 50px auto;
  8. }
  9. table caption{
  10.     font-size: 1.5rem;
  11.     margin-bottom: 20px;
  12. }
  13. thead{
  14.     background: linear-gradient(lightblue,pink);
  15. }
  16. th,td{
  17.     border: 1px solid gray;
  18.     text-align: center;
  19. }
  20. tbody tr:nth-of-type(odd){
  21.     background-color: lightcyan;
  22. }
  23. table tbody>tr:first-of-type>td:first-of-type{
  24.     background-color: white;
  25. }
  26. table tfoot{
  27.     background:linear-gradient(lightgreen,white);
  28. }

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

代码：
html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>课程表</title>
  6.     <link rel="stylesheet" href="css/style110102.css"
  7. </head>
  8. <body>
  9. <article class="table">
  10.     <h2 class="caption">课程表</h2>
  11.     <div class="thead">
  12.         <p>
  13.             <span>序号</span>
  14.             <span>星期一</span>
  15.             <span>星期二</span>
  16.             <span>星期三</span>
  17.             <span>星期四</span>
  18.             <span>星期五</span>
  19.         </p>
  20.     </div>
  21.     <div class="tbody">
  22.         <p>
  23.             <span>1</span>
  24.             <span>语文</span>
  25.             <span>数学</span>
  26.             <span>英语</span>
  27.             <span>英语</span>
  28.             <span>体育</span>
  29.         </p>
  30.         <p>
  31.             <span>2</span>
  32.             <span>语文</span>
  33.             <span>数学</span>
  34.             <span>英语</span>
  35.             <span>英语</span>
  36.             <span>体育</span>
  37.         </p>
  38.         <p>
  39.             <span>3</span>
  40.             <span>语文</span>
  41.             <span>数学</span>
  42.             <span>英语</span>
  43.             <span>英语</span>
  44.             <span>体育</span>
  45.         </p>
  46.         <p>
  47.             <span>4</span>
  48.             <span>语文</span>
  49.             <span>数学</span>
  50.             <span>英语</span>
  51.             <span>英语</span>
  52.             <span>体育</span>
  53.         </p>
  54.         <p>
  55.             <span>5</span>
  56.             <span>语文</span>
  57.             <span>数学</span>
  58.             <span>英语</span>
  59.             <span>英语</span>
  60.             <span>体育</span>
  61.         </p>
  62.     </div>
  63.     <div class="tfoot">
  64.         <p>
  65.             <span>备注:值日生</span>
  66.             <span>同学1</span>
  67.             <span>同学2</span>
  68.             <span>同学3</span>
  69.             <span>同学4</span>
  70.             <span>同学5</span>
  71.         </p>
  72.     </div>
  75. </article>    
  76. </body>
  77. </html>

css:

  1. .table{
  2.     display: table;
  3.     box-sizing: border-box;
  4.     border-collapse: collapse;
  5.     border:1px solid #444;
  6.     width:800px;
  7.     margin:auto;
  8.     color:#444;
  9. }
  10. .caption{
  11.     display: table-caption;
  12.     text-align: center;
  13. }
  14. .thead{
  15.     display: table-header-group;/*以表头的形式显示*/
  16.     text-align: center;
  17.     font-weight: bold;     /*表头加粗*/
  18.     font: size 1.2rem;
  19.     letter-spacing: 5px;     /*字间距*/
  20.     background:linear-gradient(blue,white);
  21.     color:white;
  22.     text-shadow: 1px 1px 0 blck;/*水平方向偏移、垂直方向、虚化*/
  23. }
  24. .tbody{
  25.     display: table-row-group;/*以表格主体形式显示*/
  26. }
  27. .tbody>p>span:first-of-type{
  28.     text-align: center;    /*将第一列居中*/
  30. }
  32. div p{
  33.     display: table-row;          /*将所有的ul转换为行*/
  34. }
  35. div p span{
  36.     display: table-cell;       /*将所有的li转为单元格*/
  37.     border:1px solid #444;
  38.     padding:10px;
  39.     text-align: center;
  40. }
  41. .tfoot{
  42.     display:table-footer-group;
  43.     background-color: gainsboro;
  44. }

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

代码：
html:

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

css:

  1. div{
  2.     width: 230px;
  3.     height: 180px;
  4.     border: 1px solid gainsboro;
  5. }
  6. div{
  7.     position: absolute;
  8.     left: 50%;
  9.     right: 50%;
  10.     top: 50%
  11. }
  12. body{
  13.     border: 1px solid gainsboro;
  14.     position: relative;
  15.     height: 1000px;
  16.     background-color: honeydew;
  17. }
  18. div{
  19.     position: fixed;
  20. }

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

模拟案例实现圣杯布局：
html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>圣杯布局</title>
  6.     <link rel="stylesheet" href="css/style110106.css"
  7. </head>
  8. <body>
  9. <header>年终大促</header>
  10. <main>
  11.     <article>活动区</article>
  12.     <aside>
  13.         <div>服装</div>
  14.         <div>化妆品</div>
  15.         <div>食品</div>   
  16.     </aside>
  17.     <aside>
  18.         <div>会员登录</div>
  19.         <div>最新活动</div>
  20.         <div>下载APP</div> 
  21.     </aside>
  22. </main>
  23. <footer>中文网</footer>
  25. </body>
  26. </html>

css:

  1. body{
  2.     width:1000px;
  3. }
  4. header,footer{
  5.     height: 60px;
  6.     background-color: lavender;
  7.     text-align: center;
  8. }
  9. main{
  10.     padding-left: 200px;
  11.     padding-right: 200px; /*给左右边栏预留空间*/
  12.     box-sizing: border-box;
  13.     overflow: hidden;
  14. }
  15. main>article{
  16.     box-sizing: border-box;
  17.     background-image: url(flower.jpg);
  18.     width: 100%;
  19.     min-height: 600px;
  20. }
  21. main>aside{
  22.     box-sizing: border-box;
  23.     min-height: 600px;
  24.     width: 200px;
  25. }
  26. main>aside:first-of-type{
  27.     background-color: lightcyan;
  28.     margin-left:-100%;
  29.     position: relative;
  30.     left: -200px;
  31. }
  32. main>aside:last-of-type{
  33.     background-color: lightskyblue;
  34.     margin-left: -200px;
  35.     position: relative;
  36.     left:200px;
  37. }
  38. main>article,
  39. main>aside:first-of-type,
  40. main>aside:last-of-type{
  41.     float: left;
  42. }

流程与布局思路：
先用HTML写出框架的主体内容：包含头部、主体、页脚信息；主体内容布局时，分为左侧导航栏、中间活动主体区及右侧内容区，为使显示屏幕向左右缩窄时，先从右边屏幕内容开始部分显示，布局时，将中间区域写在左、右侧边栏前；框架布局好后，用css布局来让框架内容按照圣杯布局的样式展现；写css时，按照头部、页脚、主体内容的顺序设置，其中主体部分的布局思路为，左右两侧边栏可以看成是两个盒子，为左右两侧设置padding值，挤出中间部分，为让盒子的大小自适应设置的框架大小，为盒子设置box-sizing，再分别设置中间、左右侧的边框、颜色、宽高、位置，在设置左右侧边栏的位置时，用相对位置设置，最后设置主体区浮动，并让其在屏幕框架内，设置overflow属性，并在css设置开头设置body的宽度，这样保证布局在缩放的情况下正常显示。

Correcting teacher：天蓬老师天蓬老师

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！