几种css横向和纵向导航

最新推荐文章于 2023-09-13 17:44:54 发布
最新推荐文章于 2023-09-13 17:44:54 发布
阅读量390 收藏
点赞数 1
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/terrorpig/archive/2008/12/25/1362328.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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#nav { height:26px; border-bottom:2px solid #2788da; list-style:none;}
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
</head>
<body>
  <ul id="nav">
    <li><a id="current" href="/index.asp">主页</a></li>
    <li><a href="/Sort/List_4.html">DIV+CSS教程</a></li>
    <li><a href="/Sort/List_5.html">常用代码</a></li>
    <li><a href="/Sort/List_6.html">水晶图标</a></li>
    <li><a href="/Sort/List_7.html">幻灯图片</a></li>
    <li><a href="/Sort/List_10.html">软件下载</a></li>
    <li><a href="/css2/">CSS2.0实用手册</a></li>
  </ul>
</body>
</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=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">
 <h1>CSS</h1>
  <h2><a href="#">css入门</a></h2>
  <h2><a href="#">css进阶</a></h2>
  <h2><a href="#">css高级</a></h2>
 <h1>webUI</h1>
  <h2><a href="#">理论知识</a></h2>
  <h2><a href="#">实战应用</a></h2>
  <h2><a href="#">高级技巧</a></h2>
 <h1>DOM</h1>
  <h2><a href="#">DOM入门</a></h2>
  <h2><a href="#">DOM应用</a></h2>
  <h2><a href="#">DOM与浏览器</a></h2>
 <h1>XHTML</h1>
  <h2><a href="#">参考手册</a></h2>
  <h2><a href="#">交流论坛</a></h2>
</div>
</body>
</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=gb2312" />
<title>下拉及多级弹出式菜单www.aa25.cn</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
 if (document.all&&document.getElementById) {
  navRoot = document.getElementById("nav");
  for (i=0; i<navRoot.childNodes.length; i++) {
   node = navRoot.childNodes[i];
   if (node.nodeName=="LI") {
    node.οnmοuseοver=function() {
     this.className+=" over";
    }
    node.οnmοuseοut=function() {
     this.className=this.className.replace(" over", "");
    }
   }
  }
 }
}
window.οnlοad=startList;

