代码 — 守望的麦子

存档

文章标签 ‘代码’

2011年6月30日麦子 1 条评论

定义和用法

clear 属性规定元素的哪一侧不允许其他浮动元素。

说明

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

浏览器支持

所有主流浏览器都支持 clear 属性。

via http://www.w3school.com.cn/css/pr_class_clear.asp

代码说明

<html>
<body>
<p style="float:left;width :200px;">这个是第1列</p> 
<p style="float:left;width :400px;">这个是第2列</p> 
<p style="clear:both;">这个是clear列</p>
</body>
</html>

试试把clear列的style去掉和不去的区别就知道了！

分类: Internet 标签: CSS, HTML, 代码, 网站

2011年2月16日麦子 1 条评论

层垂直居中于浏览器，一直是新手朋友比较头疼的问题。其实解决的思路是这样的：首们需要 position:absolute; 绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。

<style type="text/css">
<!-- 
div {
	position:absolute;
	top:50%;
	left:50%;
	margin:-150px 0 0 -200px;
	width:400px;
	height:300px;
	border:1px solid #008800;
	}
-->
</style>
<div>让层居中于浏览器窗口</div>

分类: wordpress 标签: CSS, HTML, 代码

2011年2月15日麦子没有评论

关于强制不换行、强制换行的话题在网上已经被讨论了无数次，但都不够全面，没有充分考虑各种浏览器、各种标签等情况，以致不兼容，所以再来说说。由于 div 和 p 在本文的讨论中，效果相同，所以省略 p。

文中“没有指定宽度的 td”是指：为 table 指定了宽度，但没有给 td 指定宽度。

强制不换行

div,
td
{
    white-space:nowrap;
}

这点在 Firefox 的 div 和 td 中，以及 IE 的 div 中，均没有问题。在 IE 的 td 中却很复杂：

如果没有为 td 指定宽度，则上述代码仍然有效。
如果为 td 指定了宽度，并且文字中无标点、无空格，上述代码不再有效。可以加 word-break:keep-all; 解决，这是 CSS3 的内容，不过是 IE 最先提出的，所以 IE6 中也支持。
如果为 td 指定了宽度，并且文字中有标点或空格。可以在文字与 td 之间套一层 div 加以解决。

综合起来，为了简单，使用：

div
{
    white-space:nowrap;
}

只是为了兼容 IE 的 td 的不同情况，在文字与 td 之间套一层 div。

强制换行

强制换行是为了遇到一些超长的连续字符串（比如 aaaaaaaaaaaaa）时不撑大布局。

div,
td
{
    word-break:break-all;
}

word-wrap:break-word; 兼容性不够广，所以我们使用的是 word-break:break-all;。上述代码兼容于 IE、Chrome 的 div、指定宽度的 td、没有指定宽度的 td，非常不错，遗憾的是 Firefox 中不支持这个属性，所以无效果，为了不让其挤乱表格，可以加 overflow:hidden 来凑合着解决。

知其然知其所以然

上面介绍了三种属性：

white-space : normal | nowrap
word-wrap : normal | break-word
word-break : normal | break-all | keep-all

white-space

空白的处理方式，不止两个属性值，但在 IE6 中只支持这两个，所以不介绍其他的。

normal 多个连续英文空格压缩为一个英文空格显示，在空白处可换行。
nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。

word-wrap

内容超过容器边界时是否断开转行。

normal 允许（只是允许，不是必须）内容顶开指定的容器边界。
break-word 内容将在边界内换行。

word-break

换行的方式。

normal 英文在标点和空白处换行，中文在任何地方换行。
break-all 英文和中文都在任何地方换行，比如从一个英文单词的中间拆开换行。
keep-all 英文和中文都在标点和空白处换行。

分类: wordpress 标签: CSS, HTML, 代码, 兼容性

2011年1月18日麦子 2 条评论

标准布局中DIV元素和SPAN元素的区别和应用

