按钮式链接

最新推荐文章于 2023-01-05 09:37:07 发布

Zjyyyy95

最新推荐文章于 2023-01-05 09:37:07 发布

阅读量821

点赞数

分类专栏： css 按钮导航菜单文章标签： css 标签按钮

本文链接：https://blog.csdn.net/zhoujingying22/article/details/50976299

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

按钮导航菜单

3 篇文章 0 订阅

订阅专栏

1.

<pre name="code" class="html">.a{
     display:block;
   }

将链接从行内元素转换为块级元素，从而可以设置宽高度和背景

2. 大多数浏览器的默认字号是16像素，所以6.6em=16*6.6=105.6px同时1.4em=22.4px

3.

<pre name="code" class="html">a{    
     /* ...*/
   height: 1.4em;  
   line-height: 1.4em; 
   }

将height与line-height的值设为相等，可以使按钮中的文本垂直居中。

<pre name="code" class="html">.a{    
     /* ...*/
   text-align: center;
   }

text-align值为center可以使按钮中的文本水平居中。

4.

<pre name="code" class="html">.a{    
     /* ...*/
   text-decoration: none;
   }

去掉链接的下划线。

完整代码：

<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		a{
			display:block;
			width:6.6em;
			height: 1.4em;
			line-height: 1.4em;
			text-align: center;
			text-decoration: none;
			
			background: #CFE4B8;
			border:1px solid #DED6D6;
		}
	</style>
</head>
<body>
	<a href="#">Buttom</a>
</body>
</html>

Zjyyyy95

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
按钮式链接

1..a{ display:block; }将链接从行内元素转换为块级元素，从而可以设置宽高度和背景2.大多数浏览器的默认字号是16像素，所以6.6em=16*6.6=105.6px同时1.4em=22.4px3..a{ /* ...*/ height: 1.4em; line-height: 1.4em; }将height
复制链接

扫一扫

专栏目录