点击刷新
前端之前已学一部分，这里主要作复习和补充
重点做三个案例来熟悉html：
1.文本标签练习：
效果图：
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>黑马旅游网</title> </head> <body> <h1>公司简介</h1><!--标题大小标签--> <hr color="#ffd700"><!--水平线--> <p><font color="ff0000">第一段之换色标签</font>，<strong><i>第一段之加粗斜体标签</i></strong>，第一段其他内容。</p> <p>第二段内容。</p> <p>第三段内容。</p> <p>第四段内容。</p> <hr color="#ffd700"> <center><font color="gray" size="2">下方水印1，居中显示，灰色小字©<br/><!--换行标签--> 下方水印2，居中显示，灰色小字</font></center> </body> </html>
2.表格练习
遇到表格结构比较复杂的情况，不要使用合并行或者合并列的属性，而是用表格的嵌套来实现。
也就是说，一行一行地写，每行如果有多格，就嵌套一个几列的表格。
实现一个机构如下的表格：
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>黑马旅游网</title> </head> <body> <table width="100%" align="center"> <!--第1行--> <tr><td><center>亲子周边旅游节</center></td></tr> <!--第2行--> <tr><td><table width="100%" align="center"><tr> <td>公司所有 </td> <td>搜索 </td> <td>客服热线 </td> </tr></table></td></tr> <!--第3行--> <tr><td><table width="100%" align="center"><tr bgcolor="#ffd700" align="center" height="45"> <td>首页 </td> <td>门票 </td> <td>酒店 </td> <td>香港车票 </td> <td>出境游 </td> <td>国内游 </td> <td>港澳游 </td> <td>抱团定制 </td> <td>全国自由行 </td> <td>收藏排行榜 </td> </tr></table></td></tr> <!--第4行--> <tr><td><center>玉龙雪山：洗涤心灵的旅程</center></td></tr> <tr></tr> <!--第5行--> <tr><td>精选</td></tr> <!--第6行--> <tr><td><table align="center" width="95%"><tr> <td>精选1 </td> <td>精选2 </td> <td>精选3 </td> <td>精选4 </td> </tr></table></td></tr> <!--第7行--> <tr><td>国内游</td></tr> <!--第8行--> <tr> <td> <table align="center" width="95%"> <tr> <td rowspan="2">舌尖上的韩国：南部篇</td> <td>方案1</td> <td>方案2</td> <td>方案3</td> </tr> <tr> <td>方案4</td> <td>方案5</td> <td>方案6</td> </tr> </table> </td> </tr> <!--第9行--> <tr><td>境外游</td></tr> <!--第10行--> <tr> <td> <table align="center" width="95%"> <tr> <td rowspan="2">特价旅游频道</td> <td>特价1</td> <td>特价2</td> <td>特价3</td> </tr> <tr> <td>特价4</td> <td>特价5</td> <td>特价6</td> </tr> </table> </td> </tr> <!--第11行--> <tr><td><table><tr> <td>产品齐全 </td> <td>便利快捷 </td> <td>安全支付 </td> <td>贴心服务 </td> </tr></table></td></tr> <!--第12行--> <tr><td align="center" bgcolor="#ffd700" height="40">版权所有</td></tr> </table> </body> </html>
© 著作权归作者所有
举报
相关热门文章
发表评论
0/200
