html/CSS弹出式效果代码分析学习-我的各种站点足迹

来源：互联网发布：网络言论自由利大于弊编辑：程序博客网时间：2024/06/03 20:18

先看一下效果：

//html code

<!DOCTYPE html>

<html>

<head>

<title>Contact</title>

</head>

<li><a class="lofter" href="http://elaphurus.lofter.com/">Lofter</a></li>

<li><a class="zcool" href="http://www.zcool.com.cn/u/1752618">Zcool</a></li>

<li><a class="iconfans" href="http://www.iconfans.com/user.php?uid=81150">Iconfans</a></li>

</ul>

</html>

这里出现了span标签，然而没有出现任何效果，所以研究了一下，发现大多都在讨论div和span的区别：

div是块级元素，span则是行内元素，语义化地使用它们，就是说，div标签包含的是一个文段，而span标签包含的是一些更小的段或者文本。

比如：<div>This a large main division, with a small bit of spanned text!</div>

来自：stackoverflow

至于没有出现效果：如果不对 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的限制。

参考：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

http://www.barelyfitz.com/screencast/html-training/css/positioning/

.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);

}

0 0