CSS美化图像按钮及表格

最新推荐文章于 2024-09-09 09:01:46 发布

冯晓如

最新推荐文章于 2024-09-09 09:01:46 发布

阅读量1k

点赞数

分类专栏： Web前端文章标签： CSS美化图像按钮及表格

本文链接：https://blog.csdn.net/honeygirl_/article/details/102864231

版权

本文介绍了如何使用CSS来美化图像按钮和表格，包括利用background-image属性设计按钮链接，通过border-collapse、border-spacing等属性调整表格边框样式，设置单元格间距，控制标题位置，以及隐藏空单元格的方法。

摘要由CSDN通过智能技术生成

一、设计图形按钮链接
使用css的background-image属性实现。
代码如下：

<style type="text/css">
a.reg{
    background: transparent url('ps做好的背景图') no-repeat top left;
    display: block;
    width: 74px;
    height: 25px ;
    text-indent: -999px;
}
</style>
<body>
    <a class="reg" href="#">注册</a>
</body>

显示效果如下：

二、美化表格
CSS为表格定义5个属性：border-collapse、border-spacing、caption-side、caption-cells、table-layout。

定义边框样式：

代码如下：

<style type="text/css">
table{/*合并单元格边框*/
    width:100%;
    empty-cells: show;
}
caption{
    caption-side: bottom;  /*底部显示*/
    font-size: 24px;   /*定义字体大小*/
    margin: 12px;   /*定义左右边界*/
    color: blue;   /*定义字体颜色*/
    font-weight: bold;  /*加粗显示*/
}
td，th{border:solid 1px #ff0000;}  /*定义单元格边框为1像素的细线*/
tfoot{text-