请叫我一米

主题名称: AirSquare

主题链接: https://yimity.com/2011/12/01/airsquare.html

主题描述:AirSquare. 非常个性化的两栏主题，黄金分割比，左侧背景图片后台点击更换（目前9种，支持自定义），后台选项，包括自定义站点统计，网站自定义使用说明，直接输入 Google+ 或者 Twitter 用户民即可，评论框右侧 125*125 像素的广告，Windows Phone 7 风格支持（Beta），评论错误/正确提示，评论 Ajax 支持,SEO 友好，支持自定义菜单，支持IE8以上，及 Chrome，Firefox，Opera等现代浏览器。不需要任何插件支持。

主题版本: 1.0

主题作者: 一米

网站预览: http://demo.yimity.com/ 预览主题启用 Windows Phone 7 风格

后台预览：请发邮件给我，我给你地址和账号。

发布日期：12月01日。

主题预览：http://demo.yimity.com/

介绍：

AirSquare. 非常个性化的两栏主题，黄金分割比，左侧背景图片后台点击更换（目前9种，支持自定义），后台选项，包括自定义站点统计，网站自定义使用说明，直接输入 Google+ 或者 Twitter 用户民即可，评论框右侧 125*125 像素的广告，Windows Phone 7 风格支持（Beta），评论错误/正确提示，评论 Ajax 支持,SEO 友好，支持自定义菜单，支持IE8以上，及 Chrome，Firefox，Opera等现代浏览器。不需要任何插件支持。即使 JS 加载失败，功能同样正常可用。

安装：

1.将本文件解压，得到 airsquare 文件夹及其内部文件，将此文件夹上传到 WordPress 程序中的 wp-content/themes 文件夹。

2.进入博客后台，外观-主题， 选择 AirSquare 主题，并且激活。

3. 进入后台，设置-阅读，博客页面至多显示 24 篇文章。

使用：

1. 上传成功，并激活成功即可使用。

2. 在 外观-主题选项中，点击“主题选项”即可设置相关的选项，不要忘记点击“更新选项”哦。

3. Logo 地址处，填上 Logo 图片的地址即可。 逐渐更新支持。

4. 后台所有输入框 HTML 都是可用的，但是建议该用的时候用，不该用的就不要用。

5. 统计代码 可以使用单选框选择是否可用，选中状态则起作用，否则统计代码即使在后台能看到，但不会起作用。

6. Twitter 及 Google+ 输入用户名后或者 Google + 个人链接最后的数字后，则会在鼠标悬停于右侧的时候搜索栏得最左边显示链接。

7. 多语言支持。目前只有中文简体，繁体中文及英语。

9. 其他任何问题，请联系 [email protected]。谢谢。

10. 主题为 1.0 版，如有先关建议或 Bugs 也请发邮件，谢谢。

当然，此份主题不是免费的，但是只出售 10 份，每份 99 元人民币。同时附赠价格同样 99 元的 BreakUp 一份。

购买者，享受不限时一对一服务，但是也只是我一人，当然了，大家都有工作，最好是晚上，最最好是星期周末把。

购买者，发送 知乎 邀请一枚，Hostloc 要请也有。

购买者，可以享受右侧页脚搜索栏社会化图标的更换服务。

最后，当然是走支付宝，你放心，我放心。

更新日志：

更新 , 时间 , 版本

增加留言模板和友链模板 , 2011.12.01 , 1.0.1

优化文章内容样式 , 2011.12.02 , 1.0.3

添加登陆后编辑功能 , 2011.12.14 , 1.0.4

错误一：

行内元素和块级元素混用，例如：

<a href="#"><h2>This is wrong.</h2></a>
<h2><a href="#">This is right.</a></h2>

a 行内元素，hx 块级元素。

错误二：

img 元素未包括 alt 属性。

<img src="a.jpg" />  <!--Wrong-->
<img src="a.jpg" alt="this is a image" /> <!--Right-->

错误三：

正确的时候使用 lists 结构。例如：

<p>
    This<br />
    is<br />
    very<br />
    Wrong<br />
</p>
<ul>
    <li>This</li>
    <li>is</li>
    <li>very</li>
    <li>Right</li>
</ul>

错误四：

标签应该从语义触发，而非样式。例如：strong 更好

<b>This is bold.<b>
so<strong>is this, but this is better.</strong>

错误五：

最好用 css 而非结构控制，例如：

This is
<br />
<br />
Wrong.

错误六：

还是注意标签的语义化。例如：

<s>和<strike>已经被抛弃了。
<del>和<ins>才是新的可用的哦。

错误七：

使用内联样式，例如：

<h2 style="color:red;">This is Wrong.</h2>

错误八：

在 html 结构中使用已经被抛弃的属性，而应该使用 css 控制，例如：

<img src="a.jpg" alt="xxx" border="0" />

错误九：

没有正确使用 header 标签，例如：

<p><strong>This is header but wrong</strong></p>
<p>this is content.</p>

<h2>This is right header</h2>
<p>this is content.</p>

错误十：

不要使用非标准的和不推荐使用的标签，例如：

