先看一下效果：
//html code
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<ul class="wrapper">
<li><a class="lofter" href="http://elaphurus.lofter.com/"><span>Lofter</span></a></li>
<li><a class="zcool" href="http://www.zcool.com.cn/u/1752618"><span>Zcool</span></a></li>
<li><a class="iconfans" href="http://www.iconfans.com/user.php?uid=81150"><span>Iconfans</span></a></li>
<li><a class="csdn" href="http://blog.csdn.net/hookc"><span>CSDN</span></a></li>
</ul>
</html>
这里出现了span标签，然而没有出现任何效果，所以研究了一下，发现大多都在讨论div和span的区别：
div是块级元素，span则是行内元素，语义化地使用它们，就是说，div标签包含的是一个文段，而span标签包含的是一些更小的段或者文本。
比如：<div>This a large main division, with <span>a small bit</span> of spanned text!</div>
至于没有出现效果：如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。
来自：w3cschool
//CSS code
body{
background:url(bg.jpg);
}
.wrapper{
width:300px;
height:70px;
padding:0;
margin:250px auto 30px auto;
}
.wrapper li{
float:left;
list-style:none;
}
在这里使用float属性是列表元素由原来的竖直的样式改为水平样式
.wrapper li a{
display:block;
width:60px;
height:60px;
padding:0px 10px 0px 0px;
outline:none;
background:transparent url(toolbar.png) no-repeat top left;
text-decoration:none;
position:relative;
}
关于定位属性的问题：static,relative,absolute,fixed和常用的float
简单总结：
relative:相对定位，相对本element原来的位置移动，要和top，bottom，left，right这些属性值一起使用，否则不会有任何效果；
absolute:绝对定位，与别的element无关，以数值定位置，页面任何位置均可；
在relative定位的element中使用absolute定位的element，那么子element的绝对定位位置受父element的限制。
.wrapper li .lofter{
background-position:0px 0px;
}
.wrapper li .zcool{
background-position:-70px 0px;
}
.wrapper li .iconfans{
background-position:-140px 0px;
}
.wrapper li .csdn{
background-position:-210px 0px;
}
上面只需要设计一张长条的图片，使用背景定位来显示需要显示的图片块，减少了图片加载量，提高了性能
.wrapper li a span{
width:80px;
height:80px;
line-height:80px;
font-family:Georgia,serif;
margin-left: -15px;
font-size:14px;
color: #719DAB;
position: absolute; //在relative定位里面使用absolute定位可以让span限制在父element中
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); //参数：水平投影距离 垂直投影距离 投影模糊距离 投影颜色
text-align:center;
border: 5px solid #fff;
border-radius: 50%;
background: rgba(255,255,255,0.5);
box-shadow: 0px 3px 8px rgba(0,0,0,0.1); //框阴影 参数：
水平投影距离 垂直投影距离 投影模糊距离 阴影尺寸 投影颜色 将外阴影改为内阴影
bottom:-40px; //设置span的初始位置
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-o-transform: scale(0.2);
-ms-transform: scale(0.2);
transform: scale(0.2); //改变尺寸大小 变为原来的20%
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; //过渡属性 所有属性都进行过渡 0.3s 淡入淡出
opacity:0;
}
.wrapper li a:hover span{
opacity: 0.9;
bottom: 40px;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
