Category Archives: css

css导航条

在CSS横的导航条里,一个无知的人(我自己)总想使用padding来将导航条的宽度撑高,这样得到的后果却是各个浏览器的效果不一致.他的做法如下:

.ul{ list-style:none; width:100%; height:51px; background-color:#933; outline:none;}
.ul li{ float:left; display:block; margin-top:0px; border:0; padding:0; margin:0;}
.ul a{ color:white; display:block; border:none; text-decoration:none; padding:15px 20px; }

当无知的人受的启发后的结果如下:

ul{ list-style:none; width:100%; float:left; height:51px; background-color:#933; outline:none;}
ul li{ float:left; display:block; margin-top:0px; border:0; padding: 0; margin:0;}
ul li a{ color:white; display:block; border:none; text-decoration:none; line-height:51px; padding:0px 20px; }

没错,是line-height,就是使用line-height将行高撑得跟ul的高度一样即可.

css中中文字体的表现方法

中文名 英文名 Unicode
Mac OS
华文细黑 STHeiti Light [STXihei] 534E65877EC69ED1
华文黑体 STHeiti 534E65879ED14F53
华文楷体 STKaiti 534E658769774F53
华文宋体 STSong 534E65875B8B4F53
华文仿宋 STFangsong 534E65874EFF5B8B
丽黑 Pro LiHei Pro Medium 4E3D9ED1 Pro
丽宋 Pro LiSong Pro Light 4E3D5B8B Pro
标楷体 BiauKai 680769774F53
苹果丽中黑 Apple LiGothic Medium 82F9679C4E3D4E2D9ED1
苹果丽细宋 Apple LiSung Light 82F9679C4E3D7EC65B8B
Windows
新细明体 PMingLiU 65B07EC6660E4F53
细明体 MingLiU 7EC6660E4F53
标楷体 DFKai-SB 680769774F53
黑体 SimHei 9ED14F53
宋体 SimSun 5B8B4F53
新宋体 NSimSun 65B05B8B4F53
仿宋 FangSong 4EFF5B8B
楷体 KaiTi 69774F53
仿宋_GB2312 FangSong_GB2312 4EFF5B8B_GB2312
楷体_GB2312 KaiTi_GB2312 69774F53_GB2312
微软正黑体 Microsoft JhengHei 5FAEx8F6F6B639ED14F53
微软雅黑 Microsoft YaHei 5FAE8F6F96C59ED1
Office
隶书 LiSu 96B64E66
幼圆 YouYuan 5E7C5706
华文细黑 STXihei 534E65877EC69ED1
华文楷体 STKaiti 534E658769774F53
华文宋体 STSong 534E65875B8B4F53
华文中宋 STZhongsong 534E65874E2D5B8B
华文仿宋 STFangsong 534E65874EFF5B8B
方正舒体 FZShuTi 65B96B6382124F53
方正姚体 FZYaoti 65B96B6359DA4F53
华文彩云 STCaiyun 534E65875F694E91
华文琥珀 STHupo 534E6587742573C0
华文隶书 STLiti 534E658796B64E66
华文行楷 STXingkai 534E6587884C6977
华文新魏 STXinwei 534E658765B09B4F

最好是使用Unicode的方法在CSS中对中文字体表现。

css reset前后的不同

先来两段css:

第一段
<style type=”text/css”>
body{ margin:0; padding:0; }
#header{ width:100%; background-color:#222222; padding:30px 0; }
.content{ margin:0 auto; width:746px; }
.content ul{ list-style:none; }
.content ul li{ float:left; display:black; padding:0 10px; }
.content ul li a{ color:#FFF; }
</style>
<div id=”header”>
<ul style=”list-style:none; “>
<li style=”float:left;”><a href=”http://mgtuiw.blog.163.com/blog/#”>a</a></li&gt;
<li style=”float:left;”><a href=”http://mgtuiw.blog.163.com/blog/#”>b</a></li&gt;
<li style=”float:left;”><a href=”http://mgtuiw.blog.163.com/blog/#”>c</a></li&gt;
<li style=”float:left;”><a href=”http://mgtuiw.blog.163.com/blog/#”>d</a></li&gt;
</ul>
</div>

第二段
<style type=”text/css”>
body,ul,li{ margin:0; padding:0; }
#header{ width:100%; background-color:#222222; padding:30px 0; }
.content{ margin:0 auto; width:746px; }
.content ul{ list-style:none; }
.content ul li{ float:left; display:black; padding:0 10px; }
.content ul li a{ color:#FFF; }
</style>
<div id=”header”>
<ul style=”list-style:none; “>
<li style=”float:left;”><a href=”http://mgtuiw.blog.163.com/blog/#”>a</a></li&gt;
<li style=”float:left;”><a href=”http://mgtuiw.blog.163.com/blog/#”>b</a></li&gt;
<li style=”float:left;”><a href=”http://mgtuiw.blog.163.com/blog/#”>c</a></li&gt;
<li style=”float:left;”><a href=”http://mgtuiw.blog.163.com/blog/#”>d</a></li&gt;
</ul>
</div>

它们分别得到的 header 的高度是 76px 和 60px .而不同的地方是上面的红色部分。这也是reset前和reset后的差别。reset前字体px为16px, 但reset后的字体px居然为0，但也是我想要的结果.

个人认为reset后的css是易于控制的。

[转载]Vim 的 XML 文档编辑插件——xml.vim

原文来自于 http://lyanry.is-programmer.com/posts/492.html

Vim 有一个用于编辑 XML 文档的插件 xml.vim 非常好用，下载地址是：

http://www.vim.org/scripts/script.php?script_id=1397

这 个插件的安装很简单，将下载的 xml.vim 文件复制到 ~/.vim/ftplugin 目录下，并在该目录下分别建立连接 docbk.vim、xsl.vim、html.vim、xhtml.vim，让它们皆指向 xml.vim。然后重新启动 vim 即可。

如果你使用的是 gvim，且所编辑的文档的扩展名是 “.xml”，那么菜单栏会有一个 “xml” 菜单，对那些不愿意输入命令的用户可能会有用。

下面介绍一下 xml.vim 的几个常用功能。

标记的自动闭合

输入前一半标记，会自动添加后一半标记，并把光标放置在标记中间。

譬如，输入：

<para>

vim.xml 会将其闭合为：

<para>|</para>

注：上面代码中出现的 “|” 符号，这里用来表示 vim 中的插入光标。

标记换行＋闭合

在输入标记的前一半后，再输入一个 > 符号，会进行换行：标记的前半部分与后半部分各占一行；标记行的中间有一空行，显示插入光标。

譬如，输入：

<para>>

xml.vim 会将其处理为：

<para>
|
</para>

标记的快速输入

直接输入标记名后面跟随两个分号，即可实现标记的换行＋闭合。

譬如，输入：

para;;

可以得到：

<para>
|
</para>

快速修改标记名

将光标移动到要修改的标记上，在 normal 模式下输入 c ，这时：如果你用的是 gvim，就会跳出一个对话框，在其文本框中输入新的标记名即可；如果你是在终端中使用 vim，只需要 vim 下面的命令窗口中输入新的标记名即可。

在标记上跳跃

将光标移动到某一标记名上，然后在 normal 模式下摁 % 键，光标就可以在标记的前半部分与后半部分来回跳转。如果当前光标是在标记的括号上，那么它就像 vim 往常那样，在括号的前半部分与后半部分来回跳跃了。

更详细地用法

xml.vim 的详细用法请参考其说明文档，在 vim 的 normal 模式下，输入：

:h xml-plugin

即可打开说明文档。

html&&css

#container { width:400px; color:white; list-style:none; padding-left:0;}
#container li{ float:left; background-color:#292929; border-left:1px solid black; border-right:1px solid #3c3c3c; padding:10px;}
#container li:first-child {border-top: none;}
li:last-child {border-bottom:none;}

上面是一个让ul里面的各个li可以和谐相处的秘决。
一个让我整天脑痛的事就是各li中的字体要怎样才能真正的居中对齐呢？直到今天我才明白，使用padding吧。padding:10px就是将字体四周撑大10px,那它就会只呆在中间了！
还有就是我希望每个li元素间都有一条线隔开。不过当使用border-left/border-right的时候，两个相邻的li元素的线条会重叠，变会很宽的一条。现在不会了，因为有了：
#container li:first-child{border-left:none;}
#container li:last-child{border-right:none;}



让一个div居中的方法原来也不难。主要是以下的写法：
position:relative; margin:0 auto;
有这两个即可