打算学习一下这个主题的CSS

twentyfourteen.

也算是学习CSS的一个过程。阅读记录留在这个位置。

首先是reset,其中有一些html tag不清楚,在这里列列:
abbr:   缩略语,效果类似title.  等价于html5以前的acronym(首字母缩略词)。

applet = object, HTML5以后用object,以前用applet,表示一个嵌入式object.

aside: tag defines some content aside from the content it is placed in.

big:  定义大字体,html5中不支持。

blockquote: 定义一段引用

cite:  定义一个艺术品的标题。

code: 一段代码

dfn: 定义

ins:插入文章的文字,一般与del合用。

kbd: Defines keyboard input

dl:  tag defines a description list. dl tag is used in conjunction with dt (defines terms/names) and dd (describes each term/name)

ol: 序号列表

ul:无序号列表

fieldset:表单中的一组元素

figure: 用于在文档中插入一章图片

footer/header:文章或者section的头部脚部。

hgroup:组合文章头部

nav: 导航菜单。

section:定义文章的一个 section.

还有一些有用的css虚拟类来控制CSS。

其中最有兴趣的是这个主题如何实现在每个作者链接前加一个小人,在时间前面加一个小时钟。我看这个CSS看了N久,焦点应该集中在几个这样的语句中

.comment-edit-link:before {
content: “\f411”;
}

看到之后,我想,这个\f411应该就是插入的符号。于是我想从Unicode表中找到这个字符,但是unicode表中,这个位置是乱码(或者是乱码,因为我差了好几个,记不太清楚了,反正就是不对)。于是就郁闷了,不知道怎么回事。后来在百度上试着用几个关键字搜索了一圈,终于找到了原因。
这里的\f411是插入字符的unicode编码,但是在这个码区,基本上都是自定义的字符。
解决问题的关键是CSS3的font-face功能,font-face可以在页面中指定一个自定义的字体文件。在这个自定义的字体文件中,\f411被定义为一个小人或者是钟表的图标。然后在link的CSS中引用这个字体,同时在每个相应链接前加上这个字符就可以了。

基本上,可以在搜索font-face就可以找到一些列的故事了。
但是,才做起来比较麻烦。我想很直接的方法是先画一个小图标,然后利用:before 在链接前直接插入一个图标即可。内容大概是加入一个img标签。



本文地址: http://www.bagualu.net/wordpress/archives/3220 转载请注明




发表评论

电子邮件地址不会被公开。 必填项已用*标注