使用xHTML+CSS高仿QQ空间实例

案例先晒了效果图:

QQ上的好多效果都漂亮,今天就实例当中一个小的功能!

看似简单的效果,我整整花了3个小时!

结果还不是完美。

兼容性没有处理,有兴趣的同学可以尝试一下!

知识点:

1,浮动与定位布局?。

2,小三角的CSS实现方式?。

3,通过jquery实现切换效果?。

4,jquery用到的知识:

? ???a,jquery选择器

? ???b,筛选(find(),siblings(),end(),eq())

? ???c,each()遍历

? ???d,click()单击事件

? ???e,效果(显示/隐藏,滑入/滑出)

? ???f,css属性操作(addClass(),removeClass())

技术要在了解理论的前提下不断的实践才能更好的提升自己!!加油!!

Seo先生博客转载WEB前端开发,案例预览地址:http://seosir.cc/demo/qzone/index.html

常见的IE兼容性代码大全

1.制作全屏背景技巧

我们只要把需要做为全屏背景的那张图片放在HTML标签中:

html{/* 需要全屏的背景图片 */background:url(‘background.jpg’) no-repeat center center;/* 确保html元素总是占用全部浏览器窗口的高度 */min-height:100%;/* 实现的关键 */

background-size:cover;

}

body{

/* 在移动端更好的工作 */

min-height:100%;

}

 

2.最小高度兼容代码,min-height

selector {min-height:500px;height:auto !important;height:500px;}

还有一条专门针对ie的,不建议使用

div {height: expression( this.scrollHeight < 501 ? “500px” : “auto” );}

 

3.清除浮动

/* new clearfix */.clearfix:after {visibility: hidden;display: block;font-size: 0;content: ” “;

clear: both;

height: 0;

}

* html .clearfix???????????? { zoom: 1; } /* IE6 */

*:first-child+html .clearfix { zoom: 1; } /* IE7 */

//最近版\r\n.clearfix:before, .clearfix:after {content:””;display:table;}.clearfix:after{

clear:both;

overflow:hidden;

}

.clearfix{

*zoom:1;

}

 

4.CSS透明兼容,alpha兼容

以前的兼容

.transparent_class {-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /* ie8??*/filter:alpha(opacity=50);????/* ie5-7??*/-moz-opacity:0.5;????/* old mozilla browser like netscape??*/-khtml-opacity: 0.5;????/* for really really old safari */opacity: 0.5;????/* css standard, currently it works in most modern browsers like firefox,??*/

}

现在的兼容

.transparent_class {-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /* ie8??*/filter:alpha(opacity=50);????/* ie5-7??*/opacity: 0.5;????/* css standard, currently it works in most modern browsers??*/}

 

5.rgba兼容

.rgba {background: rgb(0,0,0); /*The Fallback color*/background: rgba(0, 0, 0,0.5);filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */\r\n}

注:ie滤镜中的颜色值前两位表示透明度,下面说明这个透明值如何计算:

现在我需要两个透明度,分别为0.25和0.5,那么第一步先得到乘以256的数值
256 × 0.25 = 64,
256 × 0.50 = 128,
然后我们通过这个地址的计算公式convert to hexadecimal 得到值为: 40和 80

6.标签pre的css代码,防止代码pre中代码过长等问题

pre {white-space: pre-wrap; /* css-3 */white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */white-space: -pre-wrap; /* Opera 4-6 */white-space: -o-pre-wrap; /* Opera 7 */word-wrap: break-word; /* Internet Explorer 5.5+ */

}

 

7.ie hack招数集

#box{\r\ncolor:red; /* 所有浏览器都支持 */color:red !important;/* 除IE6外 */_color:red; /* IE6支持 */*color:red; /* IE6、IE7支持 */+color:red;/*IE7支持*/

*+color:red; /* IE7支持 */

color:red\9; /* IE6、IE7、IE8、IE9支持 */

color:red\0; /* IE8、IE9支持 */

color:red\9\0;/*IE9支持*/

}

 

