Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1.上手练习 2. 预习css知识
Blogger Information
Blog 15
fans 0
comment 0
visits 8950
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
1.上手练习 2. 预习css知识
⁶
Original
337 people have browsed it

. 将课堂介绍过的<a>,<img><ul>,<table>,<iframe>的案例,全部上机练习,并自己扩展一些案例,发布到作业博客中;

标签<a>

跳转到站外

  1. <a href="https://www.taobao.com/">京东</a>
  2. <a href="跳转地址"><img src="图片名称"  /></a>
  3. <a href="跳转地址">文字跳转</a>

标签<img>

  1. <img src="图片地址">
  2. <img src="图片名称" alt="" />

标签<ul>

  1.   <!--1,有序列表-->
  2.     <h3>东京奥运奖牌榜</h3>
  3.     <ol>
  4.       <li>美国:113</li>
  5.       <li>中国:88</li>
  6.       <li>日本:58</li>
  7.     </ol>
  8.      <!--2,有序列表-->
  9.     <h3>购物车</h3>
  10.     <ul>
  11.       <li>笔记本电脑一台</li>
  12.       <li>蓝牙耳机一副</li>
  13.       <li>卫生纸10卷</li>
  14.     </ul>
  15.     <ul class="menu" style="display: flex; place-content: space-around">
  16.       <li class="item"><a href="">首页</a></li>
  17.       <li class="item"><a href="">教学视频</a></li>
  18.       <li class="item"><a href="">社区问答</a></li>
  19.       <li class="item"><a href="">资源下载</a></li>
  20.       <li class="item"><a href="">关于我们</a></li>
  21.     </ul>

标签<table>

  1. <table width="1000" border="1">
  2.       <!--标题-->
  3.       <caption>
  4.         表格标题
  5.       </caption>
  7.       <!--表头-->
  8.       <thead>
  9.         <tr bgcolor="lightgreen">
  10.           <td>X</td>
  11.           <td>X</td>
  12.           <td>X</td>
  13.           <td>X</td>
  14.           <td>X</td>
  15.           <td>X</td>
  16.         </tr>
  17.       </thead>
  18.       <!--表格中的所有数据必须放在单元格td的元素中，必须写到tr中-->
  19.       <!--表格主体-->
  20.       <tbody>
  21.         <tr>
  22.           <td>X</td>
  23.           <td>X</td>
  24.           <td>X</td>
  25.           <td>X</td>
  26.           <td>X</td>
  27.           <td>X</td>
  28.         </tr>
  29.         <tr>
  30.           <td>X</td>
  31.           <td>X</td>
  32.           <td>X</td>
  33.           <td>X</td>
  34.           <td>X</td>
  35.           <td>X</td>
  36.         </tr>
  37.         <tr>
  38.           <td>X</td>
  39.           <td>X</td>
  40.           <!--从表体2行3列开始水平方向合并3列-->
  41.           <td bgcolor="red" colspan="3">X</td>
  42.           <!---<td>X</td>
  43.           <td>X</td>--->
  44.           <td>X</td>
  45.         </tr>
  46.         <tr>
  47.           <td>X</td>
  48.           <td bgcolor="violet" rowspan="2">X</td>
  49.           <td>X</td>
  50.           <td>X</td>
  51.           <td>X</td>
  52.           <td>X</td>
  53.         </tr>
  54.       </tbody>
  55.       <!--注意2点；合并操作一定是发生在 单元格上td元素-->
  57.       <!--合并属性colspan，rowspan，一定要写到被合并的起始单元格上-->
  58.       <tfoot>
  59.         <tr>
  60.           <td>X</td>
  61.           <td>X</td>
  62.           <td>X</td>
  63.           <td>X</td>
  64.           <td>X</td>
  65.           <td>X</td>
  66.         </tr>
  67.       </tfoot>
  68.     </table>
  69.     <table border="1" width="1000">
  70.       <hr />
  71.       <caption>
  72.         合肥市南门小学五年级课程表
  73.       </caption>
  74.       <thead bgcolor="lightgreen">
  75.         <tr>
  76.           <td>时间</td>
  77.           <td>周一</td>
  78.           <td>周二</td>
  79.           <td>周三</td>
  80.           <td>周四</td>
  81.           <td>周五</td>
  82.         </tr>
  83.       </thead>
  84.       <!--上午-->
  85.       <tbody>
  86.         <tr>
  87.           <td rowspan="4">上午</td>
  88.           <td>数学</td>
  89.           <td>数学</td>
  90.           <td>数学</td>
  91.           <td>数学</td>
  92.           <td>数学</td>
  93.         </tr>
  94.         <tr>
  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.         </tr>
  108.         <tr>
  109.           <td>数学</td>
  110.           <td>数学</td>
  111.           <td>数学</td>
  112.           <td>数学</td>
  113.           <td>数学</td>
  114.         </tr>
  115.       </tbody>
  116.       <!--中午-->
  117.       <tbody>
  118.         <tr>
  119.           <td colspan="6">中午休息</td>
  120.         </tr>
  121.       </tbody>
  122.       <!--下午-->
  123.       <tbody></tbody>
  125.       <tbody>
  126.         <tr>
  127.           <td rowspan="3">下午</td>
  128.           <td>数学</td>
  129.           <td>数学</td>
  130.           <td>数学</td>
  131.           <td>数学</td>
  132.           <td>数学</td>
  133.         </tr>
  134.         <tr>
  135.           <td>数学</td>
  136.           <td>数学</td>
  137.           <td>数学</td>
  138.           <td>数学</td>
  139.           <td>数学</td>
  140.         </tr>
  141.         <tr>
  142.           <td>数学</td>
  143.           <td>数学</td>
  144.           <td>数学</td>
  145.           <td>数学</td>
  146.           <td>数学</td>
  147.         </tr>
  148.       </tbody>
  149.       <tfoot>
  150.         <tr>
  151.           <td>备注:</td>
  152.           <td colspan="5">每天下午15:30-17:30在校写作业</td>
  153.         </tr>
  154.       </tfoot>
  155.     </table>

标签<iframe>

  1. <body>
  2.     <h2><a href="https://www.taobao.com/" target="taobao">淘宝</a></h2>
  3.     <iframe
  4.       srcdoc="<em>点击上面的链接打开</ em>"
  5.       frameborder="1"
  6.       width="400"
  7.       height="400"
  8.       name="taobao"
  9.     ></iframe>
  10.     <hr />
  11.   </body>
  1.     <!--右侧内容区-->
  2.     <iframe
  3.       srcdoc="<P>请点击左边菜单栏打开</P>"
  4.       frameborder="0"
  5.       name="content"
  6.     ></iframe>

2. 预习css知识

什么是CSS？

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

Correcting teacher：PHPzPHPz

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