css修改控制条样式,css控制文本样式

有木有人知道怎样用css控制导航条？

CSS 可以很轻松的控制导航条的样式。

可以控制链接放到导航条 以及点击导航条时候的 样式， 比如背景的改变， 字体大小、颜色的改变等等，可以展现良好的交互效果。

要用CSS控制导航条，首先要按照符合W3C标准的HTML代码写出导航的代码，大家习惯使用UL无需列表来制作。UL里面的列表项的标签为li，排列为纵向，一般的导航条为横向，故可以给li加上浮动，让li横向排列。

举例：HTML代码部分

ul id="nav"

lia href="#"首页/a/li

lia href="#"关于我们/a/li

lia href="#"新闻列表/a/li

/ul

CSS代码部分

style

* { padding:0; margin:0; } /*重设浏览器默认样式*/

#nav{

list-style:none; /*修改默认样式，去掉小圆点 */

overflow:hidden; /*防止溢出*/

background:blue; /*设置背景为蓝色*/

}

#nav li {

float:left; /*让列表横向显示*/

}

#nav li a { /*设置鼠标交互的链接样式*/

display:block; /*设置为块状元素，方便设置背景*/

float:left; /*修正a宽度问题*/

width:auto; /*宽度不固定*/

padding:0 15px; /*每个导航项目左右各加3像素的间隙*/

color:#fff; /*设置连接颜色为白色*/

text-decoration:none; /*去掉链接下划线*/

font:normal 12px/25px Arial; /*设置连接文字为 12像素大小， 25像素高，字体为Arial */

}

#nav li a:hover { /*鼠标滑过链接时候的设置*/

color:#ff0; /*设置颜色为黄色*/

background:darkblue;

text-decoration:none; /*去掉链接下划线*/

}

/style

你可以把 以上 两种代码一块儿 粘贴到记事本，保存成html，双击打开看一下效果。

[img]

相关问答

Q1: 用css怎么设置div滚动条的样式，可改变大小的

div {

    scrollbar-arrow-color: #000000; /*三角箭头的颜色*/

    scrollbar-face-color: #666666; /*立体滚动条的颜色*/

    scrollbar-3dlight-color: #cccccc; /*立体滚动条亮边的颜色*/

    scrollbar-highlight-color: #999999; /*滚动条空白部分的颜色*/

    scrollbar-shadow-color: #333333; /*立体滚动条阴影的颜色*/

    scrollbar-darkshadow-color: #222222; /*立体滚动条强阴影的颜色*/

    scrollbar-track-color: #666; /*立体滚动条背景颜色*/

    scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/

}

这是浏览器默认支持的属性，如果你要可以定制大小的，那要写 JS 脚本来控制

Q2: css设置滚动条颜色与样式以及如何去掉与隐

我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条，这就是通过css代码控制来实现的，于是本人搜集整理一番，这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法，需要的朋友可以参考下,很有用的

我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条，这就是通过css代码控制来实现的，于是本人搜集整理一番，这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法，需要的朋友可以参考下,很有用的

div { scrollbar-face-color: #fcfcfc; scrollbar-highlight-color: #6c6c90; scrollbar-shadow-color: #fcfcfc; scrollbar-3dlight-color: #fcfcfc; scrollbar-arrow-color: #240024; scrollbar-track-color: #fcfcfc; scrollbar-darkshadow-color: #48486c; scrollbar-base-color: #fcfcfc }

滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容 overflow: auto; 在需要时内容会自动添加滚动条 overflow: scroll; 总是显示滚动条 overflow-x: hidden; 禁止横向的滚动条 overflow-y: scroll; 总是显示纵向滚动条 width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等] height: 120px; 设置区域的高度[像素/百分比等等]

STYLE BODY { SCROLLBAR-FACE-COLOR: #f892cc; SCROLLBAR-HIGHLIGHT-COLOR: #f256c6; SCROLLBAR-SHADOW-COLOR: #fd76c2; SCROLLBAR-3DLIGHT-COLOR: #fd76c2; SCROLLBAR-ARROW-COLOR: #fd76c2; SCROLLBAR-TRACK-COLOR: #fd76c2; SCROLLBAR-DARKSHADOW-COLOR: #f629b9; SCROLLBAR-BASE-COLOR: #e9cfe0 } /STYLE

SCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色 SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色 SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色 SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色 SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色 SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色 SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色 SCROLLBAR-BASE-COLOR: 滚动条的基本颜色网页中去掉滚动条： 去掉横向滚动条：body style='overflow:scroll;overflow-x:hidden' 去掉竖向滚动条：body style='overflow:scroll;overflow-y:hidden' 两个都去掉：body scroll="no" 框加中去滚动条在name=""后面加 scrolling="No" 1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置的值为visible、scroll、hidden、auto visible 默认值。使用该值时，无论设置的"width"和"height" 的值是多少，其中的内容无论是否超出范围都将被强制显示。 hidden 效果与visible相反。任何超出"width"和"height"的内 容都会不可见。 scroll 无论内容是否超越范围，都将显示滚动条。 auto 当内容超出范围时，显示滚动条，否则不显示。应用: 没有水平滚动条: div style="overflow-x:hidden"test/div 没有垂直滚动条 div style="overflow-y:hidden"test/div 没有滚动条 div style="overflow-x:hidden;overflow-y:hidden" 或style="overflow:hidden"test/div 自动显示滚动条 divstyle="height:100px;width:100px;overflow:auto;"test/div 2,自己定义滚动条的颜色 我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号, 分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间,如:

Body { scrollbar-arrow-color: #f4ae21; scrollbar-face-color: #333; scrollbar-3dlight-color: #666; scrollbar-highlight-color: #666; scrollbar-shadow-color: #999; scrollbar-darkshadow-color: #666; scrollbar-track-color: #666; }

Q3: css代码怎样改变火狐浏览器中滚动条样式

CSS无法控制滚动条的样式。这里推荐几块滚动条美化的插件给你。

1. Windows：全屏窗口滚动插件

该插件可以很好地实现全屏滚动，每滚动一次即为一屏。比如，用户浏览下一屏幕内容时，只需手动滚动到某一位置，该插件会自动滚动显示下一屏全部内容。对于浏览类似于PPT的内容时比较实用。

2. Jquery Scroll Follow：滚动跟随插件

该插件可以使DOM对象随着页面的滚动而移动。你可以设置滚动的速度、偏移等参数。

3. 列表滚动插件

该插件可以为任意列表添加上滚动效果。你可以自定义列表的滚动方向和滚动速度。

4. Sly：灵活的基于ITEM的滚动插件

SLY提供了很多基于项目（如图像/内容画廊）的滚动选项，支持水平和垂直方向的无限滚动。

5. Coverscroll

仿苹果的CoverFlow设计，支持滚动条、鼠标滚轮和手势来滚动查看。

6. Sticky

　该插件可以让你的页面中的任何元素在滚动过程中始终可见

7. Tiny Scrollbar：一个轻量级的JQUERY插件

8. Sticky Float：另一个滚动跟随插件

9. Page Scroller：漂亮实用的滚动导航

10. Custom Srollbar：自定义内容滚动条插件

11. Scroll Up：一个轻量级的滚动到顶部插件

Q4: css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

css没有对滚动条的颜色与样式调整的办法，这个只有用js配合css实现。至于去掉与隐藏滚动条的问题，既然想去掉你又为什么要添加呢？当然你也可以试试用套用标签限定宽高，然后溢出隐藏试一下隐藏的问题。