css菜单栏设计

最新推荐文章于 2024-04-06 09:01:22 发布

qj200040

最新推荐文章于 2024-04-06 09:01:22 发布

阅读量120

点赞数

分类专栏： CSS+DIV美工之路文章标签： CSS XHTML HTML

本文链接：https://blog.csdn.net/qj200040/article/details/83700865

版权

CSS+DIV美工之路专栏收录该内容

3 篇文章 0 订阅

订阅专栏

也有很多天没有来我自己的博客咯。这些天颓废得要命。天天在公司闲得蛋疼。偶尔看一下文档....
现在老板让我们做一个审批系统。可是时间显得有一些不足咯。说句老实话。我很早就想走咯。回去学校好好看书...
别废话了。
今天偶尔看了一下css。自己做了一下导航菜单栏。我想做好一个首页面。然后自己做页面。不想求别人太多，自己会的总比球别人来得快。
以下是html代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="navigate.css" />
<title>导航栏设计</title>
</head>

<body>
	<div id="container">
    	<div id="banner"><img src="banner.jpg" /></div>
    	<div id="navigate">
        <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>
         </ul>  
        </div>
    	<div id="left"> 
        	   .....    
        </div>
    </div>
</body>
</html>

另外附上navigate.css：


body{
	background-color:#2286c6;
	margin: 0px;
	padding:0px;
	text-align:center;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
#container{
	position:relative;
	margin:0px auto 0px auto;
	width:780px;
	text-align:left;
}
div br{
	display:none;
}
#navigate{	
	margin: 0px; 
	padding:0px;
	/*background-color:#33CCFF;*/
}
ul{
	background-color:#33CCFF;
	float:left;
	width:100%;
	padding:0;
	margin:0;
	list-style-type:none;
}
li {display:inline}

a{
	margin-top:6px;
	float:left;
	width:6.3em;
	height:30px;
	text-align:center;
	text-decoration:none;
	color:white;
	font-weight:bold;
	font-size:13px;
	background-color:#33CCFF;
	padding:0.2em 0.6em;
	border-right:1px solid white;
}
a:hover {background-color:#ff3300}

做好之后就成了！》。。。汗问题是存在的。我觉得好像CSS要比较精细地计算它们的尺寸。否则看起来不怎么好的哦！给自己说一声加油！

qj200040

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css菜单栏设计

也有很多天没有来我自己的博客咯。这些天颓废得要命。天天在公司闲得蛋疼。偶尔看一下文档.... 现在老板让我们做一个审批系统。可是时间显得有一些不足咯。说句老实话。我很早就想走咯。回去学校好好看书...别废话了。今天偶尔看了一下css。自己做了一下导航菜单栏。我想做好一个首页面。然后自己做页面。不想求别人太多，自己会的总比球别人来得快。以下是html代码：...
复制链接

扫一扫