好看的div样式在网页如何弄好看的导航条

divnbsp;样式

有关nbsp;CSSnbsp;的详细内容可以看这里/Main/Category/1208上面的问题可以根据选择其来判断div.sdmenunbsp;divnbsp;.menunbsp;a,a.current,a.hover这样的就是amp;lt;divnbsp;class=“demenu“amp;gt;amp;lt;divamp;gt;amp;lt;spannbsp;class=“menuamp;gt;amp;lt;anbsp;href=“#“amp;gt;linkamp;lt;/aamp;gt;amp;lt;/spanamp;gt;amp;lt;/divamp;gt;amp;lt;/divamp;gt;即可div.sdmenunbsp;divnbsp;a.current这个选择器就可以写成amp;lt;divnbsp;class=“sdmenu“amp;gt;amp;lt;divamp;gt;amp;lt;anbsp;href=“#“nbsp;class=“current“amp;gt;linkamp;lt;/aamp;gt;amp;lt;/divamp;gt;amp;lt;/divamp;gt;

代码定义div样式效果,请写出宽度为200像素的代码

<div style="width:200px;"></div> 或者 <style type="text/css"> .div{width:200px;} </style> <div class="div"></div>

在网页如何弄好看的导航条

到Fireworks 里面去做 效果会比较好看现在网页中的导航条流行的效果是透明水晶效果加渐变。

别的在具体的调整，这样的导航条一般都很好看的，在现在是个主流。

还有一种就是用代码 第一种形式: 通过更换显示样式实现，这种很常见。

<div id="tabs0"><ul class="menu0" id="menu0"> <li onclick="setTab(0,0)" class="hover">新闻</li> <li onclick="setTab(0,1)">评论</li> <li onclick="setTab(0,2)">技术</li> <li onclick="setTab(0,3)">点评</li></ul><div class="main" id="main0"> <ul class="block"><li>新闻列表</li></ul> <ul><li>评论列表</li></ul> <ul><li>技术列表</li></ul> <ul><li>点评列表</li></ul></div></div> 第二种形式: 这种结构比较复杂一些，外面加一个相对层(.menu1box)，设置溢出隐藏，将选项卡(#menu1)设为绝对定位，设置层指针为1(z-index:1;)，以便可以遮住下主区块(.main1box)1px的高度。

设置主区块的边框为1px的黑边，上空白()为-1px，使上边框伸到选项卡下。

当改变选项卡某项(li)的背景为白色时便可遮住一部分主区块的上边框。

这样效果就实现了。

<div id="tabs1"><div class="menu1box"> <ul id="menu1"> <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li> <li onmouseover="setTab(1,1)"><a href="#">评论</a></li> <li onmouseover="setTab(1,2)"><a href="#">技术</a></li> <li onmouseover="setTab(1,3)"><a href="#">点评</a></li> </ul></div><div class="main1box"> <div class="main" id="main1"> <ul class="block"><li>新闻列表</li></ul> <ul><li>评论列表</li></ul> <ul><li>技术列表</li></ul> <ul><li>点评列表</li></ul> </div></div></div> 第一、二种形式的JS代码:function setTab(m,n){var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*获取选项卡的LI对象*/var mli=document.getElementById("main"+m).getElementsByTagName("ul"); /*获取主显示区域对象*/for(i=0;i<tli.length;i++){ tli[i].className=i==n?"hover":""; /*更改选项卡的LI对象的样式，如果是选定的项则使用.hover样式*/ mli[i].style.display=i==n?"block":"none"; /*确定主区域显示哪一个对象*/}} 希望能给你一些帮助