使用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>

 

修改header.php实现301定向

之前有写怎样做好301永久重定向?的文,但是其中我发现当时说的有个很大的问题,就是没有说到关于wordpress程序来最简单的实现301,当然这里主要针对于windows主机来说的,linux的话直接按照怎样做好301永久重定向?一文中来实现是最简单的了。

首先找到根目录下的wp-blog-header.php文件,打开之后会发现代码如下:
___________________________线下___________________________
<?php
/**
* Loads the WordPress environment and template.
*
* @package WordPress
*/

if ( !isset($wp_did_header) ) {

$wp_did_header = true;

require_once( dirname(__FILE__) . ‘/wp-load.php’ );

wp();

require_once( ABSPATH . WPINC . ‘/template-loader.php’ );

}
?>
___________________________线上___________________________

我们只需要改成:
___________________________线下___________________________
<?php
/**
* Loads the WordPress environment and template.
*
* @package WordPress
*/
if ( strtolower( $_SERVER[‘SERVER_NAME’]) != ‘seosir.cc’) {
$URIRedirect=$_SERVER[‘REQUEST_URI’];
if(strtolower($URIRedirect)==”/index.php”){
$URIRedirect=”/”;
}
header(‘HTTP/1.1 301 Moved Permanently’);
header(‘Location:http://seosir.cc’.$URIRedirect);
exit();
}

if ( !isset($wp_did_header) ) {

$wp_did_header = true;

require_once( dirname(__FILE__) . ‘/wp-load.php’ );

wp();

require_once( ABSPATH . WPINC . ‘/template-loader.php’ );

}
___________________________线上___________________________

以上seosir.cc换成你要定向的域名即可实现301。本文来源Seo先生,欢迎订阅。

使用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先生推荐大家收藏使用。

WIN主机下WP设置伪静态

这只是windows主机下的问题,如果你用的是liunx主机,那就没这种烦恼了。主要应用是 wordpress 中的TAG,如果设置为伪静态的话,中文TAG就会显示404,当然如果你使用文章名作为伪静态url,并且不修改别名,也能应用到。

修改网站目录下wp-include/classes.php文件(记得备份):

PS. 最新3.1版需要修改的文件是wp-include/class-wp.php

第一步:找到

$pathinfo?=?$_SERVER[‘PATH_INFO’];

修改为

$pathinfo?=?mb_convert_encoding($_SERVER[‘PATH_INFO’],?’UTF-8′,?’GBK’);

第二步:找到

$req_uri?=?$_SERVER[‘REQUEST_URI’];

修改为

$req_uri?=?mb_convert_encoding($_SERVER[‘REQUEST_URI’],?’UTF-8′,’GBK’);

就这样,中文的TAG标签页等就都可以打开了

Seo先生博客发布,本文地址:https://seosir.cc/402.html?转载注明。