li标签的间距问题 - 兼谈书写li的最佳方式 - 设计前沿
li标签的间距问题 - 兼谈书写li的最佳方式
文章出处： 作者：　发布时间：
????? 关键词:li标签的间距问题 - 兼谈书写li的最佳方式
新建一个简单的HTML测试文件，下面来测试ul li标签
&ul&& &li&&a href="#"&菜单一&/a&&/li&& &li&&a href="#"&菜单一&/a&&/li&& &li&&a href="#"&菜单一&/a&&/li&& &li&&a href="#"&菜单一&/a&&/li&& &li&&a href="#"&菜单一&/a&&/li&& &li&&a href="#"&菜单一&/a&&/li&& &/ul&& &ul&&li&&a href="#"&菜单一&/a&&/li&&li&&a href="#"&菜单一&/a&&/li&&li&&a href="#"&菜单一&/a&&/li&&li&&a href="#"&菜单一&/a&&/li&&li&&a href="#"&菜单一&/a&&/li&&li&&a href="#"&菜单一&/a&&/li&&/ul&
测试一，定义css为如下代码，效果如下
view plaincopy to clipboardprint?body{font-size:12margin:0}&& ul{list-style:margin:0;padding:0;width:120}&& ul li{background:height:20}&& ul li a{color:#padding:0 0 0 10}& body{font-size:12margin:0}ul{list-style:margin:0;padding:0;width:120}ul li{background:height:20}ul li a{color:#padding:0 0 0 10}
发现在IE5和IE5.5下左边都产生了空白，并且在IE5下，LI之间的行距产生空白,如下图
测试二，定义css为如下代码，
view plaincopy to clipboardprint?body{font-size:12margin:0}&& ul{list-style:margin:0;padding:0;}&& ul li{background:height:20width:120}&& ul li a{color:#padding:0 0 0 10}& body{font-size:12margin:0}ul{list-style:margin:0;padding:0;}ul li{background:height:20width:120}ul li a{color:#padding:0 0 0 10}
和测试一相比，只是将width:120从ul的定义放置到li的定义，解决了IE5和IE5.5左边产生空白的问题，而IE5的li之间的间距还是有,如下图
测试三，定义css为如下代码，(最佳写法)
body{font-size:12margin:0}ul{list-style:margin:0;padding:0;}ul li{background:height:20width:120vertical-align:}ul li a{color:#padding:0 0 0 10}
和测试二比较，在li的定义中加上vertical-align:ie5下正常，li之间的空白行距消失了，取得各个浏览器的效果一样，如下图
1.解决li在IE5下产生空白行距的方法：如果li定义了宽度，那么需要在li里面再定义vertical-align:
2.宽度最好不要定义在UL，定义在LI或者UL外层的DIV里面
3. 书写LI的最佳方式，li里面要书写高度和宽度，以及vertical-align:（for ie5/win bug），或者在ul外面加上一层div，并定义宽度，那么在li里面不用定义宽度和vertical-align:，也显示正常(IE5下不会产生空白行距)，不过高度还是要定义一下的。
??????????????About this Service
What is this? Do I need it?
The W3C CSS Validation Service is a free software created by the W3C
to help Web designers and Web developers check Cascading Style Sheets (CSS).
It can be used on this
on the web, or downloaded
and used either as a java program, or as a java servlet on a Web server.
Do you need it? If you are a Web developer or a Web designer, this
tool will be an invaluable ally. Not only will it compare your style sheets to the
CSS specifications, helping you find errors, typos, or incorrect uses of CSS, it will
also tell you when your CSS poses some risks in terms of usability.
The explanation above is incomprehensible! Help!
Most documents on the Web are written in a computer language called HTML. This language
can be used to create pages with structured information, links, and multimedia objects. For
color, text, and layout, HTML uses a styling language called CSS, short for "Cascading Style Sheets".
What this tool does is help people authoring CSS check, and fix if necessary, their CSS Style Sheets.
So, this is the authority on what is correct CSS and what isn't?
No. It is a helpful and reliable tool, but a software tool, and like every software, it has some
The actual reference on Cascading Style Sheets are the .
What does “Valid CSS” mean? Which version of CSS does this validator use?
According to the :
The validity of a style sheet depends on the level of
CSS used for the style sheet. […]
valid CSS 2.1 style sheet must be written according to the grammar of CSS 2.1.
Furthermore, it must contain only at-rules, property names, and property values defined in this specification.
By default, this validator checks style sheets against the grammar, properties and values defined in the
specification,
but other CSS profiles can be checked against by using the options.
CSS is an evolving language, and it is considered by many that “CSS” is a single grammar
(the one defined in the latest specification) with a number of properties and acceptable
values defined in various profiles.In a future version of this validator, the default behavior may be to check
style sheets against that latest “CSS grammar” and the cloud of all standardized CSS properties and values.
How much does it cost?
Nothing. The service is free. The source is
and you are free
to download it, use it, modify it, distribute it,
If you really like it, you are welcome to
or donate to W3C via the
, but nobody forces you to.
Who wrote this tool? Who maintains it?
W3C maintains and hosts the tool, thanks to the work and contributions by W3C staff,
volunteer developers and translators. See the
for details. .
Can I help?
Of course. If you are a java programmer, you can help the CSS Validator project by
checking out the ,
adopting and fixing ,
or helping build new features.
But you do not need to be a coder to help build and maintain this tool: you can also help improve the
documentation, participate in translating the validator in your language, or subscribe to the
and discuss about the tool
or help other users.
Any other question?
If you have any question regarding CSS or the CSS validator, check out the available
. But before that, make sure that your question
or comment is not covered already by the .
Developers' corner
What is the CSS Validator written in? Is the source available somewhere?
The W3C CSS validator is written using the java language, and yes, its source
is available, using CVS: you can
or follow the instructions there to download the whole source tree. For a quick
overview of the classes used in the CSS Validator code, check out the
Can I install and run the CSS Validator myself?
It is possible to download and install the CSS validator, and to run it either from the command line, or
as a servlet in a Web server. Read the
for installation and use.
Can I build an application upon this validator? Is there an API?
Yes, and . The CSS Validator has a (RESTful)
which should make it reasonably easy to build applications (Web or otherwise) upon it. Good manners and
respectful usage of shared resources are of course customary: make sure your applications sleep() between
calls to the validator, or install and run your own instance of the validator.当前位置: >
如何处理div+css布局左右浮动问题
阅读工具：字体：
上次分享了《DIV+CSS网页设计制作页面布局技巧分享！》，相信我们对网页布局技巧方面已经有所了解，其实在我们进行div+css网页布局时，还会出现css布局左右出现浮动的问题。这里就在分享下如何处理div+css布局左右浮动问题。
　　先看以下代码片段：
　　css代码：
　　#left{ float:width:200}
　　#right{ float:width:８00}
　　页面代码：
　　&body&
　　&div id=&content&&
　　 &div id=&left&&左边一栏&/div&
　　 &div id=&right&&右边一栏&/div&
　　&/div&
　　&/body&
　　 这是我们css书写使用最常用的代码来进行左右布局。css的书写还有其它的方式，如左侧固定好宽度右侧自动适应。
　　左侧固定好宽度右侧自动适应css代码：
　　#left{float: width:200}
　　#right{margin-left:200}
　　 上面css的书写是最标准的css的书写，如果在以上的基础上书写的css代码而出现了左右浮动的现象，那就需要检查左右侧里面的代码是否书写规范，&/div&此div结尾代码是否多写或少写而导致的。我们只需要注意以上情况，基本就可以解决好div+css布局左右浮动问题了。
(责任编辑：大宝库)
------分隔线----------------------------
网上整理的比较好的css命名规则，为css代码的规范化做参考，增加代码的可读性。 id的...
要点1：css代码 优化作用与意义 1、减少占用网页字节。在同等条件下缩短浏览器下载css...
在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元...
以下是一些 DIV+CSS设计页面 时的常见错误的预防技巧，希望能对大家有所帮助。 1. 检...
看各种CSS菜单是一个很有意思的事情，下面将介绍13个不错的Javascript和CSS菜单。 1) ...
本篇已得到原作者 Steve Dennis 的翻译准予，在此Jorux表示感谢！ 本教程主要参考 Cre...
赞助商链接
赞助商链接常用的css hack简单写法与兼容性介绍-常见问题-Css教程-壹聚教程网常用的css hack简单写法与兼容性介绍本文章来收藏了大量的关于在css中hack的用法及在不同浏览器下hack语法写法，有需要了解的朋友可参考一下。 区别不同浏览器的CSS hack写法：
区别IE6与FF：
&&&&&&& background:*background:
区别IE6与IE7：
&&&&&&& background:green !background:
区别IE7与FF：
&&&&&&& background: *background:
区别FF，IE7，IE6：
&&&&&&& background:*background:green !*background:
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!
FF不能识别*，但能识别!
& IE6 IE7 FF
!important & & &
------------------------------------------------------
另外再补充一个，下划线&_&,
IE6支持下划线，IE7和firefox均不支持下划线。
& IE6 IE7 FF
!important & & &
于是大家还可以这样来区分IE6，IE7，firefox
: background:*background:_background:
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
&!DOCTYPE html&&
&&& &title&Css Hack&/title&&
&&& &style&&
&&& #test&&
&&&&&&& width:300&&
&&&&&&& height:300&&
&&&&&&& background-color:&&&&& /*firefox*/
&&&&&&& background-color:red9;&&&&& /*all ie*/
&&&&&&& background-color:yellow;&&& /*ie8*/
&&&&&&& +background-color:&&&&&&& /*ie7*/
&&&&&&& _background-color:&&&&&& /*ie6*/
&&& :root #test { background-color:purple9; }& /*ie9*/
&&& @media all and (min-width:0px){ #test {background-color:black;} }& /*opera*/
&&& @media
and (-webkit-min-device-pixel-ratio:0){ #test {background-color:} }& /*chrome and safari*/
&&& &/style&&
&&& &div id=&test&&test&/div&&
上面这段代码大家可以直接copy出来，保存成html在各浏览器试试。下面我来分析下：
&&& background-color: 各个浏览器都认识，这里给firefox用；
&&& background-color:red9;9所有的ie浏览器可识别；
&&& background-color:yellow; 是留给ie8的，但笔者测试，发现最新版opera也认识，汗。。。不过且慢，后面自有hack写了给opera认的，所以，我们就认为是给ie8留的；
&&& +background-color: + ie7定了；
&&& _background-color: _专门留给神奇的ie6；
&&& :root #test { background-color:purple9; } :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple;}，呃。。。这个。。。，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性9;}
&&& @media all and (min-width:0px){ #test {background-color:black;} } 这个是老是跟ie抢着认的神奇的opera，必须加个,不然firefox，chrome，safari也都认识。。。
&&& @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:} }最后这个是浏览器新贵chrome和safari的。
下面再看一些常用的
.all-IE{property:value9;}
:root .IE-9{property:value/;}
.gte-IE-8{property:value;}
.lte-IE-7{*property:}
.IE-7{+property:}
.IE-6{_property:}
.not-IE{property//:}
@-moz-document url-prefix() { .firefox{property:} }
@media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:} }
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:} }
@media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit{property:} }
IE8 最新css hack： 　　&9&　例:&border:1px 9;&.这里的&9&可以区别所有IE和FireFox. 　　&&　IE8识别，IE6、IE7不能. 　　&*&　IE6、IE7可以识别.IE8、FireFox不能. 　　&_&　IE6可以识别&_&,IE7、IE8、FireFox不能.　　
　　_background-color:#CDCDCD; /* ie 6*/
　　*background-color:#dddd00; /* ie 7*/
　　background-color:red ; /* ie 8/9*/
　　background-color:blue 9;
上一页： &&&&&下一页：相关内容欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 的书写格式
好的和的书写格式有助于顺利快速的开发项目，同时也会形成较好的习惯，同时日后维护也方便。
问题：不工整和代码会不会不符合
答案：不会造成不符合W3C标准。因为代码的工整与否是展示的代码排列方式，与兼容和W3C标准无关。
问题2：为什么有些网页和的代码都是紧挨着的如&div&与&div&或css中CSS样式选择器也是没有空格。
答：这是因为有些网页开发者为了避免新手抄写他的代码，待网页发布上传前将复制一份或直接将CSS代码和html标签间的空格清除，所以我们查看网页源代码时候代码都是一起而且感觉混乱的。解决办法是用Microsoft Visual Studio中工具整理排列代码或使用DW4代码格式化工具即可实现整理代码即可排列整齐有序。
接下来我们分别来解释与介绍代码书写格式及对应CSS范例教程
1、DIV书写格式
Div书写在html文件里，排列有序缩进有序将给开发和日后维护带来帮助。典型缩进范例：
&id=&main&&&&&&&id=&header&头部内容&&&&&&id=&center&&&&&&&&&&&class=&cent_left&中部居左内容&&&&&&&&&&class=&cent_right&中部居右内容&&&&&&&&&&&id=&footer&底部版权内容&&
注意以上代码缩进-父级与子级有相对缩进。一般缩进4个空格字符半角英文位置。
2、CSS书写格式
好的CSS书写格式能给你带来维护和制作上方便。可以分析的选择器之间个关系。
&#main{... ...}
#main #header{... ...}
#main #centen{... ...}
#main #footer{... ...}
#centen .cent_left{... ...}
#centen .cent_right{... ...}
以上花括号内值省略这里不讲。这里主要是CSS 派生关系，不同区域DIV块以空一行隔开。
CSS 格式还有
#main #header{
#main #centen{
#main #footer{
#centen .cent_left{
#centen .cent_right{
一般不推荐CSS的花括号分别占一行方式排列。同时这样会大大增加占用CSS文件内行数，维护也不好辨认。
以上介绍了DIV+CSS的常见排列代码书写格式。当然如果你有好的排列方式或自己习惯排列方式你也可以使用，这里讲解DIV CSS书写格式主要让大家规范下CSS和DIV代码格式。如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 14:02
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台