多种导航栏样式

最新推荐文章于 2024-04-25 18:36:27 发布
最新推荐文章于 2024-04-25 18:36:27 发布
阅读量366 收藏 1
点赞数
分类专栏： web前端 文章标签： class border float table div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/douyaohai/article/details/7982065
版权

<style type="text/css">
#nav{
 width: 9em;
 margin:0 auto;
 font-size:14px;
    border:solid 1px #aaa;
}
#nav a{
 display:block;
 text-decoration:none;
 color:#000;
 height:2.4em;
 border:0.4em solid #aaa;
}
#nav a:hover{
 color:#fff;
 background-color:#8600FF;

 border-color:#d3a4ff #8600FF;
}

</style>
<body>
 <div id="nav">
     <a href=" ">head</a>
     <a href=" ">nav</a>
     <a href=" ">banner</a>
     <a href=" ">content</a>
     <a href=" ">footer</a>
 </div>
</body>

 

/-----------------------------------------------------/

<style type="text/css">
    #nav{
     width:120px;
     font-size:14px;
     padding:8px;
     background-color:#ccc;
     margin:0 auto;
     border:1px solid #ccc;
    }
    #nav a{
     display: block;
     background-color: #fff;
     padding:4px 8px;
     text-decoration: none;
     margin:8px 0;
     border-left: 8px solid #9ab;
     border-right:8px solid #9ab;
    }
    #nav a:hover{
     color:#f00;
     border-left: 8px solid #000;
     border-right:8px solid #000;
    }
    #nav a#first,#nav a#last{
     margin: 0;
    }
</style>
<body>
  <div id="nav">
     <a href=" "id="first">yangshi</a>
     <a href=" ">yangshi</a>
     <a href=" ">yangshi</a>
     <a href=" ">yangshi</a>
     <a href=" ">yangshi</a>
     <a href=" "id="last">yangshi</a>

  </div>

/-----------------------------------------------------/

<style type="text/css">
  #nav{
   width: 140px;
   margin:0 auto;
   background-color: #fff;
   border:1px solid #c00;
  }
  #nav a{
   width: 130px;
   position: relative;
   display: block;
   color: #c00;
   text-decoration: none;
   text-align: center;
   padding: 4px ;
   border:1px solid #fff;
   }
   #nav a:hover{
    border-color:#c00;
   }
#nav a span{
 display: block;
 position: absolute;
 height: 0;
 width: 0;
 border: 8px solid #fff;
 top: 4px;
 overflow: hidden;
}
#nav a span.left{
 border-left-color: #c00;
 left: 8px;
}
#nav a span.right{
 border-right-color: #c00;
 right: 8px;
}
</style>
<body>
 <div id="nav">
      <a href="">
       <span class="left"></span>yangshi
      <span class="right"></span></a>
     <a href="">
       <span class="left"></span>yangshi
      <span class="right"></span></a>
      <a href="">
       <span class="left"></span>yangshi
      <span class="right"></span></a>
      <a href="">
       <span class="left"></span>yangshi
      <span class="right"></span></a>
      <a href="">
       <span class="left"></span>yangshi
      <span class="right"></span></a>
 </div>

</body>

/-----------------------------------------------------/

<style type="text/css">
#nav{
 margin: 0 auto;
 font-size: 14px;

}
#nav a{
 display: block;
 float: left;
 position: relative;
 background-color: #c00;
 color: #fff;
 text-decoration: none;
 padding: 6px;
 margin: 1px 0 0 1px;
}
#nav a span{
 height: 0;
 width: 0;
 border-bottom: solid 6px #c00;
 border-left: solid 6px #fff;
 position: absolute;
 top: 0;
 left: 0;
 overflow:hidden;
}
#nav a:hover{
 background-color: #f90;
 color: #333;
}
#nav a:hover span{
 border-bottom: solid 6px #f90;
}
</style>
<body>
 <div id="nav">
  <a href="">
          <span class="left"></span>
  yanshi</a>
  <a href="">
          <span class="left"></span>
  yanshi</a>
  <a href="">
          <span class="left"></span>
  yanshi</a>
  <a href="">
          <span class="left"></span>
  yanshi</a>
  <a href="">
          <span class="left"></span>
  yanshi</a>
  <a href="">
          <span class="left"></span>
  yanshi</a>
 </div>
 

</body>

 

/-----------------------------------------------------/

