【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:4001231122">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&Site=&menu=yes" target="_blank" role="button">在线客服</a>
</div>
<p class="footer-info">
© 2015 「好教授在线」 — 沪ICP备15052540号
</p>
</div>
</div>
</div>