search

博客列表 >11月1日、2日、3日练习作业-***九期线上班

11月1日、2日、3日练习作业-***九期线上班

邯郸易住宋至刚
邯郸易住宋至刚原创
2019年11月11日 10:44:05519浏览

一、制作一个表格

要求：用到行与列的合并

HTML代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>商品信息表</title>
  6.     <link rel="stylesheet" href="static/css/table.css">
  7. </head>
  8. <body>
  9. <div>
  10.     <table class="table">
  11.         <!--表格标题-->
  12.         <caption>
  13.             <h2>华为手机信息表</h2>
  14.         </caption>
  15.         <!--表头-->
  16.         <thead>
  17.         <tr>
  18.             <th>品  牌</th>
  19.             <th>系  列</th>
  20.             <th>模  式</th>
  21.             <th>主要配置</th>
  22.             <th>特色描述</th>
  23.             <th>价  格</th>
  24.         </tr>
  25.         </thead>
  26.         <!--表格主体-->
  27.         <tbody>
  28.         <tr>
  29.             <td rowspan="5">华为HUAWEI</td>
  30.             <td>Mate 30 Pro</td>
  31.             <td>5G</td>
  32.             <td>8GB+256GB</td>
  33.             <td>亮黑色 超曲面环幕屏 麒麟990智慧***片 4000万徕卡四摄 移动联通电信5G全网通手机</td>
  34.             <td>6899</td>
  35.         </tr>
  36.         <tr>
  37.             <td>Mate 30</td>
  38.             <td>5G</td>
  39.             <td>8GB+256GB</td>
  40.             <td>星河银 麒麟990智慧***片 4000万徕卡摄像 OLED全面屏 移动联通电信5G全网通手机</td>
  41.             <td>5499</td>
  42.         </tr>
  43.         <tr>
  44.             <td>畅享10</td>
  45.             <td>4G</td>
  46.             <td>6GB+64GB</td>
  47.             <td>幻夜黑 极点全面屏 4800万超清夜景 移动联通电信4G全面屏全网通手机</td>
  48.             <td>1399</td>
  49.         </tr>
  50.         <tr>
  51.             <td>nova 5z</td>
  52.             <td>4G</td>
  53.             <td>麒麟810***片</td>
  54.             <td>4800万AI四摄 前置3200万人像超级夜景 6GB+128GB 幻夜黑 移动联通电信4G拍照全网通手机</td>
  55.             <td>1799</td>
  56.         </tr>
  57.         <tr>
  58.             <td>nova 5i</td>
  59.             <td>4G</td>
  60.             <td>后置AI四摄</td>
  61.             <td>极点全面屏 8GB+128GB 烟雨青蓝 移动联通电信4G拍照全网通手机</td>
  62.             <td>1999</td>
  63.         </tr>
  64.         </tbody>
  65.         <!--表格底部-->
  66.         <tfoot>
  67.             <tr>
  68.                 <td>备  注</td>
  69.                 <td colspan="5">质优价廉，服务周到，欢迎选购</td>
  70.                 <!--<td></td>
  71.                 <td></td>
  72.                 <td></td>-->
  73.             </tr>
  74.         </tfoot>
  75.     </table>
  76. </div>
  77. </body>
  78. </html>

CSS代码如下：

  1. /*给表格添加上表格框*/
  2. table {
  3.     /*因为单元格也要设置边框,并且会用到边框折叠,所以表格外框可选*/
  4.     border: 1px solid #444444;
  5.     color: #444;
  6.     /*设置盒子大小不受影响*/
  7.     box-sizing: border-box;
  8.     /*设置边线阴影*/
  9.     /*阴影四个属性：1、水平方向 2、垂直方向 3、扩散大小 4、颜色*/
  10.     box-shadow: 1px 1px 1px #999;
  11.     /*将表格中所有的边框线进行折叠*/
  12.     border-collapse: collapse;
  13. }
  15. /*给每一个单元格也加上边框, 单元格包括td,th*/
  16. th, td {
  17.     border: 1px solid #444444;
  18. }
  20. /*设置表格的宽度与文字排版*/
  21. table {
  22.     width: 900px;
  23.     margin: 20px auto;
  24. }
  26. /*设置表格的标题*/
  27. table caption {
  28.     font-size: 1.3rem;
  29.     margin-bottom: 15px;
  30. }
  32. /*设置单元格的样式*/
  33. th, td {
  34.     text-align: center;
  35.     padding: 10px;
  36. }
  38. /*在奇数行上实现隔行变色效果*/
  39. tbody tr:nth-of-type(2n+1) {
  40.     background-color: #ededed;
  41. }
  43. /*设置表头样式：背景色线性渐变*/
  44. table thead > tr:first-of-type {
  45.     background: linear-gradient(lightgreen, honeydew);
  46. }
  48. /*设置底部样式：背景色径向渐变*/
  49. table tfoot > tr:last-of-type {
  50.     background: radial-gradient(yellow, white);
  51. }
  53. /*给***单元素格添加小麦色背景*/
  54. table tbody > tr:first-of-type > td:first-of-type {
  55.     background: radial-gradient(lightcoral, white);
  56. }

运行结果如下图：

手抄代码如下：

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

