网络上有很多教程但是我还是写了这个！原因是使用简单的方法连接SSH以后还是ubuntu用户权限，当然我的方法也不难！只是启用了root用户权限登录SSH服务。
pcDuino更新升级工具下载 阅读全文
http://cdimage.ubuntu.com/releases/13.04/release/
系统 下载列表
虽然没有专用的镜像以供使用 不过我还是决定试试
puDunio 系统安装及升级教程
注意：存储设备在安装镜像的时候会被格式化内容 请做好备份
1.工具下载 win32diskimager 经常玩这个的朋友都知道这个是个将镜像写入移动存储器的工具 如 TF开 SD卡 U盘 等..
2.下载镜像文件 http://www.pcduino.com/?page_id=14 镜像你可以选择最新版本！
https://s3.amazonaws.com/pcduino ... imager_20130428.img {内核系统镜像文件}
https://s3.amazonaws.com/pcduino ... _ubuntu_20130428.7z {ubuntu系统镜像文件}
浏览器兼容之旅的第二站:各浏览器的Hack写法
作者：大漠 日期：2011-09-19点击：4200

前面一节《浏览器兼容之旅的第一站:如何创建条件样式》和大家一起探讨了如何创建条件样式，了解和学习了创建IE条件样式的方法以及他们所起的作用，特别是知道了条件注释所起的作用。。那么这一节将和大家一起学习：浏览器兼容之旅的第二站:各浏览器的Hack写法
虽然和大家在一起学习各浏览器的Hack的写法，但我还是要说“Hack对于一位专业的前端攻程师来说并不是一样很好的东西，我力求处理浏览器兼容，尽量不使用Hack写法来处理，除非实在没有办法的情况下，再加以使用。”下面我们先来简单的了解一下什么是CSS Hack。
Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。然后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，我们将CSS Hack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所需要的页面渲染效果。总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用，然后借助条件样式，使用其原CSS代码在一些浏览器解析，而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码。常见的就是在IE6下使用，不具体说，我想大家都有碰到过了。下面我们就一起来看看所有浏览器都具有什么Hack，换句话说，各种浏览器都能识别哪些CSS的写法。
下面是我收集有关于各浏览器下Hack的写法
1、Firefox
@-moz-document url-prefix() {
.selector {
property: value;
}
}
上面是仅仅被Firefox浏览器识别的写法，具体如：
@-moz-document url-prefix() {
.demo {
color:lime;
}
}
支持Firefox的还有几种写法：
/* 支持所有firefox版本 */
#selector[id=selector] { property: value; }
或者：
@-moz-document url-prefix() { .selector { property: value; } }
/* 支持所有Gecko内核的浏览器 (包括Firefox) */
*>.selector { property: value; }
2、Webkit枘核浏览器(chrome and safari)
@media screen and (-webkit-min-device-pixel-ratio:0) {
Selector { property: value; }
}
上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和 Safari浏览器：
@media screen and (-webkit-min-device-pixel-ratio:0) {
.demo { color: #f36; }
}
3、Opera浏览器
html:first-child>b\ody Selector {property:value;}
或者：
@media all and (min-width:0) {
Selector {property: value;}
}
或者：
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body Selector { property: value; }
}
上面则是Opera浏览器的Hack写法：
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .demo { background: green; }
}
4、IE9浏览器
:root Selector {property: value\9;}
上面是IE9的写法，具体应用如下：
:root .demo {color: #ff0\9;}
5、IE9以及IE9以下版本
Selector {property:value\9;}
这种写法只有IE9以及IE9以下版本能识别，这里需要注意此处“\9”只能是“\9”不能是别的，比如说“\8”，不然会失去效果的，如：
.demo {background: lime\9;}
6、IE8浏览器
Selector {property: value/;}
或者：
@media \0screen{
Selector {property: value;}
}
上面写法只有IE能识别，如：
.color {color: #fff/;}
或者：
@media \0screen{
.color {color: #fff;}
}
7、IE8以及IE8以上的版本
Selector {property: value\0;}
这种写法只有IE8以及IE8以上版本支持，如
.demo {color: #ff0\0;}
8、IE7浏览器
*+html Selector{property:value;}
或
*:first-child+html Selector {property:value;}
上面两种是IE7浏览器下才能识别，如：
*+html .demo {background: green;}
或者：
*:first-child+html .demo {background: green;}
9、IE7及IE7以下版本浏览器
Selector {*property: value;}
上面的写法在IE7以及其以下版本都可以识别，如：
.demo {*background: red;}
10、IE6浏览器
Selector {_property/**/:/**/value;}
或者：
Selector {_property: value;}
或者：
*html Selector {property: value;}
具体应用如下：
.demo {_width/**/:/**/100px;}
或者：
.demo {_width: 100px;}
或者：
*html .demo {width: 100px;}
上面具体介绍了各种版本浏览器下如何识别各种的Hack写法，包括了IE6-9以及现代版本的浏览器写法。综合上面的所述，我们针对不同浏览器的Hack写法主要分为两种从CSS选择器和CSS属性上来区别不同的Hack写法。下面我们分别来看这两种的不同写法：
CSS选择器的Hack写法
下面我们主要来看CSS选择器和CSS属性选择器在不同浏览器的支持情况。下面先来看CSS选择器支持情况。
CSS选择器的Hack写法
1、IE6以及IE6以下版本浏览器
* html .demo {color: green;}
2、仅仅IE7浏览器
*:first-child+html .demo {color: green;}
3、除IE6之外的所有浏览器（IE7-9, Firefox,Safari,Opera）
html>body .demo {color: green;}
4、IE8-9,Firefox,Safari,Opear
html>/**/body .demo {color: green;}
5、IE9+
:root .demo {color: red;}
6、Firefox浏览器
@-moz-document url-prefix() {
.demo {
color: red;
}
}
6、Webkit内核浏览器（Safari和Google Chrome）
@media screen and (-webkit-min-device-pixel-ratio:0) {
.demo { color: red; }
}
7、Opera浏览器
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .demo { color: red; }
}
8、iPhone / mobile webkit
@media screen and (max-device-width: 480px) {
.demo { color: red }
}
CSS属性Hack写法
1、IE6浏览器
.demo {_color: red;}
2、IE6-7浏览器识别
.demo {*color: red;}
3、所有浏览器除IE6浏览外
.demo {color/**/:red;}
4、IE6-9浏览器
.demo {color: red\9;}
5、IE7-8浏览器
.demo {color/*\**/:red\9;}
上面罗列的都是各种浏览器下的有关于CSS的Hack的写法，基中有针对于现代浏览器Safari,Google Chrome和Firefox的写法，而且也有针对于我们前端人员最讨厌的IE6-9的各版本浏览器的Hack的写法，而且这些Hack我们又分为CSS选择器的Hack写法和CSS属性的Hack写法。然而具体何种适用，大家可以要据自己的需求来定，下面列出我个人的两种写法：
一、经济实惠型定法：
这种写法注重单独的CSS的Hack写法。不同的浏览器使用不同的Hack写法，其实也只是以IE的Hack写法比较多（因为我们写Hack也主要是针对IE的浏览器）特别是IE6下的浏览器。单独为各种浏览器写Hack的好处是：针对各种浏览顺的Hack写法省力易记。因为其他的浏览器主要是针对现代浏览器，相对来说是比较少的。针对于这种Hack的使用，我推荐使用下面的方法：
.demo {
color: red;/*所有现代浏览器*/
color: green\9;/*所有IE浏览器*/
color: lime\0;/*IE8-9浏览器*/
*color: red;/*IE6-7浏览器*/
+color: blue;/*IE7浏览器*/
_color: orange;/*IE6浏览器*/
}
@media all and (min-width:0px){
color: #000;/*Webkit和Opera浏览器*/
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
color: #f36;/*Webkit内核浏览器*/
}
@media all and (-wekit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .demo {color: #369;} /*Opera*/
}
@-moz-document url-prefix(){
.demo{color:#ccc;}/* all firefox */
}
二、完美主义写法
这种方法是追求完美主义的写法，主要是配合我们上一节所说的IE条件注释，全部采用选择器Hack的写法。这种写法分两步：
1、创建条件样式表，并在HTML中body里添加相应的class类名：
<!–[if IE6]–><<![endif]–>
<!–[if IE7]–><![endif]–>
<!–[if IE8]–><![endif]–>
<!–[if IE9]–><![endif]–>
<!–[if !IE]–><![endif]–>
2、接着创建对应的样式
.demo {color: blue;}/*现代浏览器*/
.non-ie .demo {color: red;}/*除IE外浏览器*/
.ie9 .demo {color: yellow;}/*IE9浏览器*/
.ie8 .demo{color: green;}/*IE8浏览器*/
.ie7 .demo {color: orange;}/*IE7浏览器*/
.ie6 .demo {color: lime;}/*IE6浏览器*/
@media all and (min-width: 0px){
.demo {color:black;} /* webkit and opera */
}
@media screen and (-webkit-min-device-pixel-ratio:0){
.demo{color:#369;}/* webkit */
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .demo{color:#cf6;}/* opera */
}
@-moz-document url-prefix(){
.demo{color:#963;}/* firefox * /
}
上面就是目前各种浏览器下，相关CSS的Hack的写法，下面我们具体来看一个实例：
HTML Markup
test color
CSS Code
.demo {
color: red;/*所有现代浏览器*/
color: green\9;/*所有IE浏览器*/
color: lime\0;/*IE8-9浏览器*/
*color: red;/*IE6-7浏览器*/
+color: blue;/*IE7浏览器*/
_color: orange;/*IE6浏览器*/
}
:root .demo {color: #963\9;}
@-moz-document url-prefix(){
.demo{color:#897;}/* all firefox */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.demo { color: #000; }/*webkit*/
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .demo { color: red; }/*opera*/
}
请看最终效果图：
请面罗列了各浏览器下的Hack的写法，大家写浏览的CSS Hack时也可以参考下面的图表
注：上图要是看不清楚，可以点击鼠标右键，将图片保存到本地后浏览，效果会更佳。上图也可以前往centricle.com在线查看。
那么到此就介绍完了有关于各浏览器的CSS Hack的写法，大家在平时需要使用Hack时可以根据CSS的选择器Hack和CSS的属性Hack对号入坐，不过我还是强调在Web页面制作中尽量不要使用CSS Hack来处理兼容问题。因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求，或者说违背了浏览器的某些规则而先造成的，所以我们应该尽量通过结构或CSS的修改来达到各浏览器渲染一致效果，除非到了万不得已情况下，才考虑CSS的Hack。
之前在Wordpress的zww line主题不用插件实现WordPress分页导航的方法一文中介绍了如何通过代码实现分页导航的方法，但是当时由于技术有限，代码虽然搞出来了，却需要手动的将分页导航代码逐个添加到各个文件中，感觉很麻烦。现在有了更好的方法，只需在functions.php文件里定义好了，在别的文件直接调用就行了，省得来回复制粘贴一大段代码了。
方法如下，将下面的代码添加到主题文件functions.php里面最后一行“?>”前面即可。
//分页导航
function pagination($query_string){
global $posts_per_page, $paged;
$my_query = new WP_Query($query_string .”&posts_per_page=-1″);
$total_posts = $my_query->post_count;
if(emptyempty($paged))$paged = 1;
$prev = $paged - 1;
$next = $paged + 1;
$range = 5; // 修改数字,可以显示更多的分页链接
$showitems = ($range * 2)+1;
$pages = ceil($total_posts/$posts_per_page);
if(1 != $pages){
echo ”<div class=’pagination’>”;
echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? ”<a href=’”.get_pagenum_link(1).”‘ class=’fir_las’>最前</a>”:”";
echo ($paged > 1 && $showitems < $pages)? ”<a href=’”.get_pagenum_link($prev).”‘ class=’page_previous’>« 上一页</a>”:”";
for ($i=1; $i <= $pages; $i++){
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
echo ($paged == $i)? ”<span class=’current’>”.$i.”</span>”:”<a href=’”.get_pagenum_link($i).”‘ class=’inactive’ >”.$i.”</a>”;
}
}
echo ($paged < $pages && $showitems < $pages) ? ”<a href=’”.get_pagenum_link($next).”‘ class=’page_next’>下一页 »</a>” :”";
echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? ”<a href=’”.get_pagenum_link($pages).”‘ class=’fir_las’>最后</a>”:”";
echo ”</div>\n”;
}
}
然后在需要显示分页导航的地方添加如下代码（通常需要添加到如下文件：index.php，archive.php，search.php）：
<div class=”navigation”><?php pagination($query_string); ?></div>
至于css代码，我只给个示例，具体要什么样子，可以自己试着更改数据，比如换个颜色啥的，都挺简单的：
/** 翻页 **/
.navigation {
float:rightright;
width:700px;
margin: 5px 0 5px 0;
text-align:rightright;
}
.navigation_b {
float:rightright;
width:700px;
margin: 0 5px 0 0;
text-align:rightright;
}
.pagination {
line-height:25px;
}
.pagination span, .pagination a {
font-size:12px;
margin: 2px 6px 2px 0;
background:#fff;
border:1px solid #ccc;
color:#787878;
padding:2px 5px 2px 5px;
}
.pagination a:hover {
background: #0196E3;
border:1px solid #fff;
color:#fff;
}
.pagination .current {
background: #0196E3;
color:#fff;
font-size:12px;
padding:2px 5px 2px 5px;
}
.navigation a,.navigation_b a{
background:#fff;
padding:2px 5px 2px 5px;
border:1px solid #ccc;
}
wordpress非插件调用日志的第一张图片，其实这个衍生出去的话，是可以用在很多地方的。一般情况下，wordpress博客上大家都用插件来调用图片显示的，但是插件用多了会影响网站打开速度，严重影响用户体验，所以个人认为在不用插件能实现相关功能的情况下，就不用插件。下面是非插件调用wordpress日志的第一张图片的代码。……
【关键标签】：timthumb.php,博客相关,第一张图片,缩略图,非插件
wordpress非插件调用日志的第一张图片，其实这个衍生出去的话，是可以用在很多地方的。一般情况下，wordpress博客上大家都用插件来调用图片显示的，但是插件用多了会影响网站打开速度，严重影响用户体验，所以个人认为在不用插件能实现相关功能的情况下，就不用插件。下面是非插件调用wordpress日志的第一张图片的代码。
步骤1：首先打开主题的functions.php文件，将以下代码复制进去
function show_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<IMG.+SRC=['"]([^'"]+)['"].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){
$first_img = “/images/default.jpg”; // Define the Default image
}
return $first_img;
}
步骤2：接着下载TimThumb.php文件，放到主题目录下。
步骤3：打开主题下的index.php文件，找到文章循环调用区域，在你需要调用图片的地方加入以下代码：
<IMG alt=”<?php the_title(); ?>” src=”<?php bloginfo(‘template_directory’); ?>/timthumb.php?src=<?php echo show_image() ?>&w=200&h=200&zc=1&q=100″>
下面就timthumb.php的参数设置做些解释：
上列代码中的
w=200&h=200&zc=1&q=100
你可以自己修改，比如这句代表图片高度（h）与宽度（w）为200像素，并且（zc=1）自动裁剪（这样图片不会变形）图片质量100。默认情况下timthumb.php会自动在主题目录下新建cache的文件夹，如果没有建立，可自行建立，并附属性为644。
再附一篇关于用timthumb.php给WordPress添加缩略图的资料
timthumb.php是一个由Google开发的插件，现在有很多国外的Theme都使用这个插件给WordPress添加缩略图。
使用它有一个方便的好处，那就是你只需要指定一张图片便可以了，只要任何有执行代码的地方它都会自动实现缩略图功能。是不是非常方便呢？
那么现在就开始实施过程吧。
在你需要实现缩略图的地方，比如主题的index.php里，找到这句：
<?php the_title(); ?>
这句通常表示首页调用的文章标题，对，就是这里了。
现在需要在这句上面添加如下代码：
<a href=”<?php the_permalink() ?>” title=”<?php the_title(); ?>”>
<?php $thumbnail = get_post_meta($post->ID, ‘thumbnail’, true); ?>
<?php if($thumbnail !== ”) { ?>
<img src=”<?php bloginfo(‘stylesheet_directory’); ?>/timthumb.php?src=<?php echo $thumbnail; ?>&h=100&w=100&zc=1″ alt=”<?php the_title(); ?>” />
<?php } ?>
</a>
如果有多行表示标题的代码的话，在导航上面都添加代码。
接下来就是在发布文章时如何调用了：
发布文章是，在“添加新自定义域”里添加一个名称为“thumbnail”，值为图片路径的自定义域。如果不想添加自定义域，可以通过上面的调用第一张图片的方法来实现，只要把上面的
<?php echo $thumbnail; ?>
替换成
<?php echo show_image() ?>
当然，文章最上面的那段代码还是要加在functions.php文件中的
pcDuino是一种高性能，高性价比的迷你PC的平台，能够运行PC操作系统，如Ubuntu和Android的ICS等。它可以通过内置HDMI接口输出视频到电视或显示器屏幕。pcDuino专门针对开源社区快速增长的需求，即希望有一个平台可以运行完整的PC操作系统，容易使用的工具链和兼容流行的Arduino开放的生态系统，如Arduino shield和开源项目等。
昨天 把路由器刷砖了！很郁闷的说想了很多办法也不好使 ！电源灯闪烁 链接不到路由器 ping不通 ！在淘宝找了很多编程器 准备入手一个修复我的路由设备！结果找不到接口资料！而且淘宝上的下载器一般全部是针对stc单片机的下载器 所以实在木有办法 ！入手了一款TP-LINK的路由！
|
发表于 2013-5-18 23:45:26
发表于 2014-4-9 19:46:57
感谢楼主分享