【css】a标签的用法

　　<a>标签属性display的不同设置达到目的

　　display:block和display:inline;

　　display:block 可以使得<a>标签设置宽高、边线、margin和padding，因为这样设置后<a>标签拥有的块元素的性质。

　　还可以通过设置<a>标签display:inline代替一般采用的<ul><li>组成的列表，省却了诸如list-style:none,float:left等设置来获得水平或垂直排列。

　　注意：下面的css代码默认 display:block;然后我们需要水平排列是添加display：inline

可以看到html代码当中很多<a>标签中有绿色背影的部分就是我们水平排列的4个<a>标签用一个<div>包含起来。

效果图如下：

css代码：

 1 a{
 2  display:block;
 3 }
 4 .footer {
 5     
 6     bottom:0px;
 7     padding: 10px 5% 65px;
 8     
 9     text-align: center;
10     color:#337ab7;
11 }
12 //a
13 .footer .footer-logo { 
14     font-size: 0;
15     height: 54px;
16     line-height: 32px;
17     margin: 0;
18     border-bottom:1px solid #337ab7;
19 }
20 
21 .footer .footer-link {
22     font-size: 15px;
23     width: auto;
24     margin:30px 0;
25 }
26 .footer .footer-link a {
27  display: inline;
28     line-height: 1;
29     margin: 0 8px;
30 }
31 .footer a:link,.footer a:hover{
32     
33     text-decoration:none;
34 }
35 //a
36 .footer .footer-tel {
37   
38     font-size: 24px;
39     height: auto;
40     line-height: 27px;
41 }
42 .footer .footer-time {
43     margin: 0;
44 }
45 //a
46 .footer .online-service-btn {
47     border-radius: 10px;
48     font-size: 12px;
49        height: 18px; 
50     width: 118px;
51     line-height: 18px;
52        margin:10px auto;
53 }
54 .footer .footer-info {
55     font-size: 12px;
56     margin-top:40px;
57 }

更多相关文章

随机推荐