相信明天会更好 » css http://www.sunnyweiwei2008.cn Tomorrow will be better Thu, 25 Feb 2010 08:20:04 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 css制作水平导航栏 http://www.sunnyweiwei2008.cn/2009/07/horizon-nav-css.html http://www.sunnyweiwei2008.cn/2009/07/horizon-nav-css.html#comments Tue, 07 Jul 2009 08:28:52 +0000 sunny http://www.sunnyweiwei2008.cn/?p=283 今天媛媛问我一个关于水平导航栏的问题，确实把我给稳住了，记得老杨在做他的主题的时候曾经让我查过这个问题，但是当时没有用心去领会所以也就没有弄懂，今天找了些资料，算是弄明白怎么回事了，现在跟大家分享一下：

首先水平导航栏通常是由如下代码构成的：

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中的display:inline来完成，但是这种方法有个毛病就是他的效果是是每一个分类不是相同的大小，字数不一样，那么大小不一样，如果想要每一个选项具有相同的大小就要如下方法实现：

CSS语言: Codee#2735
<style type=“text/css”>
.nav{
list-style-type:none;
float:left;
width:100%;

}
.nav li{
float:left;
}
.nav a{
float:left;
display:block;
width:12em;
background-color:cyan;
text-align:center;
margin-right:5px;
</style>

这样可以实现导航栏中的每一条都有相同的宽度，而且文字居中。效果如图：水平导航栏

ps：

  • a，span等都是行内元素，那么如果在行内元素上设置width是不会起作用的。
  • 如果想用第一种方法那么要在li上设置样式display:inline,同时注意a不能设置它的display:block否则不会水平显示。
]]> http://www.sunnyweiwei2008.cn/2009/07/horizon-nav-css.html/feed 0 css控制表格边框 http://www.sunnyweiwei2008.cn/2008/09/css%e6%8e%a7%e5%88%b6%e8%a1%a8%e6%a0%bc%e8%be%b9%e6%a1%86.html http://www.sunnyweiwei2008.cn/2008/09/css%e6%8e%a7%e5%88%b6%e8%a1%a8%e6%a0%bc%e8%be%b9%e6%a1%86.html#comments Tue, 09 Sep 2008 12:46:36 +0000 sunny http://www.sunnyweiwei.cn/?p=47 如果把一个border应用到一个table样式，那么border的作用域是表格的外边框，而不是给任何的单元格画上边框轮廓，但是如果你应用边框给单元格（td {border：1px  solid  black；}），那么会在两个单元格之间留下一条间隙，这样看起来非常难看。一个能同时消除间隙，又能消除单元格双边框的方法：

table
{
border-collapse:collapse;
}
]]> http://www.sunnyweiwei2008.cn/2008/09/css%e6%8e%a7%e5%88%b6%e8%a1%a8%e6%a0%bc%e8%be%b9%e6%a1%86.html/feed 0 用css控制背景图片 http://www.sunnyweiwei2008.cn/2008/09/%e7%94%a8css%e7%a9%ba%e5%80%bc%e8%83%8c%e6%99%af%e5%9b%be%e7%89%87.html http://www.sunnyweiwei2008.cn/2008/09/%e7%94%a8css%e7%a9%ba%e5%80%bc%e8%83%8c%e6%99%af%e5%9b%be%e7%89%87.html#comments Sun, 07 Sep 2008 12:15:16 +0000 sunny http://www.sunnyweiwei.cn/?p=44 css中用background-image属性给元素的背景添加了图片。例如要把图片作为网页背景可以给body标签创建一个样式：

CSS语言:
body
{
background-image:url(images/bg.gif);
}

其中url中的值可以用引号引住也可以不用。

关于背景图片的重复可以用如下属性来控制：background-repeat，属性值有：

  • no-repeat：不重复，只显示图片一次。用于设计网站的logo。
  • repeat-x：在x轴上平铺。可以用来设置图片横幅。
  • repeat-y：在y轴上平铺，可以用它来添加一个工具条。

定位背景图片可以用如下属性：background-position：center  center、center  top、center  bottom、top  right、bottom  right、left  top 、left  bottom等等，也可以用精确的值来定位例如background-position：5px  8px，属性值也可以是百分比。

背景图片的固定用如下属性：background-attachment：scroll/fixed 。前者的意思是背景图片随着网页的内容一起滚动，后者的意思是把图片保留在背景中的固定位置上如logo。

当然你为了空值背景图片没有必要一遍一遍的详细输入各个属性，一个简单的做法是：

background：#FFF url（../image/logo.gif）fixed center center  no-repeat;

给无序列表使用图片–以往无需列表的项目符号是一个黑点。如果想要用图片代替那么首先你要隐藏正常显示在列表项目旁边的项目符号。像这样：

.sidebar li
{
list-style:none;
}

现在就可以添加图片做项目符号了：

background-image:url(images/flower.gif);
background-repeat:no-repeat;

添加完毕以后，你就可以看到新的项目符号了。可能会有一些错位，比如项目符号与文字重叠或者项目符号偏上/下等等这些在稍微调试一下即可。

