一个导航条布局的简单写法

我希望能用最简单的代码去解决问题！
CSS部分


代码如下:

<style>
#menu ul {list-style:none;margin: 0px;padding: 0px;}
#menu li {float:left;font-size:12px; background: #999; padding:2px 20px;border:1px solid #000; margin-left: -1px;}
</style>

内容部分： 


代码如下:

<div id="menu">
 <ul>
  <li>标题一</li>
  <li>标题一</li>
  <li>标题一</li>
  <li>标题一</li>
  <li>标题一</li>
  <li>标题一</li>
 </ul>
</div>

#menu ul {
list-style:none;
margin: 0px;
padding: 0px;
}
#menu li {
float:left;
font-size:12px;
background: #999;
padding:2px 20px;border:1px solid #000;
margin-left: -1px;
}
-->

  • 标题一
  • 标题一
  • 标题一
  • 标题一
  • 标题一
  • 标题一

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • JavaScript 模仿vbs中的 DateAdd() 函数的代码

    项目中需要用到日历,.net的日历控件又太重,只好用js写一个,日历的核心函数是 DateAdd(),编写过程中发现 js 里面操作时间比想象中的繁琐,不像vbscript中的可以轻松地dateadd,后来才想到用 setFullYear().setDate()等内置函数,可以拼合一个js版的 dateadd() 来,代码如下: 复制代码 代码如下: function DateAdd(interval,number,date){ // date 可以是时间对象也可以是字符串,如果是后者,形式必须

  • dos下通过wmic命令查看硬盘和内存/CPU信息(windows自带命令查看硬件信息)

    如何在windows系统自带命令查看硬件信息,怎样dos命令查看硬盘和内存/CPU信息?最直接的是:开始→运行→CMD打开命令提示符,在该窗口下输入systeminfo执行,即可看到几乎所有想知道的系统信息,甚至包括机器上已安装的网卡及其IP. 问题描述: 如何从系统中 查看主板上内存条的数量.最佳答案: 在cmd命令下 输入:wmic memorychip list brief 或者 wmic MEMPHYSICAL list brief 就会看到内存条的数量 rem 查看cpu wmic c

  • Linux下查看CPU型号,内存大小,硬盘空间的命令(详解)

    1 查看CPU 1.1 查看CPU个数 # cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 2 **uniq命令:删除重复行;wc –l命令:统计行数** 1.2 查看CPU核数 # cat /proc/cpuinfo | grep "cpu cores" | uniq cpu cores : 4 1.3 查看CPU型号 # cat /proc/cpuinfo | grep 'model name' |un

  • 一个导航条布局的简单写法

    我希望能用最简单的代码去解决问题!CSS部分 复制代码 代码如下: <style> #menu ul {list-style:none;margin: 0px;padding: 0px;} #menu li {float:left;font-size:12px; background: #999; padding:2px 20px;border:1px solid #000; margin-left: -1px;} </style> 内容部分:  复制代码 代码如下: <di

  • jquery入门—编写一个导航条(可伸缩)

    jquery入门—编写一个导航条(可伸缩)

    1.编写一个导航条,单击标题时,可以伸缩导航条内容,简化内容或显示更多内容. 示例代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="

  • 比较漂亮的一个导航条的效果DIV+CSS

    比较漂亮的一个导航条的效果DIV+CSS

    导航条的一个效果DIV+CSS 现在应用于客齐集网站! 复制代码 代码如下: <style>  * {margin:0; padding:0; list-style:none;}  body{font-size:12px; margin:100px;}  #info{border:1px solid #BCFF1D; width:348px; background:#D6FF8C url(/upload/200732411541374.gif) no-repeat left top;  flo

  • CSS仿淘宝首页导航条布局效果

    以下是CSS内容部分: /*子鼠*/ body{ font-size:12px; text-align:center; margin-top:30px; font-family:Verdana;} div,img{margin:0; padding:0; border:0;} ul,li{list-style-type: none; margin:0; padding:0; float:left; } #info{ margin-left:auto; margin-right:auto;widt

  • 利用js定义一个导航条菜单

    利用js定义一个导航条菜单

    效果: 一.html代码: <div class="Maintenance"> <div class="Title"> <div class="M_Button" id="Plan">menu1</div> <div class="M_Button" id="Expert">menu2</div> <div c

  • BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

    bootstrap框架.导航条.下拉菜单.轮播广告carousel.栅格系统布局.标签页tabs.模态框.菜单定位的个人总结,具体详情如下所示: bootstrap框架 <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible

  • bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）

    本文算是bootstrap学习使用的年底大总结,供大家参考,具体内容如下 bootstrap框架 BootStrap学习从现在开始,前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢. <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --> <head> <meta charset="utf-8"> <meta http-equi

  • 一个自动居中的导航条实例与相关问题 DIV+CSS

    这是我刚刚作的一个导航条,为了让那四个LINK居中,我这样作了,但作完后发现了很多的问题,写出来和大家分享一下! 首先我们先来看一下这个导航条! test zishu /*zishu.cn*/ *{ margin:0; padding:0;} body{ font-size:12px; font-family:Verdana, "宋体", Arial; margin:100px 0;} a:link,a:visited{color:#000; text-decoration: none

  • Bootstrap CSS组件之导航条(navbar)

    本文主要大家分享了响应式导航条的具体代码,供大家参考,具体内容如下 1.基础导航条navbar navbar-default navbar-header navbar-brand nav navbar-nav 2.导航条中的表单navbar navbar-default navbar-header navbar-brand navbar-form 3.导航条中的按钮,文本,链接navbar-btn.bavbar-text.navbar-link 4.导航条中的项目进行左右浮动navbar-lef

  • Flutter仿微信通讯录实现自定义导航条的示例代码

    Flutter仿微信通讯录实现自定义导航条的示例代码

    某些页面比如我们在选择联系人或者某个城市的时候需要快速定位到我们需要的选项,一般都会需要像微信通讯录右边有一个导航条一样的功能,由A到Z进行快速定位,本篇文章我们将自己来实现一个跟微信通讯录同样的功能. 关键点:手势定位滑动.列表定位.手势.列表联动. 准备数据,首先我们需要准备导航目录数据, List<String> _az = [ "☆", "A", "B", "C", "D", "

随机推荐