8.兼容浏览器的inline-block

.inlineblock{display:inline-block;*display:inline;*zoom:1;}

 

9.css省略号实现
Firefox7.0开始兼容text-overflow:ellipsis;这样的话,以后的省略号就可以做到浏览器兼容了,代码片段为:

width:200px;/*设置宽度*/white-space:nowrap;/*设置不折行*/text-overflow:ellipsis;/*这就是省略号喽*/-o-text-overflow:ellipsis;/*兼容opera*/overflow: hidden;/*设置超过的隐藏*/

 

10.纯CSS三角效果代码

<style>.arrow-up {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;

border-bottom: 5px solid black;

}

.arrow-down {

width: 0;

height: 0;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-top: 20px solid #f00;

}

 

.arrow-right {

width: 0;

height: 0;

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

border-left: 60px solid green;

}

.arrow-left {

width: 0;

height: 0;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-right:10px solid blue;

}

</style>

 

使用CSS3.0实现多种样式Loading

使用CSS3.0实现的Loading效果,很不错的几种样式,大家不妨收藏以后做站使用。

预览地址:

http://seosir.cc/demo/Loading/1.html

http://seosir.cc/demo/Loading/2.html

http://seosir.cc/demo/Loading/3.html

http://seosir.cc/demo/Loading/4.html

http://seosir.cc/demo/Loading/5.html

http://seosir.cc/demo/Loading/6.html

http://seosir.cc/demo/Loading/7.html

http://seosir.cc/demo/Loading/8.html

以上八种特效,Seo先生推荐大家收藏使用。

高效整洁CSS代码五原则

一、CSS重置

html,body,div,h1,h2,h3,h4,h5,
h6,ul,ol,dl,li,dt,dd,p,blockquote,
pre,form,fieldset,table,th,td{margin:0;padding:0;}

这些就够了,不需要用*了,*增大下载时间

二、CSS属性的排序

按着英文字母的排序,这样帮助你节省花费在寻找一个特殊属性的时间

三、CSS样式的组织

你应该组织你的样式表以致相关的内容靠在一起,更简单的找到想要的。使用更有效的注解。举个例子,这是我如何构造我的层叠样式表:

/*****Reset*****/
移除元素的填充(padding)和边距(margin)。
/*****BasicElements*****/
定义基本元素的样式:body,h1-h6,ul,ol,a,p,等。
/*****GenericClasses*****/
定义简单的风格,好像浮动的某一侧,移除元素的下边距, 等当然,它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。
/*****BasicLayout*****/
定义基本的模板:header,footer等.帮助定义网页布局的基本元素
/*****Header*****/
定义所有Hearder元素
/*****Content*****/
定义所有内容框内的元素
/*****Footer*****/
定义所有Footer的元素
/*****Etc*****/ (more…)

初学者必懂的30条HTML代码编写

本文总结了30条html代码编写指南,只要在编写HTML代码的过程中牢记它们,灵活运用,你一定会写出一手漂亮的代码,早日迈入专业开发者的行列。?

1. 一定要闭合HTML标签

在以往的页面源代码里,经常看到这样的语句:

<li>Some text here. <li>Some new text here. <li>You get the idea.

也许过去我们可以容忍这样的非闭合HTML标签,但在今天的标准来看,这是非常不可取的,是必须百分百避免的。一定要注意闭合你的HTML标签,否则将无法通过验证,并且容易出现一些难以预见的问题。

最好使用这样的形式:

<ul> <li>Some text here. <li>Some new text here. <li>You get the idea.

2. 声明正确的文档类型( DocType )

笔者早先曾加入过许多CSS论坛,在那里,如果有用户遇到问题,我们会建议他首先做两件事:

  • 1. 验证CSS文件,解决所有可见的错误
  • 2. 加上文档类型 Doctype

DOCTYPE 定义在HTML标签出现之前,它告诉浏览器这个页面包含的是HTML,XHTML,还是两者混合出现,这样浏览器才能正确的解析标记。 (more…)