今天媛媛问我一个关于水平导航栏的问题，确实把我给稳住了，记得老杨在做他的主题的时候曾经让我查过这个问题，但是当时没有用心去领会所以也就没有弄懂，今天找了些资料，算是弄明白怎么回事了，现在跟大家分享一下： 首先水平导航栏通常是由如下代码构成的： HTML语言: Codee#2734 <ul class=“nav”> <li><a href=“” >测试</a></li> <li><a href=“” >首页页面</a></li> <li><a href=“” >相册</a></li> <li><a href=“” >关于我</a></li> </ul>
分类为 'css' 的文章
如果把一个border应用到一个table样式，那么border的作用域是表格的外边框，而不是给任何的单元格画上边框轮廓，但是如果你应用边框给单元格（td {border：1px solid black；}），那么会在两个单元格之间留下一条间隙，这样看起来非常难看。一个能同时消除间隙，又能消除单元格双边框的方法： CSS语言: 消除双边框和中间的间隙 table { border-collapse:collapse; }
css中用background-image属性给元素的背景添加了图片。例如要把图片作为网页背景可以给body标签创建一个样式： CSS语言: body { background-image:url(images/bg.gif); } 其中url中的值可以用引号引住也可以不用。 关于背景图片的重复可以用如下属性来控制：background-repeat，属性值有： no-repeat：不重复，只显示图片一次。用于设计网站的logo。 repeat-x：在x轴上平铺。可以用来设置图片横幅。 repeat-y：在y轴上平铺，可以用它来添加一个工具条。
css中的float属性是把元素移动到左边或者右边。在这个过程中，浮动元素下方的内容移动上来包围浮动元素。 其中float属性值有以下几个： left：样式元素移动到左边，下方的元素则包围元素的右边。 right：样式元素移动到右边，下方元素则包围元素的左边。 none：关闭float，并把对象放在他的正常位置上。 有时候浮动元素左移或者右移之后，其下面的元素就要上移来天填充空白，但是可能某些元素是不愿意上移的，这就需要设置停止浮动。又或者是有几个浮动图片靠得很近，并且他们都不是很宽，那么他们就会浮动上来并列排着，但是这几幅图片又不是等高的，这样的布局肯定会很难看，此时我们就要用停止浮动来组织图片并排排列。用到的属性是：clear 此属性指示元素不要包围浮动的元素。清除元素本质上是强破它下落到浮动元素的下方。属性值： left：禁止该浮动元素的左边出现浮动元素。如果有的话则下落值下一行。 right：禁止浮动元素的右边出现浮动元素。 both：紧着浮动元素的左右两边出现浮动元素。 none：关闭清除，允许浮动元素的左右出现浮动元素。
平时一般用css的浮动属性来控制sidebar的位置，如果只是用浮动属性的话，那么其背景样色或者图片是随设sidebar的内容多少来填充的，这样势必会造成sidebar内容很少时那么背景颜色也填充很少，这样与主内容不相符，造成布局很难看。这里我们假设HTML中有两个<div>。其中一个是主内容，另一个是右边工具条。工具条浮动到右边，并有一个170px的宽度，由于工具条中的内容较少，他比主文本短。所以我们把那个html包在一个<div>中像这样： CSS语言: 例如如下代码 <div id=“wapper”> <div id=“main”> main content for page,this column has a lot of text and is much taller than the sidebar. </div> <div id=“sidebar”> sidebar content here </div> </div> 这样外层的div增长到与它内部最高元素一样高，因此即使#main div很高，包围的div也一样高，所以我们就可以利用这一点来设计#wrapper div的样式，带有与右边工具条等宽度的背景图片或者颜色，然后垂直平铺，这样就避免了背景图片或者颜色值只充有内容的sidebar。代码如下： CSS语言: 包装div的css代码 #wrapper { background:url(images/1.gif) repeat-y right top; } 这样设置以后浏览器就会自动的把背景图片显示在sidebar的下方，从而也就创建了带有背景颜色的sidebar
