CSS美化图像按钮及表格

最新推荐文章于 2021-08-03 23:45:38 发布

VIP文章冯晓如

最新推荐文章于 2021-08-03 23:45:38 发布

阅读量999

点赞数

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

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

版权

一、设计图形按钮链接
使用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-

最低0.47元/天解锁文章

冯晓如

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS美化图像按钮及表格

一、设计图形按钮链接使用css的background-image属性实现。代码如下：<style type="text/css">a.reg{ background: transparent url('ps做好的背景图') no-repeat top left; display: block; width: 74px; height: 25px ...
复制链接

扫一扫