制作一个漂亮的圆角表格

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
  • 阅读 ( 750 )
  • 分类:其他类型

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 问答工具