<style type="text/css">
 #nav{
  margin: 0 auto;
  padding: 0;
  width: 610px;
  list-style-type: none;
  font-size:14px;
 }
 #nav li{
  float: left;
  padding: 0;
  margin:0 1px 0 0;
  width: 150px;
 }
 #nav li dl{
  width: 150px;
  margin: 0;
  padding: 0 0 10px 0;
  background: #cb6
 }
 #nav li dt{
  margin: 0;
  padding: 5px;
  text-align: center;
  border-bottom: 1px solid #b00;
  }
 #nav li dt a,#nav li dd a{
  display: block;
}
 #nav li dt a,#nav li dt a:visited{
  display: block;
  color: #333;
  border-bottom: 1px;
 }
 #nav li dd{
  margin: 0;
  padding: 0;
  color: #fff;
  background: #47a;
 }
 #nav li dd.last{
  border-bottom: 1px solid #b00;
 }
 #nav li dd a,#nav li dd a:visited{
  height: 1em;
  display: block;
  color: #fff;
  padding: 4px 5px 4px 20px;
  background: #47a;
  text-align: center;
 }
 #nav li a{
  text-decoration: none;
 }
 #nav li dd{display: none;}
 #nav li:hover dd,#nav li a:hover dd{display: block;}
 #nav li:hover,#nav li a:hover{border: 0;}
 #nav li dd a:hover{
  background: #147;
  color: #9cf;

 }
 #nav table{
  border-collapse: collapse;
  padding: 0;
  margin: -1px;
  font-size: 1em;
 }
 .one{background-color: #750075;}
 .two{background-color: #00A600}
 .three{background-color: #0000E3}
 .four{background-color:#F75000 }
</style>
<body>
<ul id="nav">
 <li>
  <a href=""><table><tr><td>
  <dl>
   <dt class="one"><a href="" >yangshi</a></dt>
   <dd><a href="">aaaaa</a></dd>
   <dd><a href="">aaaaa</a></dd>
   <dd><a href="">aaaaa</a></dd>
   <dd><a href="">aaaaa</a></dd>
  </dl>
  </td></tr></table></a>
 </li>
<li>
  <a href=""><table><tr><td>
  <dl>
   <dt class="two"><a href="" >yangshi</a></dt>
   <dd><a href="">aaaaa</a></dd>
   <dd><a href="">aaaaa</a></dd>
   <dd><a href="">aaaaa</a></dd>
   <dd><a href="">aaaaa</a></dd>
  </dl>
  </td></tr></table></a>
 </li>
 <li>
  <a href=""><table><tr><td>
  <dl>
   <dt class="three"><a href="" >yangshi</a></dt>
   <dd><a href="">aaaaa</a></dd>
   <dd><a href="">aaaaa</a></dd>
   <dd><a href="">aaaaa</a></dd>
   <dd><a href="">aaaaa</a></dd>
  </dl>
  </td></tr></table></a>
 </li>
 <li>
  <a href=""><table><tr><td>
  <dl>
   <dt class="four"><a href="" >yangshi</a></dt>
   <dd><a href="">aaaaa</a></dd>
   <dd><a href="">aaaaa</a></dd>
   <dd><a href="">aaaaa</a></dd>
   <dd><a href="">aaaaa</a></dd>
  </dl>
  </td></tr></table></a>
 </li>
</ul>

</body>

 


 

douyaohai
关注
专栏目录
CSS_精美导航23例_含有各种各样的导航菜单样式
06-25
CSS_精美导航23例_含有各种各样的导航菜单样式,该实例本人已亲自使用过,感觉非常不错,现在分享给大家,希望可以帮助更多的朋友!
给页面导航栏选中栏目添加特殊样式（页面刷新后仍有效）
11-13
给页面导航栏选中栏目添加特殊样式的案例（页面刷新或者跳转到新页面后导航栏的样式仍然有效）
10种导航栏
甘乐2333的博客
05-02 277
<!doctype html> <html> <head> <meta charset="utf-8"> <title>导航栏</title> <style type="text/css"> *{margin:0; padding:0;} body{font-family:"微软雅黑";} ul,li{list-...
导航栏的多种滚动
weixin_30510153的博客
12-27 107
参考网址：http://blog.csdn.net/chenyulearn/article/details/19606751 转载于:https://www.cnblogs.com/flyingLcode/p/8127706.html
导航 —【导航栏样式】
Zyl_CN的博客
05-26 680
标签式：&lt;ul class="nav nav-tabs"&gt; &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li role="presentation"&am
多种多样的导航栏样式
01-28
"多种多样的导航栏样式"这个主题涉及到的是一种创新和个性化的网页设计方法，旨在吸引用户并提高其在网站上的停留时间。下面将详细介绍几种常见的导航栏样式及其特点。 1. **固定式导航栏**：这种样式常用于大型...
Flask 使用Bootstrap 导航条样式
07-22
Bootstrap提供了多种导航条样式，这里以一个基本的静态导航条为例： ```html 网站名 <span class="navbar-toggler-icon"></span> 首页 关于 ``` **二、实现页面div的两列自适应布局...
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
10-20
根据给定的文件信息，我们需要详细说明关于使用Jquery为当前页或跳转后页面的导航栏添加选中状态样式的技术知识点。 知识点详细说明： 一、Jquery的基本概念： Jquery是一个快速、小巧、功能丰富的JavaScript库，...
8款网站顶部导航栏样式特效.rar
10-02
"8款网站顶部导航栏样式特效.rar"这个压缩包很可能包含了八种不同的CSS或JavaScript实现的导航栏设计示例，用于提升网站的用户体验和视觉吸引力。 1. **响应式设计**：现代网站设计强调响应式，意味着导航栏应能在...
rn 多种导航栏搭配使用
weixin_43294560的博客
08-24 409
因为一个组件中只能设置一个导航栏 (1)在App.js中设置Stack栈导航栏,设置所有通过this.props.navigate导航的路由和默认路由 (2)在栈导航的路由中,设置底部导航栏/顶部导航栏,然后再配置相应路由
nav元素标签
楠木大哥技术博客
07-25 2754
HTML5中的新元素标签用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。 一直以来，我们习惯于使用形如或这样的代码来写页面的导航；在HTML5中，我们可以直接将导航链接列表放到标签中： Home About Blog 根据W3C的定义规范： nav元素是一个可以用来作为页面
前端小白实战过程----制作在线购物类网页
weixin_45817780的博客
03-06 7869
前言 在线购物网站是当下比较流行的一类网站，越来越多的公司企业着手架设在线购物类网站平台。我在网上搜了很多，发现了易于新人着手的网页项目。那么本篇文章，将展示我对一个网页的编写过程。 整体布局 找了个“优尚”的网站，体现的组件比较多，主要包括产品搜索，账户登录，广告推荐，产品推荐，产品分类等内容。最终的网页效果如图。 设计分析 购物网站的一个特点就是突出产品，突出购物流程，优惠活动，促销活动等信...
HTML5基本标签使用header，nav和footer
张晨光老师的播客
05-06 5695
大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分，如下： #nav{ padding: 10px ... } #header{ padding: 10px ... } #footer{ padding: 10px ... } 定义完之后呢，...
nav布局 在线演示 DIVCSS5
weixin_30718391的博客
07-12 151
<!doctype html> nav布局 在线演示 DIVCSS5 传统 div ul li布局导航条效果 网站首页 HTML教程 HTML入门 HTML5教程 CSS教程 CSS入门 html5 nav ul li布局导航条没有对nav加id和class 同时设置nav li a超链接文字字体颜色为红色字和红色框效果 网站首页 HTML...
html+css实战132-logo和nav布局
qq_41632427的博客
06-27 143
html
css边框border(含代码,易懂)
m0_74577714的博客
09-14 6977
css中边框属性方法
CSS border边框（理解网页边框制作）
最新发布
百赢出品，必属精品
04-25 6066
边框是围绕在元素周围的一条线，可以设置边框的宽度、样式和颜色，用于装饰和分隔元素。border-width（边框宽度）：用于设置边框的宽度，可以是像素、百分比或预定义值（thin、medium、thick）。border-style（边框样式）：指定边框的样式，常见的样式包括 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。border-color（边框颜色）：设置边框的颜色，可以是具体的颜色值、RGB值、十六进制值等。border（边框简写属性）
利用css样式画各种图形--初步、进阶、高级（一）
weixin_33754065的博客
02-17 458
 转文请注明：穆乙 http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html 利用css画图形，是个有利有弊的写法，好处是不用画图，且节省了一些流量，坏处是要写长串的css样式，而且有可能流量并没有减少，用与否视情况而定，个人选择。 下面是我做测试的一些图形，也是参考了一些网站，简单的注解一下和归纳了一下，其中并没涉及到复...
CSS纯样式实现导航栏Tab切换教程
在本文中，我们将探讨如何利用CSS的高级特性，尤其是:target伪类选择器，来实现纯CSS驱动的导航栏Tab切换效果，通常这类功能在JavaScript的帮助下较为常见。CSS3的:target伪类允许我们根据用户点击的行为动态改变...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值