• <noscript id="ecgc0"><kbd id="ecgc0"></kbd></noscript>
    <menu id="ecgc0"></menu>
  • <tt id="ecgc0"></tt>

    制作一個漂亮的圓角表格

    Sublime編纂器

    HTML+CSS

    方式/步調

    1. 1

      輸出表格的根基HTML布局(3*3),代碼如下圖所示:

      8ad4b31c8701a18b63490598902f07082938fe43.jpg
    2. 2

      對表格進行CSS根本樣式美化,代碼及預覽結果如下圖所示:

      b3b7d0a20cf431ad892654ee4536acaf2fdd9874.jpg 4034970a304e251f1203f32fa986c9177e3e5374.jpg
    3. 3

      設置表格中心的表格線,CSS代碼及預覽結果如下圖所示:

      9922720e0cf3d7ca6a1128a1fc1fbe096a63a905.jpg 314e251f95cad1c82f84eaf0713e6709c93d512d.jpg
    4. 4

      去失落第一行頂部邊線和第一列的左部邊線,并對第一行進行布景漸變,讓表格看起來更美不雅,代碼及預覽結果如下圖所示:

      f636afc379310a5579d7c923b94543a983261071.jpg 37d12f2eb9389b501b1cf7858b35e5dde6116e01.jpg
    5. 5

      因為第一行添加了布景,因最后一步需要別離設置左上、右上單位格的圓角,調整細節,代碼如下圖:

      241f95cad1c8a786401c5cd96909c93d70cf5036.jpg
    6. 6

      打開瀏覽器,圓角表格已經完當作了,很標致吧!快脫手嘗嘗吧。

      f7246b600c338744f2c839ab5f0fd9f9d62aa0d3.jpg
    • 發表于 2019-08-10 18:07
    • 閱讀 ( 751 )
    • 分類:其他類型

    0 條評論

    請先 登錄 后評論
    admin
    admin

    0 篇文章

    作家榜 ?

    1. xiaonan123 189 文章
    2. 湯依妹兒 97 文章
    3. luogf229 46 文章
    4. jy02406749 45 文章
    5. 小凡 34 文章
    6. Daisy萌 32 文章
    7. 我的QQ3117863681 24 文章
    8. 華志健 23 文章

    推薦文章

    聯系我們:uytrv@hotmail.com 問答工具
  • <noscript id="ecgc0"><kbd id="ecgc0"></kbd></noscript>
    <menu id="ecgc0"></menu>
  • <tt id="ecgc0"></tt>
    久久久久精品国产麻豆