background-position:0px  2px;//将项目符号下移
padding-left:18px;//将内容与项目符号间的空间增大，来显示图片
margin-bottom:6px;//将两个无序列表之间留点空隙
给工具条添加一个圆角的背景图片（该图片高度并不是很高）：
注意事项：
  • 工具条此时不要用border属性，否则显示不出圆角。
  • 为了是工具条的内容与背景中底边的花朵不重叠可以设置：padding-bottom：75px来加大距离。
  • 要是工具条的宽度与背景图片的宽度相同，不要padding-left、padding-right属性。
  • 要设置图片的位置为center  bottom这样才能保证工具条的下方是圆角。
]]> http://www.sunnyweiwei2008.cn/2008/09/%e7%94%a8css%e7%a9%ba%e5%80%bc%e8%83%8c%e6%99%af%e5%9b%be%e7%89%87.html/feed 1 css中的浮动元素 http://www.sunnyweiwei2008.cn/2008/09/css%e4%b8%ad%e7%9a%84%e6%b5%ae%e5%8a%a8%e5%85%83%e7%b4%a0.html http://www.sunnyweiwei2008.cn/2008/09/css%e4%b8%ad%e7%9a%84%e6%b5%ae%e5%8a%a8%e5%85%83%e7%b4%a0.html#comments Sun, 07 Sep 2008 03:10:11 +0000 sunny http://www.sunnyweiwei.cn/?p=43 css中的float属性是把元素移动到左边或者右边。在这个过程中，浮动元素下方的内容移动上来包围浮动元素。

其中float属性值有以下几个：

  • left：样式元素移动到左边，下方的元素则包围元素的右边。
  • right：样式元素移动到右边，下方元素则包围元素的左边。
  • none：关闭float，并把对象放在他的正常位置上。

有时候浮动元素左移或者右移之后，其下面的元素就要上移来天填充空白，但是可能某些元素是不愿意上移的，这就需要设置停止浮动。又或者是有几个浮动图片靠得很近，并且他们都不是很宽，那么他们就会浮动上来并列排着，但是这几幅图片又不是等高的，这样的布局肯定会很难看，此时我们就要用停止浮动来组织图片并排排列。用到的属性是：clear

此属性指示元素不要包围浮动的元素。清除元素本质上是强破它下落到浮动元素的下方。属性值：

  • left：禁止该浮动元素的左边出现浮动元素。如果有的话则下落值下一行。
  • right：禁止浮动元素的右边出现浮动元素。
  • both：紧着浮动元素的左右两边出现浮动元素。
  • none：关闭清除，允许浮动元素的左右出现浮动元素。
]]> http://www.sunnyweiwei2008.cn/2008/09/css%e4%b8%ad%e7%9a%84%e6%b5%ae%e5%8a%a8%e5%85%83%e7%b4%a0.html/feed 0 css来实现sidebar的背景颜色或图片充满网页的整个高度 http://www.sunnyweiwei2008.cn/2008/09/css%e6%9d%a5%e5%ae%9e%e7%8e%b0sidebar%e7%9a%84%e8%83%8c%e6%99%af%e9%a2%9c%e8%89%b2%e6%88%96%e5%9b%be%e7%89%87%e5%85%85%e6%bb%a1%e7%bd%91%e9%a1%b5%e7%9a%84%e6%95%b4%e4%b8%aa%e9%ab%98%e5%ba%a6.html http://www.sunnyweiwei2008.cn/2008/09/css%e6%9d%a5%e5%ae%9e%e7%8e%b0sidebar%e7%9a%84%e8%83%8c%e6%99%af%e9%a2%9c%e8%89%b2%e6%88%96%e5%9b%be%e7%89%87%e5%85%85%e6%bb%a1%e7%bd%91%e9%a1%b5%e7%9a%84%e6%95%b4%e4%b8%aa%e9%ab%98%e5%ba%a6.html#comments Sun, 07 Sep 2008 02:08:09 +0000 sunny http://www.sunnyweiwei.cn/?p=42 平时一般用css的浮动属性来控制sidebar的位置，如果只是用浮动属性的话，那么其背景样色或者图片是随设sidebar的内容多少来填充的，这样势必会造成sidebar内容很少时那么背景颜色也填充很少，这样与主内容不相符，造成布局很难看。这里我们假设HTML中有两个<div>。其中一个是主内容，另一个是右边工具条。工具条浮动到右边，并有一个170px的宽度，由于工具条中的内容较少，他比主文本短。所以我们把那个html包在一个<div>中像这样：

<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。代码如下：

#wrapper
{
background:url(images/1.gif) repeat-y right top;
}

这样设置以后浏览器就会自动的把背景图片显示在sidebar的下方，从而也就创建了带有背景颜色的sidebar

]]> http://www.sunnyweiwei2008.cn/2008/09/css%e6%9d%a5%e5%ae%9e%e7%8e%b0sidebar%e7%9a%84%e8%83%8c%e6%99%af%e9%a2%9c%e8%89%b2%e6%88%96%e5%9b%be%e7%89%87%e5%85%85%e6%bb%a1%e7%bd%91%e9%a1%b5%e7%9a%84%e6%95%b4%e4%b8%aa%e9%ab%98%e5%ba%a6.html/feed 0