随身笔记

作者： admin

文本包围图片效果

文字包围环绕图片效果，这样效果的文章看起来舒服图文说明很人性化。

点此运行效果

 点此运行效果

2012 12.21
一款经典实用的表格效果

现在网站虽然抛弃了传统的表格布局网站但是表格在整理数据的时候还是需要用到的或者是论坛注册的时候也需要到，本人推荐一个用的比较多的表格效果。
点此处运行效果：运行效果

[code]<html>
<head>
<title>一款经典实用的表格效果</title>
<meta http-equiv=”content-Type” content=”text/html;charset=gb2312″>
<style type=”text/css”>
*{font-family:Tahoma, Arial, Helvetica, Sans-serif,”宋体”;}
table{
width:700px;
margin:0px auto;
font:Georgia 11px;
font-size:12px;
color:#333333;
text-align:center;
border-collapse:collapse;/*细线表格代码*/
}
table td{
border:1px solid #999;/*细线表格线条颜色*/
height:22px;
}
caption{text-align:center;font-size:12px;font-weight:bold;margin:0 auto;}
tr.t1 td {background-color:#fff;}
tr.t2 td {background-color:#eee;}
tr.t3 td {background-color:#ccc;}
th,tfoot tr td{font-weight:bold;text-align:center;background:#c5c5c5;}
th{line-height:30px;height:30px;}
tfoot tr td{background:#fff;line-height:26px;height:26px;}
thead{border:1px solid #999;}
thead tr td{text-align:center;}
#page{text-align:center;float:right;}
#page a,#page a:visited{width:60px;height:22px;line-height:22px;border:1px black solid;display:block;float:left;margin:0 3px;background:#c9c9c9;
text-decoration:none;}
#page a:hover{background:#c1c1c1;text-decoration:none;}
.grayr {padding:2px;font-size:11px;background:#fff;float:right;}
.grayr a {padding:2px 5px;margin:2px;color:#000;text-decoration:none;;border:1px #c0c0c0 solid;}
.grayr a:hover {color:#000;border:1px orange solid;}
.grayr a:active {color:#000;background: #99ffff}
.grayr span.current {padding:2px 5px;font-weight:bold; margin:2px; color: #303030;background:#fff;border:1px orange solid;}
.grayr span.disabled {padding:2px 5px;margin:2px;color:#797979;background: #c1c1c1;border:1px #c1c1c1 solid;}
</style>
<script type=”text/javascript”>
<!–
function selectAll()
{
if(this.checked==true) {
checkAll(‘test’);
}
else {
clearAll(‘test’);
}
}
function checkAll(name)
{
var el = document.getElementsByTagName(‘input’);
var len = el.length;
for(var i=0; i<len; i++)
{
if((el[i].type==”checkbox”) && (el[i].name==name))
{
el[i].checked = true;
}
}
}
function clearAll(name)
{
var el = document.getElementsByTagName(‘input’);
var len = el.length;
for(var i=0; i<len; i++)
{
if((el[i].type==”checkbox”) && (el[i].name==name))
{
el[i].checked = false;
}
}
}
–>
</script>
</head>
<body>
<table>
<caption>
一款经典实用的表格效果 by www.xgllseo.com
</caption>
<thead>
<tr>
<th>
<input onClick=”if(this.checked==true) { checkAll(‘test’); } else { clearAll(‘test’); }” type=”checkbox” value=”” name=”test” title=”全选/取消”/>
</th>
<th>昵称</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>电话</th>
<th>邮箱</th>
<th>QQ</th>
<th>主页</th>
</tr>
</thead>
<tbody id=”tab”>
<tr>
<td>
<input type=”checkbox” value=”a” name=”test”/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>77134056@qq.com</td>
<td>77134056</td>
<td>https://sdeno.com</td>
</tr>
<tr>
<td>
<input type=”checkbox” value=”a” name=”test”/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>77134056@qq.com</td>
<td>77134056</td>
<td>https://sdeno.com</td>
</tr>
<tr>
<td>
<input type=”checkbox” value=”a” name=”test”/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>77134056@qq.com</td>
<td>77134056</td>
<td>https://sdeno.com</td>
</tr>
<tr>
<td>
<input type=”checkbox” value=”a” name=”test”/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>77134056@qq.com</td>
<td>77134056</td>
<td>https://sdeno.com</td>
</tr>
<tr>
<td>
<input type=”checkbox” value=”a” name=”test”/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>77134056@qq.com</td>
<td>77134056</td>
<td>https://sdeno.com</td>
</tr>
<tr>
<td>
<input type=”checkbox” value=”a” name=”test”/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>77134056@qq.com</td>
<td>77134056</td>
<td>https://sdeno.com</td>
</tr>
<tr>
<td>
<input type=”checkbox” value=”a” name=”test”/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>77134056@qq.com</td>
<td>77134056</td>
<td>https://sdeno.com</td>
</tr>
<tr>
<td>
<input type=”checkbox” value=”a” name=”test”/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>77134056@qq.com</td>
<td>77134056</td>
<td>https://sdeno.com</td>
</tr>
<tr>
<td>
<input type=”checkbox” value=”a” name=”test”/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>77134056@qq.com</td>
<td>77134056</td>
<td>https://sdeno.com</td>
</tr>
<tr>
<td>
<input type=”checkbox” value=”a” name=”test”/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>77134056@qq.com</td>
<td>77134056</td>
<td>https://sdeno.com</td>
</tr>
<tr>
<td>
<input type=”checkbox” value=”a” name=”test”/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>77134056@qq.com</td>
<td>77134056</td>
<td>https://sdeno.com</td>
</tr>
<tr>
<td>
<input type=”checkbox” value=”a” name=”test”/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>77134056@qq.com</td>
<td>77134056</td>
<td>https://sdeno.com</td>
</tr>
<tr>
<td>
<input type=”checkbox” value=”a” name=”test”/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>77134056@qq.com</td>
<td>77134056</td>
<td>https://sdeno.com</td>
</tr>
<tr>
<td>
<input type=”checkbox” value=”a” name=”test”/>
</td>
<td>免费模板网</td>
<td>男</td>
<td>25</td>
<td>福建省</td>
<td>12345678910</td>
<td>77134056@qq.com</td>
<td>77134056</td>
<td>https://sdeno.com</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input onClick=”if(this.checked==true) { checkAll(‘test’); } else { clearAll(‘test’); }” type=”checkbox” value=”” name=”test” title=”全选/取消”/>
</td>
<td colspan=”8″>
<div class=”grayr”><span class=”disabled”> < </span><span class=”current”>1</span><a href=”#?page=2″>2</a><a href=”#?page=3″>3</a><a href=”#?page=4″>4</a><a href=”#?page=5″>5</a><a href=”#?page=6″>6</a><a href=”#?page=7″>7</a>…<a href=”#?page=199″>199</a><a href=”#?page=200″>200</a><a href=”#?page=2″> > </a></div>
</td>
</tr>
</tfoot>
</table>
<a href=”https://sdeno.com”>个人随笔</a>
<script type=”text/javascript”>
<!–
var Ptr=document.getElementById(“tab”).getElementsByTagName(“tr”);
function $() {
for (i=1;i<Ptr.length+1;i++) {
Ptr[i-1].style.backgroundColor = (i%2>0)?”#fff”:”#eee”;
}
}
window.onload=$;
for(var i=0;i<Ptr.length;i++) {
Ptr[i].onmouseover=function(){
this.tmpClass=this.className;
this.style.backgroundColor = “#ccc”;

};
Ptr[i].onmouseout=function(){
for (i=1;i<Ptr.length+1;i++) {
Ptr[i-1].style.backgroundColor = (i%2>0)?”#eee”:”#fff”;
}
}
}
//–>
</script>
</body>
</html>[/code]

2012 12.21
WordPress在文章中添加代码边框达到美观效果

我们在写技术文章的时候或者其他的情况下要在文章中添加代码为了网站的整体美观最好也在代码外添加边框效果也让读者看的舒服，无论是在WordPress文章中添加代码边框还是在其他的程序中一样可以使用这种方法。

1，下载run-code.js文件。

2，找到主题所在的 functions.php 文件，在最后添加下面代码:

[code]/**添加可运行代码框*/
function textarea($atts, $content = null) {
return ‘<script src=”js/run-code.js” type=”text/javascript” charset=”utf-8″></script>
<form>
<div align=”center”>
<textarea id=”code” style=”width:100%;background:#efefef;border:1px dashed #cccccc;”>’.$content.'</textarea>
</div>
</form>
‘;}add_shortcode(“code”, “textarea”);

[/code]

3，撰写文章时在可视化或HTML模式使用下面代码都可以运行指定代码。
[ code ]你的代码 [ /code ]

效果就跟本站一样

2012 12.20
如何在WordPress文章内插入脚本
在WordPress写文章的时候，如果想插入一点简单的脚本，例如：
```
javascript:tucao()
```
```
onclick=”tucao()”
```
插入这样的代码，但是会被WordPress的安全机制自动过滤成：
```
javascript:void(0)
```
```
onclick=”"
```
那如何解决以上问题呢？以下是解决方法：
1.打开wp-include目录下的formatting.php文件，注释掉大概第2321行
```
$safe_text = str_replace( “\n”, ‘\\n’, addslashes( $safe_text ) );
```
2.上传后，刷新后台，保存刚才保存不上的文章。
3.把formatting.php恢复原样。
2012 12.20
解决wordpress文章标题过长自动截取以及wordpress首页文章显示方式冗余过长问题

情况是这样的在写wordpress文章时我们避免不了有时候文章标题过长以后自动换行破坏了网站外观美感或者首页的文章显示冗长也会破坏网站外观美感也许有人想到用编辑器里面自带的“more”标签了决解但是首页每显示的文章的部分框就会高度不一致这样也破坏美观，我的解决思路是这样的：首页显示文章的代码和文章内链显示文章的代码各自独立修改样式或者代码相互不影响。网上我也搜索过类似的问题但是网上大部分说的也就是限制文章标题的显示字数根本解决不了问题。我的方法如下，
步骤：

1，打开single.php文件注释掉或者删除原来的

<?php get_template_part( ‘content’, ‘single’ ); ?>

2，删除之后首页可以显示文章但是点击文章进去后就无法看到内容了我们要在single.php原来删除的代码位置重新加如下代码：

<?php the_time(‘Y’); ?>年

<?php the_time(‘n’); ?>月

<?php the_time(‘d’); ?>日

<?php the_title();?>文章标题

<?php the_content(); ?>文章内容

首页显示的文章就在content.php修改，文章内链就在single.php文件修改。在首页点击文章就可以链接进去了之后就是修改样式的问题这里就不讲解了。添加以上代码之后首页显示文章的代码和文章内链显示文章的代码各自独立修改样式或者后台代码就相互不影响了。

3，首页文章标题推荐加上以下代码：

选择器｛
color:#7e5025;
font-size: 26px;
font-weight: bold;
padding-top:5px;
line-height:50px;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
｝

4，首页文章显示框的高度只要在content.php文件修改.entry-content类样式高度即可，文章内链就在single.php文件修改。
技术含量不高但是面对只懂CSS不熟悉PHP代码的我来说当时耗了不少时间了觉得挺使用的就放出来了,效果跟本站一样。

2012 12.19

作者： admin

文本包围图片效果

一款经典实用的表格效果

WordPress在文章中添加代码边框达到美观效果

如何在WordPress文章内插入脚本

解决wordpress文章标题过长自动截取以及wordpress首页文章显示方式冗余过长问题