首页 / CSS / CSS网页布局入门教程12：纵向导航菜单_基础教程

CSS网页布局入门教程12：纵向导航菜单_基础教程

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS网页布局入门教程12：纵向导航菜单_基础教程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2528字，纯文字阅读大概需要4分钟。

内容图文

纵向导航菜单也是网站应用中的一种重要形式，所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式。先看一下效果吧！

如图所示的效果，我们先看一下代码结构：

CSS

css入门

css进阶

css高级

webUI

理论知识

实战应用

高级技巧

DOM

DOM入门

DOM应用

DOM与浏览器

XHTML

参考手册

交流论坛

　　从以上可以看出，这次的XHTML部分的代码横向代码略有不同，我们没有继续使用ul和li标签，其实继续使用ul元素也能完好的实现纵向导航系统，但是在这风景点我们希望更多的提供不同途径来展现css而已设计的灵活与方便性以便于抛砖引玉，开拓更多的设计思想。
　　这一次采用的是div+h1+h2的形式。我们使用div标签设定了一个导航的结构区域。在这个区域中我们使用了h1来作二级分类的标题，h2来做二级分类下面的细节内容。在XHTML的讲法意义中，h1,h2,h3这些标签本身就具有用于对文本进行层级划分的意义，直接使用h1,h2来表示层级关系，相对于在标签中加入id或class来做层级的标记更为简单和直观，在这里使用h1,h2来标记不同级别的分类名称也实在是再合适不过了。我们来看一看css代码的设计：

#nav { width:100px; border-color:#c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;}
#nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;}
#nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;}
#nav h2 a { color:#666666; text-decoration:none;}
#nav h2 a:hover { color:#999999; text-decoration:underline;}

　　本css代码部分采用了简化写法，如果哪句意思看不懂，您可以在Dreamweaver中打开选择编辑样式表即可查看具体是哪一项了，相信经过这样几次练习，这些代码您已经能完全看懂了，说明您离高手又近了一步了。
　　大家可能已经注意到了，#nav的边框本例中只设置了左右下和一像素，而没有上，而在h1的样式里设置了上部的上像素？这是为什么呢？因为h1的样式上部都有一条横线，如果nav上部再有一条横线的话成长两条了，结果显示出来就是两像素的高度了。
　　好了，完整的效果可以预览一下：

<!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=gb2312" /> 
<title>纵向导航菜单</title> 
<style> 
#nav { width:100px; border-color:#c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;} 
#nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;} 
#nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;} 
#nav h2 a { color:#666666; text-decoration:none;} 
#nav h2 a:hover { color:#999999; text-decoration:underline;}

</style> 
</head>

<body> 
<div id="nav"> 
    <h2>CSS</h2> 
        <h2>css入门</h2> 
        <h2>css进阶</h2> 
        <h2>css高级</h2> 
    <h2>webUI</h2> 
        <h2>理论知识</h2> 
        <h2>实战应用</h2> 
        <h2>高级技巧</h2> 
    <h2>DOM</h2> 
        <h2>DOM入门</h2> 
        <h2>DOM应用</h2> 
        <h2>DOM与浏览器</h2> 
    <h2>XHTML</h2> 
        <h2>参考手册</h2> 
        <h2>交流论坛</h2> 
</div> 
</body> 
</html>

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

内容总结

以上是互联网集市为您收集整理的CSS网页布局入门教程12：纵向导航菜单_基础教程全部内容，希望文章能够帮你解决CSS网页布局入门教程12：纵向导航菜单_基础教程所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/415789.html

来源：【匿名】

【上一篇】一点小小的创意css鼠标放上去则显示电话号码_经验交流【下一篇】php无法调用css怎么办

更多 ►

【CSS网页布局入门教程12：纵向导航菜单_基础教程】教程文章相关的互联网学习教程文章

使用CSS创建有图标的网站导航菜单【代码】

在我创建的每一个互联网应用中，我都试图避免创建完全由图片组成的菜单。在我看来，网页菜单系统中应该使用文字。这样做也会让菜单变得更干净利落、清晰和易读，不用考虑应用程序如何读取它，以及页面放大的时候也不会失真等。或许这只是我的想法？但是我们不能创建即好看又好用的菜单吗？下面是创建下面的有图标支持的导航菜单的代码和样式。基本标签　<ul class="nav"><li class="home"><a href="#link">h...

jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程【代码】【图】

有两天没发表文章了，今天来说说利用jQuery和CSS3制作一款类似阿里巴巴左侧商品菜单导航，这款菜单看起来非常大气，可以展示非常多的产品类目，如果你在设计电子商务网站，不妨可以拿来参考，一下是效果图：我们也可以到这里来查看这款菜单的DEMO演示。接下来还是分析一下源代码，源码由HTML、CSS和jQuery组成，先来看看HTML，东西很多，但结构非常简单：<div class="sidebar"><div class="sidebar_top sidebar_top_tc">全部产品分...

DIV+CSS制作的导航菜单

纯CSS实现兼容IE7及以上宽度自适应无限级导航菜单附演示

先来个Demo： http://www.jb51.net/jiaoben/111258.html好吧，我承认，我有点标题党了，IE7的兼容并不是特别好，当鼠标离开某个导航再进入时，会留下上一次子菜单的残影（写的好像玄幻小说似的=。=）不过纯属研究，O(∩_∩)O哈哈~ 宽度自适应是指各级菜单都可以随内容的长度自行适应宽度，而当浏览器分辨率较低时一级导航也可以自动换行，而多级子菜单靠左显示还是得手动调整。 DOM结构比较简单，只是 ol.nav 与 li.item 的互相嵌...

点击导航菜单，下面就显示菜单的页面，像QQ空间中日志，相册，说说_html/css_WEB-ITnose

下面就是显示超链接的，有几种方法，求详细。回复讨论(解决方案) 你想要的是不是iframe？把以下代码：插进去看一下把。但我还希望当滚动的时候那个导航的DIV是固定的，不随滚动条滚动。要怎么搞

CSS中五种方法实现导航菜单水平居中的实例详解

在网页设计中，水平导航菜单使用是十分广泛的，在CSS样式中，我们一般会用Float元素或是「display:inline-block」来解决。而今天主要讲解如何让未知宽度的元素居中，下面我们会列出几种方法来解决水平居中问题。当然这些方法不一定是用来解决导航菜单问题，还有其它类似情况也是可以使用的。CSS导航菜单水平居中的多种方法：方法1：display:inline-block方法2：position:relative方法3：display:table方法4：display:inline-flex方...

css实现会折叠、展开的菜单导航栏效果_导航菜单

