制作一个漂亮的圆角表格

Sublime编纂器
HTML+CSS方式/
1输出表格的根基HTML布局(3*3) , 代码如下图所示:


制作一个漂亮的圆角表格



2对表格进行CSS根本样式美化 , 代码及预览结果如下图所示:


制作一个漂亮的圆角表格



制作一个漂亮的圆角表格



3设置表格中心的表格线 , CSS代码及预览结果如下图所示:


制作一个漂亮的圆角表格



制作一个漂亮的圆角表格



4【制作一个漂亮的圆角表格】去失落第一行顶部边线和第一列的左部边线 , 并对第一行进行布景渐变 , 让表格看起来更美不雅 , 代码及预览结果如下图所示:


制作一个漂亮的圆角表格



制作一个漂亮的圆角表格



5因为第一行添加了布景 , 因最后一步需要别离设置左上、右上单位格的圆角 , 调整细节 , 代码如下图:


制作一个漂亮的圆角表格



6打开浏览器 , 圆角表格已经完当作了 , 很标致吧!快脱手尝尝吧 。


制作一个漂亮的圆角表格




以上内容就是制作一个漂亮的圆角表格的内容啦 , 希望对你有所帮助哦!

    猜你喜欢