`
tom&jerry
  • 浏览: 66148 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

设置导航菜单居中

    博客分类：
  • css
 
阅读更多 
<html>
<head>
<title>导航菜单居中示例</title>
<style type="text/css">
   .nav{background-color:#0f0; text-align:center;clear:both;}
   .nav ul{display:inline-block; *display:inline; zoom:1;padding:0;margin:0;}
   .nav ul li{float:left; margin:5px 10px 5px 10px;list-style-type:none;}
   .nav ul li a{display:block;font-size:14px;font-weight:blod;color:#00f;text-decoration:none;text-align:center;white-space:nowrap;}
</style>
</head>

<body>
<div class="header"></div>
<div class="nav">
    <ul>
        <li><a href="#">菜单项一</a></li>
        <li><a href="#">菜单项二</a></li>
        <li><a href="#">菜单项三</a></li>
        <li><a href="#">菜单项四</a></li>
    </ul>
</div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
分享到：
| Linux（Fedora 13）下C/C++ IDE环境配置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css横向导航菜单样式

    css 横向导航菜单样式 css 横向导航菜单是指在网页中使用 CSS 语言来实现的横向导航菜单样式，该样式可以使网页导航菜单更加美观、易用。该样式主要通过使用 CSS 语言来设置菜单的样式，包括菜单的背景颜色、文字...

    导航居中的flash美女模板是一款导航条居中显示的美女背景风格flash网站模板 .rar

    标题和描述中提到的“导航居中的flash美女模板”是指一个专门设计的网页模板，其中的导航栏（通常包含网站的主要链接）被设置为居中显示，背景则是以美女为主题的设计元素。这样的模板适用于那些希望创建具有视觉...

    移动端轮播导航内容页的轮播选中的导航居中最边的除外

    当涉及到导航栏与内容页的轮播相结合时，设计通常要求选中的导航项居中显示，但最边缘的导航项（通常是第一项和最后一项）需要保持在固定位置，以提供清晰的起始和结束指示。这个需求主要涉及到JavaScript的动态布局...

    css ul li导航菜单居中问题解决方法

    首先，为了确保导航菜单的宽度能够自适应屏幕的宽度，我们需要设置导航栏（`#nav`）的宽度为100%。在CSS中，`#nav`的宽度被设置为百分比，这将使得导航栏能够随浏览器窗口的大小变化而变化。 紧接着，我们需要让`#...

    自定义ActionBar标题居中显示

    在Android应用开发中，ActionBar是系统提供的一种顶部导航栏，用于展示应用的标识、标题以及操作选项。然而，系统默认的ActionBar标题布局通常是左对齐的，这在某些设计需求中可能不符合要求。本篇文章将深入探讨...

    底部导航栏中间圆形按钮凸起效果demo

    在这个案例中，`RelativeLayout`被用作容器，承载底部导航栏的所有按钮，通过设置子视图的相对位置，可以实现中间按钮的居中和凸起效果。 2. **`RadioGroup`**：`RadioGroup`是Android中的一个布局，用于管理一组...

    音乐横向css导航菜单

    在网页设计中，导航菜单是页面布局的重要组成部分，它帮助用户快速找到网站的不同部分，提升用户体验。"音乐横向css导航菜单"是一个专为音乐类网站设计的横置样式导航菜单，利用CSS（Cascading Style Sheets）技术...

    js+css经典横向导航栏

    4. **background-color** 和 **border**：设置导航栏的背景色和边框样式。 5. **text-align**：使导航链接居中或对齐。 6. **transition** 和 **animation**：添加动态效果，如悬停时的颜色变化。 **JavaScript** ...

    tabbar居中效果

    在iOS和Android应用开发中，`TabBar`是常见的底部导航栏组件，用于展示多个主要功能模块，用户可以通过点击不同的按钮在这些模块间切换。在某些设计风格中，`TabBar`的按钮可能会被要求居中显示，以满足特定的视觉...

    一个HTML5底部导航栏特效.rar

    2. **样式**：通过CSS3设置导航栏的位置（固定在底部）、背景色、字体样式、边距等。使用Flexbox或Grid布局可以轻松实现水平居中和响应式设计。 3. **动画**：CSS3的`transition`属性可以定义元素在属性改变时的过渡...

    十几种 网页导航栏

    例如，为了创建一个水平居中的导航栏，我们可以使用Flexbox： ```css nav { display: flex; justify-content: center; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav li { display: ...

    小程序导航栏滚动试验

    这个小程序示例展示了如何在导航栏中实现华丽的滚动效果，并且当用户点击某个选项时，该选项会自动居中，提升用户的操作直观性和易用性。下面将详细介绍这个过程中的关键知识点。 1. **微信小程序基础**： 微信小...

    导航栏和Tabbar

    默认情况下，导航栏背景为白色，标题居中，字体大小和颜色可以通过系统设置自动调整。 2. **颜色定制**：可以自定义导航栏的背景颜色，例如通过`UINavigationBar.appearance().barTintColor`来全局设置所有导航栏的...

    Android-带有传统标题栏ActionBar标题居中的TitleActivity

    - **功能**：显示应用标识、设置导航模式（例如抽屉、tabs）、提供可操作的菜单项等。 - **样式**：可以通过自定义主题来改变其颜色、字体样式等。 2. **创建TitleActivity**： - 在Android Studio中，新建一个...

    HTML横向导航菜单

    在网页设计中，导航菜单有助于用户快速浏览和访问网站的不同部分。本文将深入探讨如何使用HTML来创建一个功能齐全、响应式的横向导航菜单。 首先，HTML（HyperText Markup Language）是构建网页内容的基础语言，它...

    div+css+ul-li制作横向导航栏

    在网页设计中，导航栏是页面布局的重要组成部分，它帮助用户快速访问网站的不同部分。本教程将详述如何使用HTML的`&lt;div&gt;`、`&lt;ul&gt;`和`&lt;li&gt;`标签，结合CSS来创建一个简洁且清晰的横向导航栏。这种方法既简单又实用，...

    ToolBar居中添加控件

    在Android开发中，`ToolBar`是App界面设计中常用的一个组件，它作为Activity或Fragment的顶部栏，可以提供导航、菜单和其他操作。本教程将详细讲解如何在`ToolBar`中居中添加自定义控件，以提升应用界面的美观度和...

    css+div 导航栏

    这段CSS使得导航栏具有全宽背景色，链接居中显示，并在鼠标悬停时改变背景色。`overflow: hidden;`是为了防止内容溢出导航栏。 `index.html`是主HTML文件，它引用了`style.css`来应用样式。这通常通过`&lt;link&gt;`标签...

    CSS设计导航栏（1）

    4. **Flexbox布局**：现代CSS布局首选方法，`display: flex`允许我们轻松地实现水平居中、垂直对齐和自适应导航栏。 5. **响应式设计**：使用媒体查询(`media queries`)，我们可以根据设备屏幕尺寸调整导航栏的样式...

Magicbox
Global site tag (gtag.js) - Google Analytics