1. 用html和css怎么写这个导航啊,求大神帮我
<div class="menu">
<ul>
<li class="cur"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CLIENTS</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CONTACTS</a></li>
</ul>
</div>
<style>
.menu ul {text-align:justify;font-size:0;letter-spacing:-4;height:69px}
.menu ul:after {display:inline-block;width:100%;height:\20;overflow:hidden}
.menu ul li {display:inline-block;line-height:69px}
.menu ul li.cur a {color:#9cd249}
.menu ul li a {display:inline-block;font-size:22px;font-family:BebasNeue;color:#fff;padding:0 20px}
.menu ul li a:hover {color:#9cd249}
</style>;大致思路就是这样,你自己在我代码的基础上扩展就好
2. div+css怎么写这个导航
用CSS的滑动门技术可以做
步骤:
1.
素材:找背景图片(图片的width与height 要与ul的一致)
2.
代码:<style type="text/css">
/*确定菜单的整体位置*/
body{margin-top:20px; margin:0;}
/* 设置ul的样式*/
ul.menu{ font-family:Arial;
font-size:14px;
background:url(滑动门技术/hdm.jpg);
padding:0 0 0 8px;
list-style:none;
height:32px;/*背景图片的高*/
width:400px;/*背景图片的宽*/
}
.menu li {float:left;}/*设置#menu中的li属性 。li原本的块级元素,设置向左浮动,这样使得各列表横向排列*/
ul li a {display:block;
line-height:32px;
color:#ddd;
text-decoration: none;
padding: 0 0 0 14px;
}
li strong { display:block;}
li a:hover strong{ color:#fff; background:url(滑动门技术/Lt_hdm.jpg) ; background-color:#999999;}
</style>
</head>
<body>
<ul class="menu">
<li><a href=" " ><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>
3. dw css代码怎么写啊
<html>
<head>
<title>;简单的css导航</title>
<style>
#nav{ height:30px; width:500px;margin-left:350px;}
#nav li{float:left; list-style-type:none;}
#nav li a{text-decoration:none; color:#000; margin-left:10px; line-height:20px; display:block; width:65px; height:20px;
background-color:#0F3; text-align:center;
}
#nav li a:hover{ color:#FF0 }
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">;首页</a></li>
<li><a href="#">;产品中心</a></li>
<li><a href="#">;新闻中心</a></li>
<li><a href="#">;客服代表</a></li>
<li><a href="#">;网站地图</a></li>
<li><a href="#">;关于我们</a></li>
</ul></div>
</body>
</html>
4. 用CSS如何写出的网站导航
看下这个吧,把代码复制到一个文本文档,然后改成html就可以了。
首先要建立一个DIV,为其命名为“nav”,在DIV中建立一个<ul>;无序列表,导航共有几个栏目,就为列表添加几个<li>;的列表项,为每个列表项中的内容加上超链接,链接到所需的项目页面。
然后设置CSS样式,为列表规定宽度和高度,去掉列表前面的符号,代码为:
ul {width:宽度值;height:高度值; list-style:none;}
如果是横向导航,还需为里面的列表项<li>;标签设置左浮动的样式,代码为:li {float:left;}
每个栏目之间分隔的距离可通过margin(外边距)属性来设置。
6. html5 css怎么写导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>;导航栏</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.nav {
width: 960px;
height: 60px;
border: 1px solid red;
margin: 100px auto;
}
.nav ul {
list-style: none;
}
.nav ul li {
float: left;
background-color: #e7ffb0;
}
.nav ul li a {
display: block;
width: 120px;
text-align: center;
line-height: 60px;
text-decoration: none;
color: #5a3467;
}
.nav ul li a:hover {
cursor: pointer;
background-color: #645e55;
color: #cdff83;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">;网站导航</a></li>
<li><a href="#">;网站导航</a></li>
<li><a href="#">;网站导航</a></li>
<li><a href="#">;网站导航</a></li>
<li><a href="#">;网站导航</a></li>
<li><a href="#">;网站导航</a></li>
<li><a href="#">;网站导航</a></li>
<li><a href="#">;网站导航</a></li>
</ul>
</div>
</body>
</html>
7. 请问这个导航条的CSS样式怎么写