如何用css代码让导航条透明化.docx
- 文档编号:6243082
- 上传时间:2023-01-04
- 格式:DOCX
- 页数:4
- 大小:28.87KB
如何用css代码让导航条透明化.docx
《如何用css代码让导航条透明化.docx》由会员分享,可在线阅读,更多相关《如何用css代码让导航条透明化.docx(4页珍藏版)》请在冰豆网上搜索。
如何用css代码让导航条透明化
三一文库(XX)
〔如何用css代码让导航条透明化〕
*篇一:
切入口CSS教程--第一讲.基于div+css制作精美的导航条效果
切入口(qierukou)讯:
这一节选择教大家如何制作一款精美导航条效果,这也是我们第一期课程发布,为什么第一期选择这期课程,而不是一些基础html,css知识呢,因为导航条是一个网站的灵魂,漂亮的导航条往往能为网页增色不少,而且它的制作简单,并且涉及比较多的知识点,我们旨在学习之前,先让你了解职业web前端开发的流程,以及通过制作简单而又精美导航效果来调动你学习网页制作的热情。
在学习基于div/css制作一款精美网页导航条效果之前,我们需要先了解两个问题:
什么是网页导航条?
网页浏览时导航条起什么作用?
网站导航(navigation)是指通过一定的技术手段,为网站的访问者提供一定的途径,使其可以方便地访问到所需的内容一般在网站的logo、banner下面或是网页的顶部。
快速的使你了解网站的内容分类。
作为切图网(qietu)职业web前端开发技术员,我们认为制作一款精美导航条html布局非常重要,在css网页布局中,html结构是首要重要的,其次是css样式,当一个网页的html结构标准和合理对于后面的工作就会相对简单很多。
而要写好网页html结构靠的是扎实基本功以及长期web前端开发经验使然。
在这里准确的结构应该这么写:
ulclass="naver"
liahref="#"切入口/a/li
liahref="#"切入口/a/li
liahref="#"切入口/a/li
liahref="#"切入口/a/li
liahref="#"切入口/a/li
liahref="#"切入口/a/li
liahref="#"切入口/a/li
/ul
其中用到了ul,li标签,ul加上了class=”naver”属性,这就是一个比较标准的导航html结构,这里的ul,li是专用于列表结构的标签,导航也算是是属于列表类结构的。
然后我们还要给它加上css样式代码:
.naver{
width:
100%;height:
70px;background:
url(../images/slice.jpg)repeat-x;
}
.naverli{
float:
left;display:
inline;/*主要用于解决ie6下的兼容问题*/line-height:
70px;width:
102px;
background:
url(../images/sprite.jpg)no-repeat;
text-indent:
-900px;
overflow:
hidden;
}
.naverli:
hover{
background:
url(../images/sprite.jpg)no-repeat0-70px;
}
.naverli:
active{
background:
url(../images/sprite.jpg)no-repeat-102px-70px;}
这便是一个完整的导航条的代码片段了,其中用到了float浮动,图片精灵(背景图片定位技术),伪类等知识点,感兴趣童鞋可以将代码拷贝到html文档中查看效果,如果你觉得这一切太麻烦,你可以选择成为我们的订阅用户,你可以自由观看我们所有视频教程,跟我们职业web前端学习如何制作网页,并且可以下载视频课程中的课件,帮助你快速学习:
)
*篇二:
经典导航条div+css代码附图片
经典导航条div+css代码附图片
供初学者参考学习
*{
margin:
0px;
padding:
0px;}
body{
font-size:
14px;
font-family:
Arial,Helvetica,sans-serif;}
div{
width:
98%;
height:
38px;
margin:
30pxauto0pxauto;
background:
url(新建文件夹/bjnav.gif)repeat-xbottombottom;
}
ul{
list-style:
none;}
li{
float:
left;
background:
url(新建文件夹/bjli.gif);
}
lia{
text-decoration:
none;
color:
#000000;
display:
block;
width:
80px;
height:
31px;
line-height:
31px;
text-align:
center;}
lia:
hover{
background:
url(新建文件夹/nav_hov.gif)no-repeat;
color:
#FFFFFF;
text-decoration:
underline;}
.a1{
background:
url(新建文件夹/bgli_left.gif)no-repeat}.a2{
background:
url(新建文件夹/bgli_right.gif)no-repeat}.a3{
background:
url(新建文件夹/nav_hov.gif)}
/style/head
body
div
/div/body
/html
ul/ulliclass="a1"ahref="#"首页/a/liliahref="#"财经/a/liliclass="a3"ahref="#"体育/a/liliahref="#"军事/a/liliahref="#"漫画/a/liliahref="#"新闻/a/liliahref="#"娱乐/a/liliahref="#"爱好/a/liliclass="a2"ahref="#"链接/a/li
*篇三:
淘宝旺铺】导航CSS代码使用修改技巧
淘宝旺铺】导航CSS代码使用修改技巧1.修改导航分类下面的背景色,代码如下:
.skin-box-bd.link{background:
#000000;}修改导航分类下面的图片,代码如下:
.skin-box-bd.link{background:
url(图片链接);}
2.修改整个导航的背景色
.skin-box-bd.menu-list{background:
#000000;}修改整个导航背景为图片
.skin-box-bd.menu-list{background:
url(图片链接);}3.修改最右边留下的一小块,2里提到的,代码如下:
.skin-box-bd{background:
#000000;}
修改成图片的代码如下:
.skin-box-bd{background:
url(图片链接);}
4.字外加色:
.skin-box-bd.menu-list.menu-selected.link{background:
#000000;}
5.字里加色:
.skin-box-bd.menu-list.menu-selected.link.title{background:
#000000;}
字外+字里=全部!
----------------------------------------------------------------------------------------
1.导航背景色代码(除去“所有分类”)如下:
.menu-list.link{background:
#000000;}
2.导航栏文字(除去“所有分类”)如下:
.menu-list.menu.title{color:
#颜色代码;font-size:
字号px;}
3.“所有分类”的背景色代码如下:
.all-cats.link{background:
#000000;}
4.“所有分类”的文字代码如下:
.all-cats.link.title{color:
#颜色代码;font-size:
字号px;}
最新代码,解决字体改大后导航右侧消失的情况!
代码如下:
.all-cats.link.title{font-size:
字号
px;}.all-cats.link{background:
#3BAFFF;margin:
0;padding:
0px3px;}
字号最大为21,继续变大右侧导航将消失!
该代码还不是很完善,我们会继续研究!
5.二级分类文字代码如下:
.popup-content.cats-tree.fst-cat.cat-name{font-size:
字号px;color:
#颜色代
码;font-weight:
bold/bolder/normal;}
6.二级分类背景代码如下:
.popup-content{background:
#000000;}
7.三级分类文字代码(除去“所有宝贝”分类)如下.popup-content.cats-tree.snd-pop-inner{font-size:
字号px;color:
#颜色代码;font-weight:
bold/bolder/normal;}
8.三级分类文字代码(包括“所有宝贝”分类字体大小)这样就无法改变字体颜色,我们会继续完善该代码!
如下
.popup-content.cats-tree.snd-pop-inner{font-size:
字号px;color:
#颜色;}
9.三级分类背景代码:
.popup-content.cats-tree.snd-pop-inner{background:
#000000;}
10.一级导航分类(除去“所有宝贝”分类)分隔线颜色代码如下:
.menu-list.menu{border-color:
#000000;}
11.一级导航“所有宝贝”分类分隔线颜色代码如下:
.all-cats.link{border-color:
#000000;}
12.一级导航分类的宽度修改代码如下:
.menu-list.menu{background:
#颜
色;margin:
0;padding:
0px增加的宽度px;}
13.鼠标滑过一级分类导航文字变换背景色代码如下:
.menu-list.menu-hover.link{background:
#000000;}
14.鼠标滑过一级分类导航文字变换颜色代码如下:
.menu-list.menu-hover.link.title{color:
#FFFFFF;}15.鼠标滑过二级分类导航文字变换背景色代码如下:
.popup-content.cats-tree.cat-hd-hover{background:
#000000;}
16.鼠标滑过二级分类导航文字变换颜色代码如下:
.skin-box-bd.popup-content.cats-tree.cat-hd-hover.cat-name{color:
#ff0000;}
17.鼠标滑过三级分类导航文字变换背景色代码如下:
.popup-content.cats-tree.snd-cat-hd-hover{background:
#000000;}
18.二级分类上加空间代码如下:
.popup-content.cats-tree{margin:
0050px0;}
19.修改“所有宝贝”右边小图标代码如下:
.all-cats.link.popup-icon{background:
url(图片连接);}
《如何用css代码让导航条透明化》
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 何用 css 代码 导航 透明