<blink>This is Wrong.</blink>
和
<marquee>This is Wrong.</marquee>

话说，文件上传控件的样式，就如同下拉框的样式一样，没办法通过 CSS 直接进行控制，虽然不影响正常的网页浏览，但是对于一个设计师的心血来说，不能完全还原，还是比较令人郁闷的，但是，活人总不能叫尿憋死，所以总是有很多方法能够达到我们的目的，例如： Mr.Think 的这篇文章，或者这篇文章。但是第一个不兼容IE6，比较遗憾，虽然我现在在自己的项目上坚决不支持IE6，但是，解决方法还是要掌握的。

另一个因素就是 Chrome 下的空间样式和 IE 以及 火狐下不同，具体就不举例子了。

最近想到这个问题，所以写出来和大家分享下，也兼容IE6，那就是，用一个层，将 input 空间给包裹起来，然后将控件相对定位，将包裹的层，例如 a 绝对定位到控件之上，并且给其样式，可以使用 span 或者 a 元素，由你喜欢，但是为了兼顾 IE6 ，还是用 a 比较好，因为 a 可以在 IE6 下产生 手型 的鼠标样式。所以这里就拿 a 来举例，span 或者其他的，就自己发挥吧。

先看图。

那么接下来，就看代码了。

先是结构

	<input type="text" id="a" readonly="readonly" />
	<a href="javascript:void(0);" class="input">
		浏览
		<input type="file" id="file">
	</a>

此处第一个 input 为模仿 文件路径的输入框，使用 javascript 在选择完成之后，把文件路径填到此处。第二个 a 标签模仿控件，第三个 input 是实际起作用的控件，只不过隐藏了而已。

然后是 CSS

a.input {
	width:100px;
	height:25px;
	line-height:25px;
	background:#08f;
	text-align:center;
	display:inline-block;/*具有行内元素的视觉，块级元素的属性 宽高*/
	overflow:hidden;/*去掉的话，输入框也可以点击*/
	position:relative;/*相对定位，为 #file 的绝对定位准备*/
}
a.input:hover {
	background:#f80;
}
a{
	text-decoration:none;
	color:#FFF;
}
#file {
	opacity:0;/*设置此控件透明度为零，即完全透明*/
	filter:alpha(opacity=0);/*设置此控件透明度为零，即完全透明针对IE*/
	font-size:100px;
	position:absolute;/*绝对定位，相对于 .input */
	top:0;
	right:0;
}

然后是 javascript 代码，此处给了 原生的 javascript 和 jQuery 方式。

原生 javascript

<script type="text/javascript">
	var input1 = document.getElementById("file");// 获得控件对象
	input1.onchange = inputPath; //当控件对象 input1 有变化时执行函数 inputPath
	function inputPath() {
		var input2 = document.getElementById("a"); // 获取 input 对象 input2
		input2.value=input1.value;  // 将控件 input1 的值赋给 input2 
	}
</script>

jQuery 方式

<script type="text/javascript">
$(function(){
	$("#file").change(function(){  // 当 id 为 file 的对象发生变化时
	        $("#a").val($("#file").val());  //将 #file 的值赋给 #a 
	})
})
</script>

OK，打完收工.

对，还有演示呢：

这其实是一个非常普通的问题，在 很久 很久 很久，真的很久以前，已经被说过很多次了，不过都是英文的，其实中文的也有很多，但是我还是想翻一下，一方面自己加深印象，两一方面很多初学者也可以很容易搜都，看到。那么就开始了。

问题描述就是，当使用了浮动(float)布局的时候，就是父层的高度不会自动扩展到浮动子层的高度，具体表现为，子层的高度出来了，但是利用开发工具看的话，只能看到子层的高度，父层就只有那么一点点高。

解决办法其实很简单，1. 在浮动元素之后使用 clear 属性，清除浮动即可，2. 给父元素使用 clearfix 属性，但是IE支持有问题。3. 使用 overflow 属性，这里就着重讲一下 overflow 清除浮动的方法。

例子一：

此例子主要讲解浮动内容子层，没有把父层撑开的问题，简单的结构可以如下。

<div class="container">
    <div class="a"></div>
    <div class="a"></div>
</div>

.a {float:left;}

这就会导致父层不被撑开的问题，解决方法很简单，父元素 overflow:auto 或者 overflow:hidden。即：

.container {
    overflow: auto;
}

如图：

例子二：

overflow: auto; 也可以被用作阻止文字环绕图片，例如 再设计 WP 博客的评论时，一个头像在左侧，评论内容在右侧，又不能设置宽度等，此时就可以给评论的层设置 overflow: auto; 即可，优点就是不用设置宽度或者浮动，即可使文字自动不环绕图片，又在其后。

如图：

.image {
    float: left;
}
.text {
    overflow: hidden;
}

问题：

1. overflow: auto; 如果文字很长，或者图片很大，总之内容超出了父层规定的区域，那么就会产生滚动条。

