CSS打造下拉菜单的小箭头(border-color的利用)

昨天学会了怎么用CSS打造下拉菜单,今天于是想想怎么通过CSS制作下拉菜单的箭头,在网站上随便找了个网站查看其代码,还是不甚其解,百度一番无果后转战google,果然还是google强大,直接搜索到了自己想要的结果,CSS制作下拉菜单也解决了顺便学习了一下一个不起眼的css样式,那就是border-color.

 

首先我直接把代码贴在这里,下面做详细解释:

 

.site {
    width:auto;
    height:auto;
    background-color:#fff;
    position:relative;
}
.site b {
    border-color: #666 #fff #fff;
    border-style: solid;
    border-width: 4px;
    position:absolute;
    top:7px;
}
<div> 这就是下拉的小三角形 <b> </b> </div>

这里面通过border-color实现了一个三角形,经过自己的实践,border-color可以有四个颜色值,他们分别对应上,右,下、左三个角。以前都只有见到只有一个值的,那就是整个的都是这个颜色,你还可以只写三个值,或者两个值都是可以的,效果自己试了一下就知道了。

用CSS制作下拉菜单

昨天和大瓶子一起学html,看到有个讲下拉菜单的视频,这让我第一印象是以为这个必须得用JS做,可是看到最后他竟然是这样做的,

CSS代码如下:

#menu dd{

display:none;

}

#menu li:hover dd{

display:block;

}

HTML代码:

<div id="menu"><ul><li>

<dt>项目一</dt>

<dd>子项目一</dd>

<dd>子项目二</dd>

<dd>子项目三</dd>

</li></ul></div>

解析:首先<dd>标签都是不可见的,当鼠标放在<li>标签上时(此时li可见的部分只有<dt>),<dd>标签就会出现,当鼠标移出 <li>所在的范围(此时已经是dt和dd所在的部分了)的时候,<dd>标签又重新不可见了。

内层div使用float:left导致父层div的background失效

就是在我做这个的时候,我说的这个就是你看这段文字你会发现它没有标题,并且还有背景颜色,重点来了,我在内层的div添加float:left样式的时候,外层定义的背景居然不起作用,于是在网上搜索了一下,原来需要这么处理,就是在内层的最后面再加一个空的<div class="clear"></div>,这样就解决问题了。

使用overflow:hidden样式导致Li前面点、圈等不见

实际上用了overflow:hidden 会影响 list-style,即当ul 中的li 的overflow 为hidden的时候, list-style不起作用,不显示前面的点、圈等样式。

解决办法:在ul或li内加入样式:list-style-position: inside; 即可。注意适当调节padding位置使之最适合。

列表的样式:
disc : CSS1 实心圆
circle :CSS1 空心圆
square :CSS1 实心方块
decimal :  CSS1 阿拉伯数字
lower-roman :  CSS1 小写罗马数字
upper-roman : CSS1 大写罗马数字
lower-alpha : CSS1 小写英文字母
upper-alpha : CSS1 大写英文字母
none : CSS1 不使用项目符号
armenian : CSS2 传统的亚美尼亚数字
cjk-ideographic:CSS2 浅白的表意数字
georgian : CSS2 传统的乔治数字
lower-greek :  CSS2 基础的希腊小写字母
hebrew : CSS2 传统的希伯莱数字
hiragana : CSS2 日文平假名字符
hiragana-iroha: CSS2 日文平假名序
katakana : CSS2 日文片假名字符
katakana-iroha: CSS2 日文片假名序号
lower-latin : CSS2 小写拉丁字母
upper-latin : CSS2 大写拉丁字母
list-style-image: url(images/disc.gif); 用图像disc.gif代替列表项目显露
list-style-position : outside | inside
outside:  列表项目标记放置在文本以外,且围绕文本不根据标记对齐
inside :  列表项目标记放置在文本以内,且围绕文本根据标记对齐

原文地址:http://www.jb51.net/css/85970.html