div+css怎么实现这个导航栏的样式呀?
发布网友
发布时间：2022-04-06 10:27
共4个回答
热心网友
时间：2022-04-06 11:57
正好在写这么个导航条效果l
<!------------------头部导航开始------------------>
<div class="top w1000 bc">
<ul>
<li class="top_left"></li>
<li class="home w100"></li>
<i></i>
<li class="w100"><a href="#">快速导航</a></li>
<i></i>
<li class="w100"><a href="#">产品目录</a></li>
<i></i>
<li class="w100"><a href="#">设备保修</a></li>
<i></i>
<li class="w100"><a href="#">技术咨询</a></li>
<i></i>
<li class="w100"><a href="#">速查表</a></li>
<i></i>
<li class="w100"><a href="#">公司大事记</a></li>
<i></i>
<li class="search"><div class="search">
<input type="text" name="search" size="35" value="请输入您要搜索的机器名称或产品名称">
</div></li>
<li class="top_right"></li>
</ul>
<!--------------------导航结束---------------->
</div>
追问你CSS的代码是啥呢，导航这一段的...小竖线又是怎么定义出来的？追答小竖线 一般我用 看到了吗》？
以下是CSS代码：
.top{ margin-top:10px;}
.top ul{ height:39px; background:url(../img/menu_bg.jpg) repeat-x;} //整个导航用一个一像素灰色背景平铺，并指定高度
.top ul li{ text-align:center;float:left; line-height:39px;} // LI列表文字居中，行高39，并向左浮动（横排）
.top ul li a:link{ font-size:14px; text-decoration:none; color:#666666;} //文字链接样式
.top ul li a:hover{ font-size:14px; color:#666666; font-weight:bold;} //文字鼠标经过样式
.top ul i{ float:left;display:block; width:1px; height:39px; background:url(../img/jg.jpg) no-repeat;} //这个i 就是小竖线了，转换为快级元素可以指定宽度1像素，一个小竖线的背景，也向左浮动使其横排就好了。
图你自己画哦 宽度都一像素的 左右圆角是宽3像素的 小竖线就是background:url(../img/jg.jpg) no-repeat;}
热心网友
时间：2022-04-06 13:15
热心网友
时间：2022-04-06 14:49
热心网友
时间：2022-04-06 16:41
