博主信息
博文 14
粉丝 0
评论 0
访问量 10238
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
第二课 站内布局、a标签、列表、表格与布局、内联框架标签的案例
清风King
原创
502人浏览过

一、站内布局

  1. <!-- 采用div+css模式 -->
  2. <div class="header">header</div>
  3. <div class="main">main</div>
  4. <div class="class">footer</div>

二、a标签

  1. <!-- 链接 -->
  2. <!-- 1.跳转到站外 -->
  3. <a href="https://www.php.cn">php100</a>
  4. <!-- 2.在指定窗口打开 -->
  5. <!-- 方法一:在内嵌窗口直接打开 -->
  6. <iframe src="http://tmall.com" frameborder="2"></iframe>
  7. <br />
  8. <hr />
  9. <!-- 方法二:通过a标签打开 -->
  10. <a href="https://tmall.com" target="tamll">天猫</a>
  11. <br />
  12. <a href="https://www.baidu.cn" target="tamll">百度</a>
  13. <br />
  14. <iframe frameborder="2" name="tamll"></iframe>
  15. <hr />
  16. <br />
  17. <!-- 3.站内跳转 -->
  18. <a href="#hello">我要找到你</a>
  19. <h2 id="hello" style="margin-top: 100px;">你发现我了吗?</h2>
  20. <a href="">回到顶部</a>
  21. <hr />

三、列表ol、ul、li

  1. <!-- 二.列表 -->
  2. <!-- 有序列表 -->
  3. <h2>东京奥运奖牌榜</h2>
  4. <ol>
  5. <li>
  6. 美国113
  7. </li>
  8. <li>
  9. 中国:88
  10. </li>
  11. <li>
  12. 日本:58
  13. </li>
  14. </ol>
  15. <!-- 无序列表 -->
  16. <h2>购物车</h2>
  17. <ul>
  18. <li>笔记本电脑一台</li>
  19. <li>蓝牙耳机一台</li>
  20. <li>卫生纸10卷</li>
  21. </ul>
  22. </body>
  23. <hr />

用例表制作导航

  1. <ul class="menu">
  2. <li class="item"><a href="#">首页</a></li>
  3. <li class="item"><a href="">教学视频</a></li>
  4. <li class="item"><a href="">社区问答</a></li>
  5. <li class="item"><a href="">资源天下</a></li>
  6. <li class="item"><a href="">关于我们</a></li>
  7. </ul>
  8. <nav>
  9. <a href="" class="item">首页</a>
  10. <a href="" class="item">教学视频</a>
  11. <a href="" class="item">社区问答</a>
  12. <a href="" class="item">资源天下</a>
  13. <a href="" class="item">关于我们</a>
  14. </nav>

四、表格与布局

  1. <!-- 表格由table+caption+thead+tbody+tfoot组成 -->
  2. <table width="500" border="1">
  3. <captoin>表格标题</captoin>
  4. <thead>
  5. <tr>
  6. <td>X</td>
  7. <td>X</td>
  8. <td bgcolor="red" colspan="3">X</td>
  9. <!-- <td>X</td>
  10. <td>X</td> -->
  11. </tr>
  12. </thead>
  13. <tbody>
  14. <tr>
  15. <td>X</td>
  16. <td>X</td>
  17. <td bgcolor="violet" rowspan="2">X</td>
  18. <td>X</td>
  19. <td>X</td>
  20. </tr>
  21. <tr>
  22. <td>X</td>
  23. <td>X</td>
  24. <!-- <td>X</td> -->
  25. <td>X</td>
  26. <td>X</td>
  27. </tr>
  28. </tbody>
  29. <tfoot>
  30. <tr>
  31. <td>X</td>
  32. <td>X</td>
  33. <td>X</td>
  34. <td>X</td>
  35. <td>X</td>
  36. </tr>
  37. </tfoot>
  38. </table>

五、内联框架标签

1、用于制作网站后台
2、采用a标签、li标签或者nav标签

批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学