登录  /  注册
博主信息
博文 145
粉丝 7
评论 7
访问量 159505
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
12月20日作业:html+css 案例实操
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
原创
1293人浏览过

html和CSS的使用:利用CSS调整布局和样式调整,有关CSS的知识点不数量,听完直播只能做成这样
代码如下:

  1. <!DOCTYPE html>
  2. <html lang="Zh-cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>12月20作业案例</title>
  6. <!-- <link rel="stylesheet" href="font/iconfont.css">-->
  7. <style>
  8. form {
  9. display: inline-block;
  10. }
  11. ul {
  12. list-style: none;
  13. display: inline-block;
  14. }
  15. .nav {
  16. float:left;
  17. position: relative;
  18. }
  19. .nav:hover {
  20. background-color: red;
  21. }
  22. table {
  23. display: inline-block;
  24. }
  25. .ul_nav {
  26. padding-left: 0px;
  27. /*margin-top: 0px;*/
  28. position:relative;
  29. left:0px;
  30. top:-10px;
  31. }
  32. .nav>ul {
  33. position:relative;
  34. left:0px;
  35. top:-10px;
  36. margin-top: -10px;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <header>
  42. <img src="images\logo.png" alt="">
  43. <form action="">
  44. <input type="text">
  45. <button><img src="images\1220\0.png" alt=""></button>
  46. </form>
  47. <ul class="">
  48. <li class="nav"><a href=""><img src="images\1220\1.png" alt=""></a></li>
  49. <li class="nav"><a href=""><img src="images\1220\2.png" alt=""></a></li>
  50. <li class="nav"><a href=""><img src="images\1220\3.png" alt=""></a></li>
  51. <li class="nav"><a href=""><img src="images\1220\4.png" alt=""></a></li>
  52. <li class="nav"><a href=""><img src="images\1220\5.png" alt=""></a></li>
  53. <li class="nav"><a href=""><img src="images\1220\6.png" alt=""></a></li>
  54. </ul>
  55. </header>
  56. <nav>
  57. <ul>
  58. <li class="nav"><img src="images\1220\n1.png" alt="">
  59. <ul class="ul_nav">
  60. <li>咨询</li>
  61. <li>学习</li>
  62. </ul>
  63. <img src="images/1220/竖条.png" alt="" height="60" width="5">
  64. <table class="">
  65. <tr>
  66. <td>器材</td>
  67. <td>大师</td>
  68. <td>学院</td>
  69. <td>实战</td>
  70. </tr>
  71. <tr>
  72. <td>大赛</td>
  73. <td>影视</td>
  74. <td>裤子</td>
  75. <td>其他</td>
  76. </tr>
  77. </table>
  78. </li>
  79. <li class="nav"><img src="images\1220\n2.png" alt="">
  80. <ul class="ul_nav">
  81. <li>咨询</li>
  82. <li>学习</li>
  83. </ul>
  84. <img src="images/1220/竖条.png" alt="" height="60" width="5">
  85. <table class="ul_nav">
  86. <tr>
  87. <td>器材</td>
  88. <td>大师</td>
  89. <td>学院</td>
  90. <td>实战</td>
  91. </tr>
  92. <tr>
  93. <td>大赛</td>
  94. <td>影视</td>
  95. <td>裤子</td>
  96. <td>其他</td>
  97. </tr>
  98. </table>
  99. </li>
  100. <li class="nav"><img src="images\1220\n3.png" alt="">
  101. <ul class="ul_nav">
  102. <li>咨询</li>
  103. <li>学习</li>
  104. </ul>
  105. <img src="images/1220/竖条.png" alt="" height="60" width="5">
  106. <table class="ul_nav">
  107. <tr>
  108. <td>器材</td>
  109. <td>大师</td>
  110. <td>学院</td>
  111. <td>实战</td>
  112. </tr>
  113. <tr>
  114. <td>大赛</td>
  115. <td>影视</td>
  116. <td>裤子</td>
  117. <td>其他</td>
  118. </tr>
  119. </table>
  120. </li>
  121. <li class="nav"><img src="images\1220\n4.png" alt="">
  122. <ul class="ul_nav">
  123. <li>咨询</li>
  124. <li>学习</li>
  125. </ul>
  126. <img src="images/1220/竖条.png" alt="" height="60" width="5">
  127. <table class="ul_nav">
  128. <tr>
  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. </tr>
  140. </table>
  141. </li>
  142. </ul>
  143. </nav>
  144. <main>
  145. <a href=""><img id="first" src="images\4.jpg" alt=""></a>
  146. <a href=""><img src="images\banner-right.jpg" alt=""></a>
  147. </main>
  148. </body>
  149. </html>

效果图如下:

本章总结:CSS代码不熟练,很多知识点第一次接触,细微之处不会调节,还有对窗口大小的匹配不会

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:这个作业 ,一开始估计让不少人抓狂, 但一旦上手写了, 又会高兴起来, 很好玩的
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

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