HTML代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>用div等标签创建表格</title>
  6.     <link rel="stylesheet" href="static/css/table2.css">
  7. </head>
  8. <body>
  9. <div class="table">
  10.     <p class="caption">第九期课程安排</p>
  11.     <div class="thead">
  12.         <ul>
  13.             <li>序号</li>
  14.             <li>课程</li>
  15.             <li>描述</li>
  16.         </ul>
  17.     </div>
  18.     <div class="tbody">
  19.         <ul>
  20.             <li>1</li>
  21.             <li>前端开发基础</li>
  22.             <li>HTML5常用标签,CSS3样式控制与页面布局</li>
  23.         </ul>
  24.         <ul>
  25.             <li>2</li>
  26.             <li>PHP开发基础</li>
  27.             <li>PHP语法,类与对象,常用开发技术与案例</li>
  28.         </ul>
  29.         <ul>
  30.             <li>3</li>
  31.             <li>大型CMS开发实战</li>
  32.             <li>Laravel开发基础,Laravel开发CMS全程精讲</li>
  33.         </ul>
  34.     </div>
  35.     <div class="tfoot">
  36.         <ul>
  37.             <li>备注:</li>
  38.             <li>全程直播教学</li>
  39.             <li><span>每晚20:00 - 22:00(节假日除外)</span></li>
  40.         </ul>
  41.     </div>
  42. </div>
  43. </body>
  44. </html>

CSS样式代码如下：

  1. .table {
  2.     display: table;
  3.     box-sizing: border-box;
  4.     border: 1px solid #444444;
  5.     box-shadow: 1px 1px 1px grey;
  6.     border-collapse: collapse;
  8.     width: 650px;
  9.     margin: 20px auto;
  10.     color: #0C9A9A;
  11. }
  13. .caption {
  14.     /*以caption样式标签显示*/
  15.     display: table-caption;
  16.     text-align: center;
  17.     font-size: 1.5rem;
  18.     font-weight: bold;
  19. }
  21. .thead {
  22.     /*以thead样式显示*/
  23.     display: table-header-group;
  24.     text-align: center;
  25.     font-size: 1.2rem;
  26.     font-weight: bold;
  27.     letter-spacing: 5px;
  28.     color: white;
  29.     text-shadow: 1px 1px 0 black;
  30.     background: linear-gradient(green,white);
  31. }
  33. .tbody {
  34.     display: table-row-group;
  35. }
  37. /*将第一列文本居中对齐显示*/
  38. .tbody >ul >li:first-of-type {
  39.     text-align: center;
  40. }
  42. .tfoot {
  43.     display: table-footer-group;
  44.     background-color: #ededed;
  45. }
  47. /*将所有的<ul>转为<tr>标签样式*/
  48. div > ul {
  49.     display: table-row;
  50. }
  52. /*将所有的<li>转为<td>标签样式*/
  53. div > ul > li {
  54.     display: table-cell;
  55.     border: 1px solid #444;
  56.     padding: 10px;
  57. }

运行结果如下图：

手抄代码如下：

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

HTML代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>centerlongin</title>
  6.     <link rel="stylesheet" href="static/css/centerlogin.css">
  7. </head>
  8. <body>
  9. <div>
  10.     <form action="">
  11.         <span>
  12.             <p>username</p>
  13.             <input type="text" id="user" name="user" value="username">
  14.         </span>
  15.         <span>
  16.             <p>password</p>
  17.             <input type="password" id="password" name="password" placeholder="password">
  18.         </span>
  19.         <span>
  20.             <p>login</p>
  21.             <input type="submit" id="login" name="login">
  22.         </span>
  23.     </form>
  24. </div>
  25. </body>
  26. </html>

CSS代码如下：

  1. body {
  2.     height: 1600px;
  3.     width: 3000px;
  4. }
  5. div {
  6.     width: 400px;
  7.     height: 260px;
  8.     background-color: deepskyblue;
  9.     border: 1px solid grey;
  11.     color: white;
  12.     text-shadow: 1px 1px 1px beige;
  13.     box-shadow: 1px 1px 1px grey;
  15.     box-sizing: border-box;
  16.     padding-left: 60px;
  18.     position: fixed;
  19.     left: 50%;
  20.     top: 50%;
  21.     margin-top: -200px;
  22.     margin-left: -200px;
  23. }

运行结果如下图：

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

HTML代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>saintcup</title>
  6.     <link rel="stylesheet" href="static/css/saintcup.css">
  7. </head>
  8. <body>
  9. <header>header</header>
  10. <main>
  11.     <article>article</article>
  12.     <aside>left</aside>
  13.     <aside>right</aside>
  14. </main>
  15. <footer>footer</footer>
  16. </body>
  17. </html>

CSS代码如下：

  1. body {
  2.     width: 1000px;
  3.     border: 1px solid lightslategrey;
  4.     position: absolute;
  5. }
  7. header,footer {
  8.     height: 40px;
  9.     width: 100%;
  10.     border: 1px solid grey;
  12.     background-color: lightgray;
  13.     text-align: center;
  14.     line-height: 40px;
  15. }
  17. main {
  18.     box-sizing: border-box;
  19.     border: 1px solid red;
  20.     padding-left: 200px;
  21.     padding-right: 200px;
  22. }
  24. main > article {
  25.     width: 100%;
  26.     min-height: 600px;
  27.     background-color: lightgreen;
  28.     box-sizing: border-box;
  29. }
  31. main > aside {
  32.     width: 200px;
  33.     min-height: 600px;
  34.     border: 1px solid orange;
  35.     box-sizing: border-box;
  36. }
  38. main > aside:first-of-type {
  39.     background-color: lightcyan;
  40.     position: absolute;
  41.     top: 43px;
  42.     left: 0;
  43. }
  45. main > aside:last-of-type {
  46.     background-color: lightpink;
  47.     position: absolute;
  48.     top: 43px;
  49.     right: 0;
  50. }

运行结果如下图：

上一条：1106左右，三个小案例。下一条：实例演示属性，方法重载--实例演示回调--.实例演示数据库链接调用-1008
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多