div导航栏怎么写，导航栏左右各有文字用divcss应该怎么写啊

来源：整理时间：2023-06-30 16:06:49 编辑：航空兔素材手机版

1，导航栏左右各有文字用divcss应该怎么写啊

在导航的DIV里嵌套俩个DIV，一个左浮动，一个有浮动

也可以2个左浮动，一个文字左对齐，一个文字右对齐，但要设置宽度哦！

导航栏左右各有文字用divcss应该怎么写啊

2，CSS中制作个人主页中用DIV嵌套的怎么写还有导航条的拜托各位

<div style="width:1000px; height:auto;"> <div style="width:1000px; height:100px;overflow:hidden">个人主页的图片</div> <div style="width:1000px; height:30px; line-height:30px;overflow:hidden">导航条</div> <div style="width:1000px; height:auto;overflow:hidden"> <div style="width:200px; height:500px; float:left;">左</div> <div style="width:790px; height:500px; float:right;">右</div> <div style="height:0px; clear:both; overflow:hidden;">用来清除浮动，不可见！</div> </div></div>

内部div是不是没有设置高度，或者你设置了内部div浮动之后是不是没有清除浮动，基本就这两种可能性，你试试看！清除浮动代码：clear:both;你最好把代码发上来，我给你看看

CSS中制作个人主页中用DIV嵌套的怎么写还有导航条的拜托各位

3，divcss怎么写这个导航

用CSS的滑动门技术可以做步骤： 1. 素材：找背景图片(图片的width与height 要与ul的一致) 2. 代码：<style type="text/css"> /*确定菜单的整体位置*/ body /* 设置ul的样式*/ ul.menu font-size:14px; background:url(滑动门技术/hdm.jpg); padding:0 0 0 8px; list-style:none; height:32px;/*背景图片的高*/ width:400px;/*背景图片的宽*/ } .menu li ul li a line-height:32px; color:#ddd; text-decoration: none; padding: 0 0 0 14px; } li strong li a:hover strong </style> </head> <body> <ul class="menu"> <li><a href=" http://www.baidu.com" ><strong>CSS</strong></a></li> <li><a href="#"><strong>HTML</strong></a></li> <li><a href="#"><strong>Dreamweaver</strong></a></li> <li><a href="#"><strong>Photoshop</strong></a></li> <li><a href="#"><strong>Home</strong></a></li> </ul> </body>

用<li>定义导航项目，CLASS设置成一样；对相同CLASS的导航项目写几个属性：WIDTH,HEIGHT,BODER,BACKGROUD. 当点击进入某导航后，控制当前导航项目LI的background为另外一张图片；这些LI，都用一个容器来装，比如DIV，再定义这个DIV的大小和位置即可；

divcss怎么写这个导航

4，如何用DIVCSS做漂亮的横排导航栏

先码好导航栏所需要的基本的HTML代码这个就不必多说具体的代码如下：<html><head><title>横向导航栏</title><style></style></head><body><div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> <li><a href="#">导航5</a></li> <li><a href="#">导航6</a></li> </ul></div></body></html>测试结果应为下图（1）下面我们通过CSS 来改变他的样式。首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度，没有宽度就没法居中，这个的原因我就不用赘述了吧！现在常用的网站宽度为960或980（当然也有其他的，一些网站会根据访客的显示器大小有不同宽度的样式，原因我就不在这多废话了）我们在这就用980吧。方法是在<style></style>之间加入如下代码来改变他的宽度。为了让结果明显，我们给它又加了一个边框。<style></style>测试结果如图2接下来我们让他居中。我们在样式中加入以下代码。.nav ulwidth:980px;/*设置元素宽度为980px*/border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/margin:0px auto 0px auto;/*也可以简写为margin:0 auto*/}测试结果应为图3。因为我们要做的是横向的导航栏，所以现在我们要把它变成横向排列。我们在样式中加入以下代码。.nav ul lifloat:left;/*让li元素左浮动*/} 我们看到测试结果如图4。边框之所以挤到一起了是因为浮动以后 li就变成了联级元素，就没有宽和高了，所以也就没法把边框撑起来了啊。（具体的原因想知道可以百度）当然稍后我们可以给ul或.nav加上高度。接下来，我们通过给元素<a>添加样式，让他更美观。加入以下代码。.nav ul li awidth:80px;/*设置元素宽为80px*/height:28px;/*设置高度为28px*/line-height:28px;/*设置行距为28px，让文字在每行的中间位置*/background:red;/*设置元素的背景为红色*/color:#FFF;/*文字颜色是白色*/margin:5px 10px;font-size:12px;/*用12号字*/display:block;/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/text-align:center;/*让文本居中*/text-decoration:none; /*去掉下划线*/}效果如图5我们再加入点互动，当访客鼠标放到某个元素上的时候，这个元素要有别于其他元素。要实现这个我们就要用到:hover这个伪类。在样式中加入以下代码。.nav ul li a:hoverwidth:78px;height:26px;line-height:28px;border:1px solid red;color:red;background:#FFF;}测试结果如图6最后稍微整理一下代码.nav ulwidth:980px;margin:0px auto;height:38px;padding:0;}.nav ul lifloat:left;}.nav ul li awidth:80px;height:28px;line-height:28px;background:red;color:#FFF;margin:5px 10px;font-size:12px;display:block;text-align:center;text-decoration:none;}.nav ul li a:hoverwidth:78px;height:26px;line-height:28px;border:1px solid red;color:red;background:#FFF;} 看看效果，成功没？思路就是这样的，其中还可以再加一些自己的元素，比如背景图片之类，效果就更好了。