首先讲两个概念，SPAN元素是行内元素，DIV元素是块级元素。行内元素是指该元素标记的内容不不会对现在的结构造成影响，属于应用样式，辅助应用样式表等作用；而DIV元素即块级元素为一个块状，单独占据一行，相当于在一个该元素前后各加一个换行。

两者最明显的区别是：DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN是行内元素，SPAN的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。DIV元素即块元素相当于内嵌元素在前后各加一个
换行。其实，块元素和行内元素也不是一成不变的，只要给块元素定义display:inline，块元素就成了内嵌元素，同样地，给内嵌元素定义了display:block就成了块元素了。

代码示例：

<style> 
div,span{border:1pxsolid#000;margin:2px;}  
</style> 
<div>div1</div><div>div2</div> 
<span>span1</span><span>span2</span> 
<br> 
<divstyledivstyle="display:inline">div3</div> 
<divstyledivstyle="display:inline">div4</div> 
<spanstylespanstyle="display:block">span3</span> 
<spanstylespanstyle="display:block">span4</span>

技巧：有些朋友会说DIV是层标签，其实HTML里是没有层这个说法的，只不过是为了易于理解，Dreamweaver里才这样写的，每个对象都可以成为“层”，只需要给对象定义position属性(值为absolute或relavite)。例如，要让图片成为“层”，可以这样写代码：

<imgsrcimgsrc="demo.gif" style="posibion:absolute;left:20px;top:20px">

特别提示

为了更能说明问题，这里给块元素和内嵌元素都加了1像素宽的黑色实线边框，DIV元素默认为块元素，定义display属性值为inline后以内嵌元素显示，而SPAN默认为内嵌元素，定义display属性值为block后则以块元素显示。

SPAN元素标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。

分类: wordpress 标签: div, HTML, span, 代码, 网站

2011年1月17日麦子 1 条评论

WordPress 的用户注册机制是，填写用户名、邮箱，由 WordPress 生成随机密码，并发送到用户注册时填写的邮箱地址。但很多人的服务器并没有配置邮件服务或者邮件发送会长时间延迟（比如我正在使用的GoDaddy主机），或者由于邮件运行商的反垃圾邮件功能等原因，导致注册之后收不到WordPress发送的密码邮件，无法完成注册。

既然如此，不如我们 hacks 一下 WordPress。让 WordPress 注册后直接显示密码。

怎么改呢？很简单，只需改动 WordPress 根目录下的 wp-login.php 即可。

1、搜索下面这句，位于 register_new_user 函数中。用于注册成功后发送通知。找到后把它注释掉（当然如果你希望保留邮件发送功能则无须注释掉）。

wp_new_user_notification($user_id, $user_pass);

2、并在上面这句的下一行加上两句：

setcookie("u", $user_login);
setcookie("user_pass", $user_pass);

这两行的目的是把注册时填写的用户名，以及 WordPress 随机生成的密码写入cookies，以便在后面调用。

3、搜索下面这句

$errors->add('registered', __('Registration complete. Please check your e-mail.'), 'message');

并把它替换为

$errors->add('registered', __('Registration complete!<br />Username: '.$_COOKIE['u'].'<br />Password: '.$_COOKIE['user_pass'].'<br />(You can modify your password after you login)'), 'message');

中文版：

$errors->add('registered', __(' ^__^ 注册成功！<br />用户名：'.$_COOKIE['u'].'<br />密码：'.$_COOKIE['user_pass'].'<br />（登录后可以修改为便于记忆的密码）'), 'message');

注：文件包含有中文，需要另存为utf8的格式。

到此，就修改完成了。保存，上传。

注：本文基于 WordPress 2.6.1，在3.0.4版本上测试可用。

分类: wordpress 标签: PHP, wordpress, WP, 代码, 博客, 网站

2010年12月29日麦子 3 条评论

php 中执行搜索&替换的函数有 str_replace preg_replace ereg_replace ，其中 preg_replace 是执行正则表达式的搜索和替换，该函数返回一个字符串或者数组。如果没有一些特殊的替换需求（比如正则表达式），你应该使用该函数替换 ereg_replace() 和 preg_replace()。

$str=preg_replace("/\s+/", " ", $str); //过滤多余回车    
$str=preg_replace("/<[ ]+/si","<",$str); //过滤<__("<"号后面带空格)    
$str=preg_replace("/<\!--.*?-->/si","",$str); //注释    
$str=preg_replace("/<(\!.*?)>/si","",$str); //过滤DOCTYPE    
$str=preg_replace("/<(\/?html.*?)>/si","",$str); //过滤html标签    
$str=preg_replace("/<(\/?head.*?)>/si","",$str); //过滤head标签    
$str=preg_replace("/<(\/?meta.*?)>/si","",$str); //过滤meta标签    
$str=preg_replace("/<(\/?body.*?)>/si","",$str); //过滤body标签    
$str=preg_replace("/<(\/?link.*?)>/si","",$str); //过滤link标签    
$str=preg_replace("/<(\/?form.*?)>/si","",$str); //过滤form标签    
$str=preg_replace("/cookie/si","COOKIE",$str); //过滤COOKIE标签    
 
$str=preg_replace("/<(applet.*?)>(.*?)<(\/applet.*?)>/si","",$str); //过滤applet标签    
$str=preg_replace("/<(\/?applet.*?)>/si","",$str); //过滤applet标签    
 
$str=preg_replace("/<(style.*?)>(.*?)<(\/style.*?)>/si","",$str); //过滤style标签    
$str=preg_replace("/<(\/?style.*?)>/si","",$str); //过滤style标签    
 
$str=preg_replace("/<(title.*?)>(.*?)<(\/title.*?)>/si","",$str); //过滤title标签    
$str=preg_replace("/<(\/?title.*?)>/si","",$str); //过滤title标签    
 
$str=preg_replace("/<(object.*?)>(.*?)<(\/object.*?)>/si","",$str); //过滤object标签    
$str=preg_replace("/<(\/?objec.*?)>/si","",$str); //过滤object标签    
 
$str=preg_replace("/<(noframes.*?)>(.*?)<(\/noframes.*?)>/si","",$str); //过滤noframes标签    
$str=preg_replace("/<(\/?noframes.*?)>/si","",$str); //过滤noframes标签    
 
$str=preg_replace("/<(i?frame.*?)>(.*?)<(\/i?frame.*?)>/si","",$str); //过滤frame标签    
$str=preg_replace("/<(\/?i?frame.*?)>/si","",$str); //过滤frame标签    
 
$str=preg_replace("/<(script.*?)>(.*?)<(\/script.*?)>/si","",$str); //过滤script标签    
$str=preg_replace("/<(\/?script.*?)>/si","",$str); //过滤script标签    
$str=preg_replace("/javascript/si","Javascript",$str); //过滤script标签    
$str=preg_replace("/vbscript/si","Vbscript",$str); //过滤script标签    
$str=preg_replace("/on([a-z]+)\s*=/si","On\\1=",$str); //过滤script标签    
$str=preg_replace("/&#/si","&＃",$str); //过滤script标签，如javAsCript:alert('aabb)

分类: 技　术标签: PHP, 代码, 字符串, 正则, 正则表达式, 过滤

2010年11月29日麦子 3 条评论

WordPress 的短代码功能在 WP 2.5 以后就存在了，只是因为需要预先自定义代码功能，所以很多朋友并没有很关注它，根据自己的网站类型和功能，如果有时候需要频繁使用某一代码功能框架，还是推荐大家使用短代码功能，能够大大节省你的代码输入和维护时间。

比如：使用短代码在WP博客任意位置添加广告

WordPress Codex: http://codex.wordpress.org/Shortcode_API

添加使用短代码功能的代码很简单：

function NAME($atts, $content=null){
	return 'CODE';
}
add_shortcode('SHORTCODE','NAME');

解释：
NAME - 设定代码名字
CODE - 代码主体框架
SHORTCODE - 要使用的短代码

延伸阅读：http://www.wheatnotes.com/2010/11/wordpress-shortcode-api/

分类: wordpress 标签: wordpress, WP, 代码, 短代码, 网站

2010年10月5日麦子 4 条评论

HTTP 请求是很费时间的，主要花费在建立连接的过程中。其实真正传输 1K 和 10K 数据的时间相差无几，但哪怕你请求的是一个仅有几字节的小文件，一样需要花费一定的连接时间。

这个时候 CSS Sprites (tools via1 via2) 和 Inline Images with Data URLs 就可以帮上大忙了。

CSS Sprites 的思想是把很多张小图片（如：图标）整合为一张大图，再利用 CSS 的 background-position 属性在正确的地方显示正确的图标。这样的好处就是把原来的 n 个 HTTP 请求减少至 1。

Inline Images with Data URLs 的思想是干脆直接把装饰性的小图片写在 CSS 或 HTML 中，不需要 HTTP 请求。当然不能直接在文本中写二进制的 0101，但经过 base64 编码后就可以了。基本的用法是：

data:[<mediatype>][;base64],<data>

例：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGvSURBVDjLpZO7alZREEbXiSdqJJDKYJNCkPBXYq12prHwBezSCpaidnY+graCYO0DpLRTQcR3EFLl8p+9525xgkRIJJApB2bN+gZmqCouU+NZzVef9isyUYeIRD0RTz482xouBBBNHi5u4JlkgUfx+evhxQ2aJRrJ/oFjUWysXeG45cUBy+aoJ90Sj0LGFY6anw2o1y/mK2ZS5pQ50+2XiBbdCvPk+mpw2OM/Bo92IJMhgiGCox+JeNEksIC11eLwvAhlzuAO37+BG9y9x3FTuiWTzhH61QFvdg5AdAZIB3Mw50AKsaRJYlGsX0tymTzf2y1TR9WwbogYY3ZhxR26gBmocrxMuhZNE435FtmSx1tP8QgiHEvj45d3jNlONouAKrjjzWaDv4CkmmNu/Pz9CzVh++Yd2rIz5tTnwdZmAzNymXT9F5AtMFeaTogJYkJfdsaaGpyO4E62pJ0yUCtKQFxo0hAT1JU2CWNOJ5vvP4AIcKeao17c2ljFE8SKEkVdWWxu42GYK9KE4c3O20pzSpyyoCx4v/6ECkCTCqccKorNxR5uSXgQnmQkw2Xf+Q+0iqQ9Ap64TwAAAABJRU5ErkJggg==" />

可以借助 Motobit Software 在线生成 base64 的图片内容。

Inline Images with Data URLs 的局限：

1. IE 5-7 不支持，IE 8 支持。为了兼容 IE，可以把这些部分单独写入 IE 专用的 CSS 文件中。
2. 文本形式的图片占用比二进制更多的字节。Base64 格式比二进制大 39%~45%，在 gzip 压缩后，这个比例减小至 8%~9%。最好在 base64 编码之前优化图片本身。
3. 浏览器对 inline 图片有大小限制。Opera 最大支持 4,100 字节，Firefox 最大支持 100K。所以最好只应用在小图片上。

补充一点：CSS Sprites 和 Inline Images with Data URLs 是可以同时使用的。

分类: wordpress 标签: HTML, wordpress, WP, 代码, 图标, 图片, 网站

2010年9月16日麦子 4 条评论

答小小童鞋的问题，在调用WP热评文章的时候如果没有相关文章，则显示“当前无热评文章”。

以前的代码是直接调用其SQL语句，今天新分享一段PHP代码，更为简洁，效率更高。只需要在合适的地方插入如下代码：

<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 10");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount = 0) { ?>
<li>当前无热评文章</li>
<?php } } ?>
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> (<?php echo $commentcount ?>)</li>
<?php } } ?>

分类: wordpress 标签: PHP, wordpress, 代码, 博客, 数据库, 文章, 网站

第 1 页，共 4 页12 3 4 »