当妈妈的也玩CSS,这种效果的导航效果有人会喜欢吗?怎么改更好啊?

html-css016

当妈妈的也玩CSS,这种效果的导航效果有人会喜欢吗?怎么改更好啊?,第1张

你看看百度知道的导航,一眼明了,看着眼也不累

你的用色稍微过于鲜艳,这两种色在一起并不协调

很多网站用绿色,蓝色,浅灰色,银色,除了简洁明了、美观之外,而且对眼睛疲劳影响稍微少点。

由于导航是网站的组成部分,所以必须要清晰、突出

另外字体大小、颜色也是一点

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

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

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

举例:HTML代码部分

<ul id="nav">

<li><a href="#">首页</a></li>

<li><a href="#">关于我们</a></li>

<li><a href="#">新闻列表</a></li>

</ul>

CSS代码部分

<style>

* { padding:0margin: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,双击打开看一下效果。