CSS 怎么做百度导航

html-css012

CSS 怎么做百度导航,第1张

导航栏区域 tab部分

#tabline{top:415pxbackground-color:#......}——菜单下方的横线,即分隔符,用来与空间名称分开

TAB菜单栏(主页/博客/相册/好友/设置那一行)下边的分隔线的位置和颜色,top后边的数字是指分割线离空间标题栏上边界的距离,这个数字要根据标题栏的高度和菜单的位置(是与图片重叠或位于图片下方)来决定。

#tab{top:390px}——TAB菜单栏的位置,主页/博客/相册/好友/为菜单栏,top后边的数字是指距空间标题栏上边界的距离。(菜单栏的高度比标题栏高度小20px模块位置标准)

#tab{top…pxbackground-color(…)}——菜单栏颜色

#tab{top…pxbackground:url(图片地址)}——菜单栏图片

#tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:2pxline-height:20pxbackground-color:#......color: #……font-size:14pxfont-weight:bold}

TAB菜单被选中后的状态,文字的位置,文字后边背景的颜色,文字颜色,字号等等。(选中主页选项,margin-top:2px,主页字体离菜单栏上边的距离,background:#:主页文字后面背景图片或颜色,color: #:主页字体颜色)

被选中后如果要边框,在 margin-top:2px 后面加上 border-left:0px solid #00CCFFborder-right:0px solid #00CCFFborder-top:0px solid #00CCFF

border-left:0px solid #00CCFF菜单栏,主页,相册等被选中之后,文字左边边框的颜色

border-right:0px solid #00CCFF 菜单栏,主页,相册等被选中之后,文字右边边框的颜色

border-top:0px solid #00CCFF 菜单栏,主页,相册等被选中之后,文字上边边框的颜色

border-bottom:1px solid #DE1010 菜单栏,主页,相册等被选中之后,文字下边边框的颜色

#tab span{color:#F93A60font-size:14px}——TAB菜单中间的分隔符(竖线)的颜色和大小

#tab a:link{color:#......text-decoration:nonefont-size:14px}——(未被点击)

TAB菜单未被选中时的状态,文字颜色,其它定义,字号。(这条没反应,下面那条可以设置菜单栏文字颜色,字号)

css部分

li{width:60pxfloat:leftlist-style:none}

html部分

<ul>

<li>首页</li>

<li>分类</li>

<li>..</li>

<li>..</li>

</ul>

主要就是无序列表里li浮动