错误一:

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

<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>

记下来,祭奠6年的爱情,5年异地恋,每年见面的时间加起来不足一个星期,1年一个城市,只是每个月能见一两面了而已。或许,只是为了记下来,等到所有的东西都不在,想起的时候心不再痛,不在有想哭的感觉的时候,再放出来吧。

2011.7.19
分手

2011.7.20 - 2011.7.28
一切都还好,还了很多东西,就是感觉失落,不想说话,总有想哭的冲动,突然一个人的感觉,总是很不习惯,不过我想会好起来的。

2011.7.29
突然很想抽烟,买了包烟,买了个打火机,妈妈差点发现。

2011.7.30
上了会网,感觉还行,只是有种透不过气的憋闷。烟抽了差不多半包吧,每一根头都疼,有时候会恶心。

2011.7.31
上午一个人,还是早点回西安吧,睡了整整一天。

2011.8.1-2011.8.5
上班的感觉还不错,比较忙,想不起很多东西,所以过的还不错。期间收到了 EMS 的信用卡。

2011.8.6
一个人的周末莫名的难过,想删了所有的联系方式,但是还是忍住了,打算到一个月的时候,将所有东西都删掉。
受不了了,或许我也有难过的时候买东西的习惯吧,买了个昂达的VI30,花了1500,心理感觉好很多了。

2011.8.7
睡觉,看电影,《初恋那些小事》,哭了。你知道我有多爱你吗?知道吗?

2011.8.8-2011.8.12
上班的时候总是好一点,但是貌似越来越难受了,想到了就会非常有哭的冲动。几乎一个星期两包烟,空的时候总是忍不住想抽烟,一根接一根。

2011.8.13
做梦了,梦到和你复合了。还好没有哭。

2011.8.14
看电影,买了好几包泡面,不想出门。

2011.8.15-2011.8.19
上班的时间比较空,但是心理更难受,说不出的难受,其实我真的希望下班之后回到家看见你在门口等我,虽然理智告诉我不能继续了,但是我真的希望你能一直坚持的说咱们继续吧,一直坚持一直坚持直到我答应。
但是没有。每天至少三四根烟,一空就想抽。

2011.8.20
想了想去赛格给笔记本清了和灰,加了两根内存,心理舒服多了。
把脚上的红绳剪断丢掉了。

2011.8.21
睡觉,重做了个系统,忙碌的时候想不起你,感觉挺好的,一想起,就想哭。越来越没出息了。

2011.8.22
看了部电影《财神客栈》又哭了,第二次哭了,为什么越来越难受。

2011.8.23
又梦见你了。

2011.8.24
还是梦见你了,你说要复合,但是我想我们肯定回不去了,所以拒绝你了。

2011.8.25
现在每天都坐207,不敢看你的单位,不敢看之前走过的路,每次看到都会眼红。
每次打扫了房间,放好鞋子袜子了,每做一件事,潜意识里都会想是否是按你的意思做的,是否让你满意了,潜意识里还是希望我做这件事能让你高兴。
很苦恼,几乎每件事都是。
下午看到天气成那样子了,真的很想很想很想给你打电话问你怎么回家?可是我还是忍住了。晚上和龚应杰聊天,说我没出息。

2011.8.26
晚上睡觉梦见你,在公交车上,但又好像在船上,我努力的接近你,你拍拍旁边的座位,于是我们和好了,可是后来,你又走了。
接了一单私活,大概有300块吧,想给你分享一下喜悦呢,但才想起来,已经不可以了。

2011.8.27-2011.8.28
没有梦见你了,不过我想了很久很久,我鼓起勇气又加了你的 QQ,跟你聊天。

2011.8.29
晚上做梦梦见被蛇咬了,网上说是交好运或者有才。但才没有,我想试试我的运气。
但是你说都回不去了,其实我真的可以回去的。你忙吧。
我决定,要坚决的忘记你,永远的忘记你。

再见,我六年的爱。

或许,永不再见

至此,结束。

话说,文件上传控件的样式,就如同下拉框的样式一样,没办法通过 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

例子二:

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. 其他任何问题,请联系 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. 计划改变首页样式,中间为文章列表,右侧为侧边栏,单篇文章则中间为文章,右侧为评论。