【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代码：

 a{
     display:block;
 }
 .footer {

     bottom:0px;
     padding: 10px 5% 65px;

     text-align: center;
     color:#337ab7;
 }
 //a
 .footer .footer-logo {
     font-size:;
     height: 54px;
     line-height: 32px;
     margin:;
     border-bottom:1px solid #337ab7;
 }

 .footer .footer-link {
     font-size: 15px;
     width: auto;
     margin:30px 0;
 }
 .footer .footer-link a {
     display: inline;
     line-height:;
     margin: 0 8px;
 }
 .footer a:link,.footer a:hover{

     text-decoration:none;
 }
 //a
 .footer .footer-tel {

     font-size: 24px;
     height: auto;
     line-height: 27px;
 }
 .footer .footer-time {
     margin:;
 }
 //a
 .footer .online-service-btn {
     border-radius: 10px;
     font-size: 12px;
        height: 18px;
     width: 118px;
     line-height: 18px;
        margin:10px auto;
 }
 .footer .footer-info {
     font-size: 12px;
     margin-top:40px;
 }

 <div class="footer">
      <div class="col-xm-12">
           <div class="column">
             <a class="footer-logo">
                 <h2><bold>好教授在线</bold></h2>
             </a>
             <div class="footer-link">
                 <a href="#">首页</a>
                 <a href="#">下载客户端</a>
                 <a href="#">关于我们</a>
                 <a href="#">帮助</a>
             </div>
             <a class="footer-tel" href="tel:[phone]">400-888-3861</a>
             <p class="footer-time">工作日 9:00-18:00</p>
             <div class="online-service">
                 <a class="btn-primary online-service-btn" href="tencent://message/?uin=2365180536&amp;Site=&amp;menu=yes" target="_blank" role="button">在线客服</a>
             </div>
             <p class="footer-info">
             © 2015 「好教授在线」 — 沪ICP备15052540号
             </p>
         </div>
     </div>
 </div>