亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 145
粉絲 7
評論 7
訪問量 198703
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
12月20日作業(yè)：html+css 案例實(shí)操
李東亞1??3????12?
原創(chuàng)
1550人瀏覽過

html和CSS的使用：利用CSS調(diào)整布局和樣式調(diào)整，有關(guān)CSS的知識點(diǎn)不數(shù)量，聽完直播只能做成這樣
代碼如下：

  1. <!DOCTYPE html>
  2. <html lang="Zh-cn">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>12月20作業(yè)案例</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;
  19.         }
  20.         .nav:hover {
  21.             background-color: red;
  22.         }
  24.         table {
  25.             display: inline-block;
  26.         }
  27.         .ul_nav {
  28.             padding-left: 0px;
  29.             /*margin-top: 0px;*/
  30.             position:relative;
  31.             left:0px;
  32.             top:-10px;
  34.         }
  35.         .nav>ul {
  36.             position:relative;
  37.             left:0px;
  38.             top:-10px;
  39.             margin-top: -10px;
  41.         }
  45.     </style>
  46. </head>
  47. <body>
  48. <header>
  49.     <img src="images\logo.png" alt="">
  50.     <form action="">
  51.         <input type="text">
  52.         <button><img src="images\1220\0.png" alt=""></button>
  53.     </form>
  54.     <ul class="">
  55.         <li class="nav"><a href=""><img src="images\1220\1.png" alt=""></a></li>
  56.         <li class="nav"><a href=""><img src="images\1220\2.png" alt=""></a></li>
  57.         <li class="nav"><a href=""><img src="images\1220\3.png" alt=""></a></li>
  58.         <li class="nav"><a href=""><img src="images\1220\4.png" alt=""></a></li>
  59.         <li class="nav"><a href=""><img src="images\1220\5.png" alt=""></a></li>
  60.         <li class="nav"><a href=""><img src="images\1220\6.png" alt=""></a></li>
  61.     </ul>
  62. </header>
  63. <nav>
  64.     <ul>
  65.         <li class="nav"><img src="images\1220\n1.png" alt="">
  66.             <ul class="ul_nav">
  67.                 <li>咨詢</li>
  68.                 <li>學(xué)習(xí)</li>
  69.             </ul>
  70.             <img src="images/1220/豎條.png" alt="" height="60" width="5">
  71.             <table class="">
  72.                 <tr>
  73.                     <td>器材</td>
  74.                     <td>大師</td>
  75.                     <td>學(xué)院</td>
  76.                     <td>實(shí)戰(zhàn)</td>
  77.                 </tr>
  78.                 <tr>
  79.                     <td>大賽</td>
  80.                     <td>影視</td>
  81.                     <td>褲子</td>
  82.                     <td>其他</td>
  83.                 </tr>
  84.             </table>
  86.         </li>
  87.         <li class="nav"><img src="images\1220\n2.png" alt="">
  88.             <ul class="ul_nav">
  89.                 <li>咨詢</li>
  90.                 <li>學(xué)習(xí)</li>
  91.             </ul>
  92.             <img src="images/1220/豎條.png" alt="" height="60" width="5">
  93.             <table class="ul_nav">
  94.                 <tr>
  95.                     <td>器材</td>
  96.                     <td>大師</td>
  97.                     <td>學(xué)院</td>
  98.                     <td>實(shí)戰(zhàn)</td>
  99.                 </tr>
  100.                 <tr>
  101.                     <td>大賽</td>
  102.                     <td>影視</td>
  103.                     <td>褲子</td>
  104.                     <td>其他</td>
  105.                 </tr>
  106.             </table>
  108.         </li>
  109.         <li class="nav"><img src="images\1220\n3.png" alt="">
  110.             <ul class="ul_nav">
  111.                 <li>咨詢</li>
  112.                 <li>學(xué)習(xí)</li>
  113.             </ul>
  114.             <img src="images/1220/豎條.png" alt="" height="60" width="5">
  115.             <table class="ul_nav">
  116.                 <tr>
  117.                     <td>器材</td>
  118.                     <td>大師</td>
  119.                     <td>學(xué)院</td>
  120.                     <td>實(shí)戰(zhàn)</td>
  121.                 </tr>
  122.                 <tr>
  123.                     <td>大賽</td>
  124.                     <td>影視</td>
  125.                     <td>褲子</td>
  126.                     <td>其他</td>
  127.                 </tr>
  128.             </table>
  130.         </li>
  131.         <li class="nav"><img src="images\1220\n4.png" alt="">
  132.             <ul class="ul_nav">
  133.                 <li>咨詢</li>
  134.                 <li>學(xué)習(xí)</li>
  135.             </ul>
  136.             <img src="images/1220/豎條.png" alt="" height="60" width="5">
  137.             <table class="ul_nav">
  138.                 <tr>
  139.                     <td>器材</td>
  140.                     <td>大師</td>
  141.                     <td>學(xué)院</td>
  142.                     <td>實(shí)戰(zhàn)</td>
  143.                 </tr>
  144.                 <tr>
  145.                     <td>大賽</td>
  146.                     <td>影視</td>
  147.                     <td>褲子</td>
  148.                     <td>其他</td>
  149.                 </tr>
  150.             </table>
  152.         </li>
  153.     </ul>
  154. </nav>
  155. <main>
  156.     <a href=""><img id="first" src="images\4.jpg" alt=""></a>
  157.     <a href=""><img src="images\banner-right.jpg" alt=""></a>
  158. </main>
  159. </body>
  160. </html>

效果圖如下：

本章總結(jié)：CSS代碼不熟練，很多知識點(diǎn)第一次接觸，細(xì)微之處不會(huì)調(diào)節(jié)，還有對窗口大小的匹配不會(huì)

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：這個(gè)作業(yè) ,一開始估計(jì)讓不少人抓狂, 但一旦上手寫了, 又會(huì)高興起來, 很好玩的
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)