function show(c_Str) {if(document.all(c_Str).style.display=='none') {document.all(c_Str).style.display='block';} else{document.all(c_Str).style.display='none';}} function high(){ if (event.srcElement.className=="k"){ event.srcElement.style.background="336699" event.srcElement.style.color="white" } } function low(){ if (event.srcElement.className=="k"){ event.srcElement.style.background...

jQuery和CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单【图】

这篇文章主要介绍了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单,可实现页面向下滑动后导航栏横向悬浮并固定在顶部的功能,涉及jQuery事件响应及页面元素属性动态修改相关操作技巧,需要的朋友可以参考下本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单。分享给大家供大家参考，具体如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x...

jquery+CSS3实现下拉导航菜单功能【图】

这次给大家带来jquery+CSS3实现下拉导航菜单功能，jquery+CSS3实现下拉导航菜单功能的注意事项有哪些，下面就是实战案例，一起来看一下。该下拉菜单的HTML结构非常简单，基本的HTML结构如下：<p id="top-bar" class="top-bar"><p class="bar"><button id="navbox-trigger" class="navbox-trigger"><i class="fa fa-lg fa-th"></i></button></p><p class="navbox"><p class="navbox-tiles"><a href="#" class="tile"><p class="icon...

麦鸡的TAB切换功能结合了javascript和css_导航菜单【图】

这类型东西网上多的是,但朋友说我的程序程序理念好(嘻…),我也写一个tab切换,厚着脸皮把它叫麦鸡的TAB切换(汗一把先.),转载也请注明麦鸡的博客,下面就开始了做个滑动门,需要一个图片 CSS 代码如下:.nav{position:relative} .nav dt{float:left; margin:0 2px 0 0; position:relative; z-index:2} .nav dt a{color:#555; text-decoration:none} .nav dt a:hover{color:#000} .nav dt a{ float:left; display:block; heig...

CSSJavaScript实现菜单功能改进版_导航菜单

改进版本优化了这个问题，通过简单的Javascript代码就可以增加菜单。同时使得HTML页面非常简洁，只需要写2行代码即可！O(∩_∩)O 1.使用前提，在HTML页面中引入一个CSS文件，和一个JavaScript文件。如下：代码如下: Menu 引入CSS文件：，menu.css代码见后引入JavaScript文件： 2.定义菜单代码如下：代码如下:if (document.getElementById){ var root = new Root(); var m1 = new Menu("File","alert(this.innerText)...

JavaScriptCSS创建右击菜单效果代码_导航菜单【图】

效果图： css和javascript创建页面右键菜单 body { font-family: "宋体"; font-size: 12px; } .skin0 { padding-top: 4px; text-align: left; width: 100px; border: 2px solid black; background-color: menu; font-family: "宋体"; line-height: 20px; cursor: default; visibility: hidden; } .skin1 { padding-top: 4px; cursor: default; font: menutext; text-align: left; font-family: "宋体"; font-...

JavaScriptCSS菜单功能改进版_导航菜单

JavaScriptCSS菜单功能代码_导航菜单

Menu #menubar { font-family:verdana; font-size:12px; margin:1px; } #menubar li { float:left; position:relative; text-align:left; } /* each menu item style */ #menubar li a { border-style:none; color:black; display:block; width:150px; height:20px; line-height:20px; padding-left:10px; text-decoration:none; } /* the first level menu which displays default */ #menubar .menuMain{ ...

提取自百度有啊的css圆角效果_导航菜单

代码如下: 百度有啊css圆角方案 .box1{background:url('http://www.gxlcms.com/upload/20090330140617327.gif') repeat-x #1d6cb7;margin-top:1em;position:relative;zoom:1;width:778px;} .box1 .tl,.box1 .tr,.box1 .bl,.box1 .br {width:5px;height:5px;position:absolute;background:url('http://www.gxlcms.com/upload/20090330140618989.gif') no-repeat;overflow:hidden; } .box1 .cc{height:40px; padding:5px;} .box1...

CSS - 技术教程分类

CSS 教程 CSS 简介 CSS 语法 CSS Id 和 Class选择器 CSS 创建 CSS Backgrounds(背景) CSS Text(文本) CSS Fonts(字体) CSS 链接(link) CSS 列表 CSS Table(表格) CSS 盒子模型 CSS Border(边框) CSS 轮廓（outline）属性 CSS margin(外边距) CSS padding（填充） CSS 尺寸 (Dimension) CSS Display(显示) CSS Position(定位) CSS Overflow CSS Float（浮动） CSS 对齐 CSS 伪类 CSS 伪元素 CSS 导航栏 CSS 下拉菜单 CSS 提示工具 CSS 图像透明/不透明 CSS 图像拼合技术 CSS 媒体类型 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网页布局 CSS 总结 CSS 实例 Viewport 媒体查询图片视频(Video) 框架 CSS 参考手册 CSS 选择器 CSS Web安全字体 CSS 动画 CSS 单位 CSS 颜色 CSS 颜色值 css 全部

CSS - 最热教程

设置DIV的背景色有哪几种方法 js批量设置元素样式和封装似于jquery的...HTML5实战与剖析之CSS选择器——getEle...css如何设置文本元素内的空白填充？如何压缩css文件 cssright属性怎么用 cssanimation-timing-function属性怎么...jquery设置内联样式css()jQuery+HTML5+CSS3制作支持响应式布局时...jquery实现动态改变css样式的方法分析

首页 / CSS / CSS网页布局入门教程12：纵向导航菜单_基础教程

CSS网页布局入门教程12：纵向导航菜单_基础教程

内容导读

内容图文

CSS

css入门

css进阶

css高级

webUI

理论知识

实战应用

高级技巧

DOM

DOM入门

DOM应用

DOM与浏览器

XHTML

参考手册

交流论坛

内容总结

内容备注

内容手机端

【CSS网页布局入门教程12：纵向导航菜单_基础教程】教程文章相关的互联网学习教程文章

CSS - 相关标签

CSS - 技术教程分类

CSS - 最新教程

CSS - 最热教程