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

 

转载于:https://www.cnblogs.com/Micheal-G/p/5028939.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值