主题名称: 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 菜单
AirSquare 鼠标悬停
AirSquare 首页

介绍:

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. 其他任何问题,请联系 yimity@yimity.com。谢谢。

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

错误一:

行内元素和块级元素混用,例如:

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

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

错误二:

img 元素未包括 alt 属性。

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

错误三:

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

1
2
3
4
5
6
7
8
9
10
11
12
<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 更好

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

错误五:

最好用 css 而非结构控制,例如:

1
2
3
4
This is
<br />
<br />
Wrong.

错误六:

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

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

错误七:

使用内联样式,例如:

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

错误八:

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

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

错误九:

没有正确使用 header 标签,例如:

1
2
3
4
5
<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>

错误十:

不要使用非标准的和不推荐使用的标签,例如:

1
2
3
<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 或者其他的,就自己发挥吧。

先看图。

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

先是结构

1
2
3
4
5
	<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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

1
2
3
4
5
6
7
8
<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 方式

1
2
3
4
5
6
7
<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 清除浮动的方法。

例子一:

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

1
2
3
4
<div class="container">
    <div class="a"></div>
    <div class="a"></div>
</div>
1
.a {float:left;}

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

1
2
3
.container {
    overflow: auto;
}

如图:
overflow-auto

例子二:

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

如图:

1
2
3
4
5
6
.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

2011/08/01 / 29 评论 / 9014 围观

主题名称: 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. 其他任何问题,请联系 i@yimi.in。谢谢。

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有效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
< !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 的服务器上,不过几乎都是英文字体,对国内用处不是非常大。
阅读更多...