【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 }

 

 1 <div class="footer">
 2      <div class="col-xm-12">
 3           <div class="column">
 4             <a class="footer-logo">
 5                 <h2><bold>好教授在线</bold></h2>
 6             </a>
 7             <div class="footer-link">
 8                 <a href="#">首页</a>
 9                 <a href="#">下载客户端</a>
10                 <a href="#">关于我们</a>
11                 <a href="#">帮助</a>
12             </div>
13             <a class="footer-tel" href="tel:4001231122">400-888-3861</a>
14             <p class="footer-time">工作日 9:00-18:00</p>
15             <div class="online-service">
16                 <a class="btn-primary online-service-btn" href="tencent://message/?uin=2365180536&amp;Site=&amp;menu=yes" target="_blank" role="button">在线客服</a>
17             </div>
18             <p class="footer-info">
19             © 2015 「好教授在线」 — 沪ICP备15052540号
20             </p>
21         </div>
22     </div>
23 </div>

 

posted on 2015-12-08 14:08  Micheal.G  阅读(3325)  评论(0)  编辑  收藏  举报

导航