乐趣参与 » CSS

CSS打造简洁的导航栏

leplay — Sun, 15 Nov 2009 12:37:32 +0000

其实要考虑的问题只有两个：一个是两个栏目直接的间隔线，另一个是鼠标放到栏目上时背景颜色的变化。
我们一个一个来解决。

间隔线其实是由一条颜色为#DDD和一条颜色为#FFF的边框组成，可以由border-left 或者 border-right实现。

.leftborder{ background:#EEE;border-left:1px solid #FFF;}
.rightborder{ background:#EEE; border-right:1px solid #DDD;}

这是所有浏览器都能实现的方法。但如果你用的是Firefox浏览器，那么还有更简单的方法。因为Firefox支持border-colors(详见CSS3.0参考手册),所以你可以直接把两种颜色同时加到一个边框里。代码如下。

.ffrightborder{ -moz-border-right-colors:#FFF #DDD; border-right-width:2px; border-right-style:solid;}

这样就搞定了第一个问题。然后给出第二个问题的代码，我负责解释。

ul{position:relative; clear:both; padding-top:20px;}
ul li{ width:100px;  float:left; list-style:none; text-align:center;}
ul li a,ul li a:visited{position:relative; display:block; text-decoration:none; color:#005A9C;}
ul li a:hover{display:block; background: #FAFAFA; margin:0 auto; width:100%; color:#424242;}

应该都很好理解，重点在于 “display:block;”，这个属性让整个

区域的背景都改变的关键，否则只是文字的背景发生变化。

好吧，给出Demo你自己看看就知道了：http://leqcany.com/demo/nav.html

PS: 在Firefox下可看到两个导航栏具有同样的效果。

校内模板——不要在校内浪费太多时间

leplay — Wed, 04 Mar 2009 03:52:29 +0000

预览

名称：Waste-time

主题：不要在校内浪费太多时间！

代码：
body {
    margin:10px auto;
    color: #3C3940;
    font:13px , "Comic Sans MS", "Trebuchet MS", verdana, sans-serif;
    background: #1A1B1F url(‘http://xiaopback.cn/images/wastebg.gif’) fixed no-repeat top left;
}
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #1f3a87;text-decoration:none;}
a:hover {color: #bc2931; text-decoration: underline;}
a:active {color: #bc2931;}

/* Made By ZhouGe ^^ */
.profile .profile-panel{ background:url() no-repeat 50% 0;border-bottom:none;}
.betabar { opacity:0.0; }
.menu-bar { opacity:0.0; }

.left-column{ margin:0 auto; background-color: #FFF; padding-top:20px; padding-bottom:10px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px; border-left:7px solid #FFF;}
.profile-tabs{ margin:0 auto; background-color:#FFF; padding-top:20px; -moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;}
.tab-content{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}
#footer{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius: 5px;-webkit-border-radius: 5px; padding-top:3px; margin-top:15px; margin-bottom:40px;}

使用方法：你比我清楚。

使用代价：原则上免费，但你要是非要请我吃饭或者棒棒糖的话，我是不会拒绝的。

网页正方形区域的另类使用方法

ZhouGe — Tue, 16 Dec 2008 05:29:20 +0000

如果你的网站正好有一块正方形区域，如果要在这个正方形区域内放入5个栏目，那么你会怎样设计呢？

我在我以前的个人网站上遇到过这种情况。当时我的设计是……（见下图）：

这个并不是用table做的，而是用CSS做的。怎么样？还不错吧。哈哈。

您也可以点这里查看该网页。

如果你对该网页的CSS感兴趣，可通过浏览器的查看源代码选项进行查看。注意在DIV调用时的顺序依次为 up – topright – mid – bottomleft – down 。