也有很多天没有来我自己的博客咯。这些天颓废得要命。天天在公司闲得蛋疼。偶尔看一下文档....
现在老板让我们做一个审批系统。可是时间显得有一些不足咯。说句老实话。我很早就想走咯。回去学校好好看书...
别废话了。
今天偶尔看了一下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要比较精细地计算它们的尺寸。否则看起来不怎么好的哦！给自己说一声加油！
分享到：
相关推荐
总之，CSS菜单栏设计是一项综合性的技能，涉及布局、交互、动画等多个方面。通过灵活运用CSS，我们可以创造出既美观又实用的菜单栏，提升用户体验。提供的压缩包文件"CSSmenus"可能包含了多种不同风格和功能的CSS...
最后，提供的文件"w3cfuns凤凰网导航效果"可能包含一个具体的菜单栏实现案例，你可以参考其中的代码，学习如何结合上述知识点来创建自己的CSS菜单栏。 通过不断实践和学习，你将能掌握创建高效、美观且具有良好兼容...
"CSS+Div+JS实现简单导航栏菜单栏"是一个基础但实用的主题，它涵盖了网页布局、样式设计以及交互功能的实现。接下来，我们将深入探讨这三个关键技术在创建导航栏菜单栏中的应用。 首先，CSS（层叠样式表）是用于...
在本案例中，"CSS样式访苹果菜单栏"是一个关于如何使用CSS来创建类似苹果操作系统中菜单栏效果的教程。 苹果菜单栏以其简洁、清晰的界面设计而闻名，它通常位于屏幕顶部，包含应用的图标、菜单项和系统状态指示器。...
在网页设计中，创建一个可隐藏的菜单栏是提高用户体验的有效方法，特别是在移动设备上，有限的屏幕空间需要更高效地利用。这个“使用CSS和js做的单页可隐藏菜单栏”项目，就是一个很好的示例，它展示了如何利用这两...
"CSS3 黑色炫酷菜单栏"就是一个利用这些新特性的实例，旨在打造一个既时尚又实用的导航菜单。下面将详细介绍这个主题中的相关知识点。 1. **选择器增强**： CSS3 引入了更高级的选择器，如类选择器、ID选择器、...
首先，CSS菜单设计是网页界面设计中的核心部分，它帮助用户高效地浏览网站内容。一个良好的CSS菜单应该具备清晰的结构、易读的文本、吸引人的视觉效果以及响应式的布局。在创建CSS菜单时，我们通常会使用以下知识点...
这里的"15个精选超级漂亮div+css菜单下载(不下后悔)"是一个资源集合，提供了15款设计精美、功能实用的Div+CSS导航菜单，适合用于网站开发和设计中，提升用户体验。下面将详细讲解Div+CSS菜单的设计原理、重要性以及...
"CSS菜单滚动效果" 是一种利用CSS（层叠样式表）技术实现的交互式菜单设计，它通过伪元素和`content`属性来创建鼠标悬停时的动态效果，提升用户的交互体验。在本案例中，我们关注的是如何用CSS实现这一效果，以及...
例如，每个菜单项可能是一个独立的`<div>`，而整个菜单栏可以是包含这些菜单项的另一个`<div>`。`<div>`标签可以通过类（class）或ID属性与其他CSS规则关联，以便进行样式定制。 接着，`menu.css`文件包含了定义...
以上就是使用JavaScript和CSS实现19个菜单栏案例中的关键知识点，它们涵盖了基本样式设计、交互效果、响应式布局以及无障碍性等多个方面，旨在提升网页的用户体验和功能性。学习并掌握这些技巧，对于网页开发者来说...
CSS菜单生成器通过图形用户界面，让用户无需深入理解复杂的CSS代码，也能定制出符合设计需求的下拉菜单或多级导航栏。 CSS菜单的核心在于利用CSS的盒模型、定位、浮动和伪类选择器等特性来实现各种样式效果。以下是...
在这个项目中，菜单栏会根据用户设备的屏幕大小进行调整，可能的表现形式有折叠菜单、汉堡菜单或其他适应小屏幕的设计模式。这通过CSS媒体查询（Media Queries）来实现，可以根据设备的宽度、高度或像素密度应用不同...
在本话题中，我们将深入探讨网站菜单栏的设计原则、CSS样式的应用以及如何创建一个高效、美观的菜单栏。 首先，设计一个优秀的网站菜单栏要考虑以下几个关键因素： 1. **清晰性**：菜单项应明确无误，避免使用含糊...
总结来说，"菜单栏下拉菜单"是一种增强用户体验的网页设计技巧，通过JavaScript和CSS的结合，可以实现菜单栏在页面滚动时始终可见的效果。理解并掌握这种特效的实现原理和方法，对于提升网页的互动性和用户友好性...
在网页设计中，一个吸引人的菜单栏是提升用户体验的关键元素之一。"紫色css动画标签菜单栏.rar" 提供了一个独特的视觉效果，利用CSS和jQuery技术为网页增添动态魅力。这个资源是一个可运行的代码示例，允许开发者...
本文介绍了如何使用Vue框架来实现一个圆形菜单栏组件，组件的开发使用了HTML、CSS和JavaScript（或TypeScript），并引入了hammer.js库来支持圆形菜单栏的手势操作。在构建圆形菜单栏组件的过程中，涉及到多个前端...
在网页设计中，菜单栏和导航是至关重要的组成部分，它们为用户提供了一种直观的方式来浏览网站内容。本资源提供了8种不同的菜单栏特效样式，适用于各种类型的网页设计需求。这些特效可以增强用户体验，使网站看起来...
【标题】：“一款漂亮实用的OA系统左侧DIV+CSS菜单”揭示了这个资源是一个专为OA（Office Automation，办公自动化）系统设计的界面元素，主要关注于左侧的导航菜单。这种菜单是基于HTML中的`<div>`元素和CSS...
1. **菜单栏设计**： 菜单栏是应用的导航核心，它通常位于屏幕顶部或底部，展示主要的类别选项。在类似美团的应用中，菜单栏可能包括“美食”、“酒店”、“电影”等分类。设计时需考虑清晰易读、触达性高和视觉...