`
tom&jerry
  • 浏览: 64907 次
  • 性别: 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环境配置
评论
发表评论

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

相关推荐

    微信小程序 自定义头部导航栏 navigationStyle

    &平板设备，在某些时候，不想要自带的顶部导航栏，需要自己定义，这时可以将自定义的导航栏做成一个组件，然后做一下初始配置，在每个页面引用，初始化，即可得到一个自定义的顶部导航栏，即可在当前页面自定义左右...

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

    昨晚群里一个朋友帮忙解决的问题，之前没有遇到过，题目如下： 不改变html结构，使导航菜单垂直水平居中，导航宽度自适应屏幕100%，高度30px;单项高度28px,宽80px; 兼容：ie6+,ff,chrome,opera等主流浏览器。 ...

    驴妈妈旅游网二级导航菜单代码.zip

    旅游网二级导航菜单代码基于jquery.1.11.2.min.js制作，鼠标经过悬停一级导航菜单显示对应的二级菜单，二级菜单相对于一级菜单居中显示，当二级菜单内容区域超出网页左侧区域时，页面左侧区域菜单定位在最左侧，菜单...

    小程序导航栏滚动试验

    微信小程序开发，导航栏华华东效果示例，实现点选并自动居中效果。

    Outlook样式的导航栏-winform

    c#编写的仿Outlook样式的导航栏.支持换肤。

    jquery横向滑动导航栏

    精简的代码实现导航栏滑动效果，实现详解： ...2.导航栏居中：通过left=0px，right=0px，margin-left=auto，margin-right=auto实现； 3.通过jQuery动态改变滑块的Left和Width，然后通过animate实现动画效果。

    Flutter实现左侧边栏导航

    Flutter实现左侧边栏导航,点击左侧菜单右侧自动切换,左侧菜单可以实现自动居中,右侧滚动到底部继续滑可自动切换到下一页,上滑切换到上一页,左侧菜单跟随切换,查看效果图: ...

    网站导航菜单的分割线和水平居中

    写这篇啰嗦的文章，缘由来自于Jorux Notebook的《什么...Jorux指出，在这种极为普遍的导航样式中（通常是用于网站底部的信息导航，100个网站里有90个采用这样的模式），我们应该使用无序列表，而不是下面这种: 1: &lt;p&gt;

    二级菜单,鼠标指向显示隐藏层

    大家看好了说明，再下载，别浪费了自己的资源分。...二级导航菜单、鼠标移动显示当前层内容，有的网站首页用此功能。 强烈抗意某用户。要的资源分高却不给功能。 所以小弟发布此功能。他要10分，我只需5分。

    Element NavMenu导航菜单的使用方法

    组件—导航菜单 顶栏 处理中心 我的工作台 选项1 &lt;el-menu-item index=2-2

    不规则背景墙 CSS实现背景图片不规则的导航菜单

    一般情况下导航菜单的背景图片都是比较有规则的，但是平时我们也会遇到很多背景图片形状不规则导航条（比如但鼠标移上的时候，背景图片不规则，本例只讨论此种类型）,如下图所示： （图一） 当鼠标移上去的时候背景...

    uniapp关于支付宝小程序或钉钉小程序标题栏自定义.txt

    uniapp关于支付宝小程序或钉钉小程序标题栏自定义

    一个自适应的微信小程序自定义导航栏组件

    因为小程序原生导航栏的一些限制，比如：不能设置字体大小，ios标题居中而安卓居左，从非首页启动小程序返回首页菜单不明显，屏幕空间不能最大化使用。因此微信开放了小程序自定义导航栏，允许用户最大化的使用屏幕...

    网页底部圆形可折叠式导航菜单

    效果描述： 一个用户体验较好的css3底部扇形导航 默认折叠效果，点击后显示所有列表 ... 导航底部居中 使用方法： 1、将lanren.css样式拷贝到你的样式表中 2、将body中的代码部分复制过去即可

    JS 实现导航栏悬停效果(续2)

    【JS-实现导航栏悬停】 【JS-实现导航栏悬停（续）】 用Jquery重新写完这个页面之后，发现原来的方法还有是有几个问题： 1.首先Js代码冗余，导航条上的Tab是用js实现跳转而不是超链接； 2.还有导航条本身用fixed定位...

    基于Vue实现的侧边栏导航组件

    基于Vue实现的侧边栏导航组件,左侧边栏导航组件,当左侧导航超过一屏高度时,切换导航具有动画居中效果,可以滑动右侧区域来切换导航,滑动到屏幕底部时自动切换到下个导航,相反滑动到顶部切换上一屏,效果展示: ...

    基于html和CSS3制作酷炫的导航栏

     3 li中字体水平、竖直居中  4 li控制边框样式  5 使用html + css3 渐变画图 制作背景图片  6 更改颜色透明度  7 DIV制作边框阴影 先看效果图:   CSS Code复制内容到剪贴板 &lt;!doctype html&gt;  html...

    微信小程序自定义导航栏组件,导航,完美适配全部手机

    小程序自定义导航栏适配 完美解决内容上下不居中 左右不居中 高度不合适的问题 Navigation Navigation 是小程序的顶部导航组件，当页面配置 navigationStyle 设置为 custom 的时候可以使用此组件替代原生导航栏 使用...

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