简体中文（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

博客列表 >浮动定位于布局（第五章 11月1日-11月3日作业）-PHP培训九期线上班

浮动定位于布局（第五章 11月1日-11月3日作业）-PHP培训九期线上班

yany
yany原创
2019年12月09日 23:11:02542浏览

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的宽度，这样保证布局在缩放的情况下正常显示。

上一条：12月05日：设计模式与依赖注入面向接口编程下一条：12-9文件上传处理
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多