Question

一条两种颜色的线如何用CSS定义

就是一条线,前半部分是黄色,后半部分是蓝色,可以用CSS定义吗,如果可以的话,应该怎么定义呢?
还有一个就是网页上左边导航栏后面有一条竖线,应该怎么用CSS定义呢?在线等待高手!谢谢!

Answer 1

以DIV为例。

如果你设计的DIV内的内容不会占用两个颜色的区域。就用下面的方法：

<div style="width: 300px; height: 23px; border-right: 150px solid blue; background: yellow;">这样就可以了</div>

如果你设计的DIV内的内容需要占用两个颜色的区域，那就还是用背景图吧。比如：

<div style="width: 300px; height: 23px; background: url(这里放一个指定长度的黄色背景图) repeat-y blue;">这样就可以了</div>

第二个问题没看明白。如果是说内容后面有个背景。直接用背景，然后可以通过CSS设置背景的启示位置。比如：

<div style="background: url(aaa.gif) 10 0 repeat-y;">123</div>

这里面的 10 和 0 代表背景图起始的横坐标和纵坐标。

Answer 2

首先要看你的颜色是如何排序的，如果是有规律的重复，那么建议使用背景图片，将那个两种颜色做成背景，然后平铺background:url(xxx.jpg) 0px 0px repeat-x;

Answer 3

我用DIV+CSS设计：
CSS:
.my{FLOAT: left;width:760px;}
.my ul{width:760px;padding:0;margin : 0;}
.my li{FLOAT: left;list-style-type:none;width:380px;padding:0;margin : 0;}
.hr1{font-color:yellow;width:380px;font-size:1px;height:1px;}
.hr2{font-color:blue;width:380px;font-size:1px;height:1px;}
1、<div class="my">
<ul>
<li>
<hr class="hr1">
</li>
<li>
<hr class="hr2">
</li>
</ul>
</div>
没有显示一下效果，自己看看吧！
2、竖线：可以用border来定义！