Question

跪求解答！在dreamweaver上类似这个导航栏的 div+Css 怎么写？求高人解答！谢谢！

Answer 1

<div class="nav">
<ul>
<li><a href="#this">Apple</a></li>
<li><a href="#this">在线商店</a></li>
<li><a href="#this">Mac</a></li>
<li><a href="#this">iPod</a></li>
<li><a href="#this">iPhone</a></li>
<li><a href="#this">iPad</a></li>
<li><a href="#this">iTunes</a></li>
<li class="noline"><a href="#this">技术支持</a></li>
</ul>
<p class="search"><input type="text" name="" id="" /></p>
</div>

css
div.nav{position:relative; padding-right:200px; background: no-repeat right center;}
div.nav ul{ background: no-repeat left center;}
div.nav ul li{ float:left; margin-right:10px; padding-left:10px; background: no-repeat right center;}
div.nav ul li.noline{background:none;}

div.nav ul li a{padding:0 10px; color:#fff; font-weight:bold; text-decoration:none; display:inline-block; line-height:30px;}
div.nav p.search{position:absolute; top:10px; right:5px; height:20px; background:no-repeat ;}
div.nav p.search input{border:none; background:no-repeat 5px center; height:20px; padding-left:20px;}

底下的背景看你想弄什么样的，如果弄可收缩的，可以切成两段。左边一部到抓白色的，右边蓝色的一部分，长点切着，然后把背景蓝色放在DIV上，让背景不平铺，居右，把白色的铺在UL上，不平铺，居左，LI里放那个坚线。
那个P定位在右边，把搜索的背景放在P里，那个标放在INPUT里。

追问

你好！你在帮我看看，我这个还是不行？？？搜索框怎么移上去，填补那个空白？

追答

那个搜索框应该是input，应该是你那br的问题，br是换行，所以你的A标签跑下面去了

追问

因为我加了清除浮动！我加了绝对定位，位置有变化了，可后面的背景还是白的，搜索框是透明的，求解？？？

追答

你那个长背景应该不够长吧！你再把那个背景加长试一下，如果浮动清了，一般是不会出现这样的情况

Answer 2

背景图片不会做啊，做一个和你表格一样宽高度一样的图片，比如类似这个，然后将图片做为背景，调整一下每个小的单元格。就可以了。

Answer 3

这样看你要不要后面的搜索，你直接用整站工具把他的DIV+css都下载下来 用火狐浏览器确定是哪个DIV和CSS控制的 对着修改自己的样式就可以了

Answer 4

你可以打开这个网站，然后右键——查看源文件，全选复制粘到dreamweaver里面，把其他不用的代码全删掉，只剩下这个导航栏就可以了，然后你可以对比代码，看他们是怎么写的，自己可以学下。