a --- 链接

a标签里面不能套用a标签
 
1.背景图片加链接，图片和框需要设置一样的宽高
<a href="http://www.baidu.com" target="_black"></a>
 
a{
　　display: inline-block; /*行内元素设置成块级元素才能设置宽高*/
　　width: 100px;
　　height:50px;
　　color:#424242; /*a标签默认的是蓝色，把标签的颜色该为黑色*/
　　text-decoration: none; /*去掉下划线*/
　　border:1px solid black;
　　background-size:100px 50px;
}
 
2.有网时和无网时显示的页面
   第一种方法
<a href="http://www.baidu.com" target="_blank">百度</a>
a{
　　display: inline-block;　　 /*行内元素设置成块级元素才能设置宽高*/
　　width: 100px;
　　height:50px;
　　color:#424242;　　 /*a标签默认的是蓝色，把标签的颜色该为黑色*/
　　text-decoration: none; 　　/*去掉下划线*/
　　border:1px solid black;
　　background-size:100px 50px;
 
　　/* 在无网状态下不会加载css，只会标签里的链接 ，有网时加载了css，用户也看不到*/
　　text-indent: 200px;　　 /*首行缩进*/
　　white-space: nowrap; 　　/*不换行*/
　　overflow: hidden;　　 /*文字设在边框外面，溢出隐藏*/
}
 
 第二种方法：使用内边距padding-top撑开高度
<a href="http://www.baidu.com" target="_blank">百度</a>
 
a{
　　display: inline-block; /*行内元素设置成块级元素才能设置宽高*/
　　width: 100px;
　　height:0px;
　　padding-top:50px;
　　overflow: hidden;
　　color:#424242;　　 /*a标签默认的是蓝色，把标签的颜色该为黑色*/
　　text-decoration: none; 　　/*去掉下划线*/
　　border:1px solid black;
　　background-size:100px 50px;
}
　　使用第二种方法解决时，容器的高度为0时，它会在顶部成为一条线，可以使用在元素里加内边距撑开，不会影响标签里的字（图1），再使用hidden隐藏掉文字 
 
                      图（1）
 
                           图（2）
 
 
 
 
 
 
 
 
 
 
posted @ 2019-05-03 03:36  岁月无垠  阅读(170)  评论(0)  编辑  收藏  举报