//--><!]]></script>
<style>
ul { padding:0; margin:0; list-style:none;}
li { float:left; width:100px;}
ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decoration:none; color:#777;}
ul li a:hover { background-color:#ddd;}
li ul { display:none; top:20px;}
li:hover ul,li.over ul { display:block;}
</style>
</head>

<body>
<ul id="nav">
 <li><a href="">文章</a>
  <ul>
   <li><a href="">CSS教程</a></li>
   <li><a href="">DOM教程</a></li>
   <li><a href="">XML教程</a></li>
   <li><a href="">FLASH教程</a></li>
  </ul>
 </li>
 <li><a href="">参考</a>
  <ul>
   <li><a href="">XHTML</a></li>
   <li><a href="">XML</a></li>
   <li><a href="">CSS</a></li>
  </ul>
 </li>
 <li><a href="">BLOG</a>
  <ul>
   <li><a href="">全部</a></li>
   <li><a href="">网页技术</a></li>
   <li><a href="">UI技术</a></li>
   <li><a href="">FLASH技术</a></li>
  </ul>
 </li>
</ul>
<ul>
 <li><a href="">摇滚</a></li>
 <li><a href="">纯音乐</a></li>
 <li><a href="">古典金曲</a></li>
 <li><a href="">电影原声</a></li>
</ul>
</body>
</html>

转载于:https://www.cnblogs.com/terrorpig/archive/2008/12/25/1362328.html

weixin_30527143
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BootStrap--CSS组件--导航(nav)
王欢的博客
12-16 1526
//源码 .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .nav > li { position: relative; display: block; } .nav > li > a { position: relative; display: block; padding: 10px 15
html纵向导航
03-06
html纵向导航代码
用css实现了一个精致的纵向导航菜单
张孝祥专栏
10-12 1万+
纵向导航菜单  #course { border-width:0px 1px 1px 1px; border-style:solid; border-color:#f3c3f3; width:120px; }  #course dt,#course dd { margin:0; padding:3px; font-size:12px; }  #course dt { border-top: 1px
十天学会<div+css>横向导航菜单和纵向导航菜单
weixin_30539835的博客
09-14 394
纵向导航菜单及二级弹出菜单 纵向导航菜单：一级菜单 <head><style type="text/css">body { font-family: Verdana; font-size: 12px; line-height: 1.5; }a { color: #000; text-decoration: none; }a:hover { color: #F00; }...
纯CSS实现横纵向三段式布局
weixin_42863256的博客
10-13 1290
主要是实现 首尾固定 中间自适应 以及 左右固定 中间自适应的布局。 横向三段式主要采用flex，纵向三段式采用position：absolute布局。 最终实现效果 <!DOCTYPE html> <html> <style type="text/css"> body,html{ height:100%; margin:0; } .page{ height: 100%; margi
漂亮的CSS二级竖向导航菜单
06-06
很漂亮的CSS下拉菜单导航，喜欢的童鞋可以下载试用下哦！
jQuery横向下拉导航菜单特效代码
03-20
该下拉菜单有两种显示模式：横向和纵向。横向模式下，子菜单会在主菜单下方水平展开；而在纵向模式下，子菜单会在主菜单右侧垂直展开。这种灵活性使得菜单可以适应不同的布局需求，无论是窄屏设备还是宽屏环境，都能...
css非常漂亮的导航
12-11
在CSS中，实现导航栏的方式多种多样，包括但不限于以下几种关键技术点： 1. **定位（Positioning）**：通过设置`position`属性，如`static`、`relative`、`absolute`、`fixed`，可以控制导航元素在页面上的位置。 ...
PC端横向滚动视觉差效果
03-26
通过以上技术手段，我们可以构建出一个具有创新性的PC端横向滚动页面，提供一种新颖的浏览方式，让用户在探索内容时感受到深度和动感。在实际项目中，根据需求调整和优化这些技术，将能够创造出独一无二的视觉差滚动...
用js实现CSS圆角生成更新
10-30
3. 横向和纵向圆角生成：圆角生成可以分为横向和纵向两种。横向圆角生成是指在水平方向上生成圆角，而纵向圆角生成是指在垂直方向上生成圆角。JavaScript可以通过设置不同的CSS样式来实现这两种圆角生成。 4. 边框...
html纵向导航,【练习实例】HTML+CSS制作导航栏（横向与纵向）
weixin_35201342的博客
06-03 6846
纵向导航栏建立一个列表主页新闻联系关于2. 定义列表基本样式ul{/*去掉列表的样式*/list-style-type: none;width: 200px;background-color: #DDDDDD;}li a{/*将内联元素转换为块级元素，便于padding设定*/display: block;/*去掉链接默认样式*/text-decoration: none;color: #0000...
纯css二级导航偌,纯css3实现的竖形二级导航
weixin_30941657的博客
08-03 260
之前为大家分享了好多导航菜单。今天给大家带来一款纯css3实现的竖形二级导航。这款导航菜单可以是无限级。一起看下效果图：实现的代码。html代码：Menu 1Submenu 1.1Submenu 1.1.1Submenu 1.1.2Submenu 1.1.2.1Submenu 1.1.2.2Submenu 1.2Menu 2Submenu 2.1Submenu 2.2Menu 3Submenu 3...
html 纵向导航,18种html导航垂直分页动画特效
weixin_31517321的博客
05-30 398
【温馨提示】源码包解压密码：www.youhutong.com效果图：描述说明：使用方法HTML结构垂直分页导航按钮动画特效生成上面的垂直分页导航效果的HTML结构如下：CSS样式.nav{position:relative;width:8em;margin:0003em;}.nav__item{line-height:1;position:relative;display:...
CSS---flex布局
是吃货不是贝爷的博客
09-04 1240
主要记录flex布局的要点以及实例。
导航的写法
Julie115的博客
08-03 2847
一、竖向导航 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; ul{ list-style-type:none; margin:0; padding:0; } a{ display:block; background-color:green; color:wh...
CSS 纵横比属性：aspect-ratio
最新发布
Moon Star
09-13 639
aspect-ratio纵横比可以用于计算 auto 尺寸以及其他布局函数。
运用html+css制作二级导航栏(竖版)
weixin_65789931的博客
07-18 1243
运用html+css制作二级导航栏(竖版)
html/css横向竖向导航栏的绘制
热门推荐
baidu_31134013的博客
11-06 4万+
导航栏编写一般都是用标签来写及列表，下面就看一下代码如何编写的吧： 【竖向导航栏】 产品 工具与镜像 客户与伙伴 帮助与支持 论坛与博客 （图为没有css修饰的运行截图） 接下来css修饰：在没有用css处理过的代码上，其样式ul,li标签的属性都是默认的值： a:去除li前的点：需要在ul的样式里添加 list-style-type
css实现横向导航和竖向导航栏的方法（代码）
weixin_30362233的博客
11-21 3263
一、竖着的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul{ list-style-type:none; margin:0; padding:0; } a{ displ...
css+div横向导航
04-27
可以使用CSS的flexbox布局来实现横向导航。假设HTML结构如下： ```html <div><a href="#">Link 1</a></div> <div><a href="#">Link 2</a></div> <div><a href="#">Link 3</a></div> ``` 则可以使用如下的CSS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值