解决办法
1. 使用 overflow: hidden; 当然，如果你意思是多余内容要产生滚动条，那就用 auto;
2.使用 word-wrap: break-word;(文字) 和 max-width: 100%;(图片，使用后就自动缩放了)（当然，IE6 你懂得，我几乎放弃它了，不过）

demo 那么就要出现了。

demo1

demo2

来源：翻译

主题名称: BreakUp

主题链接: https://yimity.com/2011/08/01/breakup.html

主题描述:BreakUp. 全站 Ajax 支持,SEO 友好，支持自定义菜单，支持IE8以上，及 Chrome，Firefox，Opera等现代浏览器。不需要任何插件支持。

主题版本: 0.8

主题作者: 一米

网站预览: https://yimity.com/

发布日期：8月6日，七夕节。

介绍：

全站 Ajax 支持，SEO 不受影响，JS加载失败，同样可用。支持键盘左右键翻页，支持图片标志，支持自定义菜单，自适应宽度设计。

安装：

1.将本文件解压，得到 breakup 文件夹及其内部文件，将此文件夹上传到 WordPress 程序中的 wp-content/themes 文件夹。

2.进入博客后台，外观-主题， 选择 BreakUp 主题，并且激活。

3. 进入后台，设置-阅读，博客页面至多显示 1 篇文章。

使用：

1. 上传成功，并激活成功即可使用。

2. 在 外观-主题选项中，点击“主题选项”即可设置相关的选项，不要忘记点击“更新选项”哦。

3. Logo 地址处，填上 Logo 图片的地址即可。

4. 后台所有输入框 HTML 都是可用的，但是建议该用的时候用，不该用的就不要用，比如 网站描述或者关键字。

5. 统计代码 可以使用单选框选择是否可用，选中状态则起作用，否则统计代码即使在后台能看到，但不会起作用。

6. Twitter 及 Google+ 输入用户名后或者 Google + 个人链接最后的数字后，则会在导航栏最右边链接。

7. 描述及关键词 SEO内容，如果是首页，则显示后台设定内容，如果是单页则会使用当前文章的前200字符作为描述，此文章标签作为关键字。建议最好填写。如果不填写，则默认为站点标题和副标题。

8. 多语言支持。目前只有中文简体，繁体中文及英语。

9. 其他任何问题，请联系 [email protected]。谢谢。

10. 主题为0.8版，说明只是到目前为止的完善，如有先关建议或 Bugs 也请发邮件，谢谢。

当然，因为我最近想买一个可以看书的 Android 平板，所以此份主题不是免费的，但是只出售 10 份，每份 99 元人民币。现接受预定，预定期8月1日至5日晚24时止。预订价 88 元。先付 10 元定金即可。不买不退哦亲。

购买者，享受不限时一对一服务，但是也只是我一人，当然了，大家都有工作，最好是晚上，最最好是星期周末把。

购买者，发送 G+ 邀请一枚，如果想要 知乎 邀请也有，Hostloc 要请也有，现在又增加了 Google Music 邀请，不过只有两枚。还有我可以邀请的，都可以邀请你。

购买者，可以享受首页导航右侧社会化图标的更换服务。

额，我要忙死了。为了平板值！

最后，预定链接：http://item.taobao.com/item.htm?id=12445127655  支付宝，你放心，我放心。

更新：时间 版本

2011.8.16 0.8.1
1. 更改左右方向键翻页为上下 Page 键翻页，防止评论时冲突。
2. 修复评论上部的 回复 和 引用 错误。
3. 完善菜单，增加支持三级菜单，鼠标悬停“网络”可查看。
4. 更新语言文件
5. 计划改变首页样式，中间为文章列表，右侧为侧边栏，单篇文章则中间为文章，右侧为评论。

此教程，完全使用CSS3 制作一个动态的导航菜单，不使用 JavaScript 等技术。

先来看 HTML

首先第一步是使用HTML完成网站的结构，此处 使用了很多 HTML5 方面的内容，但是对于IE6 7 8来说，必须使用另一种技术来使其支持 HTML5，这里使用 html5.js （详细），需要放在 <Head> 标签之中，使用了条件判断，只对IE有效。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>
        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <!-- Including the Lobster font from Google's Font Directory -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
        <!-- Enabling HTML5 support for Internet Explorer -->
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
   <body>
        <header>
            <h1>CSS3 Animated Navigation Menu</h1>
            <h2>&laquo; Read and download on Tutorialzine</h2>
        </header>
        <nav>
            <ul class="fancyNav">
                <li id="home"><a href="#home" class="homeIcon">Home</a></li>
                <li id="news"><a href="#news">News</a></li>
                <li id="about"><a href="#about">About us</a></li>
                <li id="services"><a href="#services">Services</a></li>
                <li id="contact"><a href="#contact">Contact us</a></li>
            </ul>
        </nav>
        <footer>Looks best in Firefox 4, usable everywhere.</footer>
    </body>
</html>

此处使用了Google  Web Font API,包括了100多种字体文件，可以随时使用在自己的项目上，当然都托管在 Google 的服务器上，不过几乎都是英文字体，对国内用处不是非常大。
更多…