>> 欢迎您 客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章 返回首页
>>分享Web前端开发技术，并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → CSS 导航栏
发表一个新主题 开启一个新投票 回复文章 您是本文章第 21070 个阅读者 刷新本主题
 * 贴子主题:  CSS 导航栏 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间：2019-08-11 15:50:23     消息  查看  搜索  好友  邮件  复制  引用
  

CSS 导航栏

ul.horizontal {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: #333;

}

        ul.horizontal li {

    float: left;

   padding: 0;

   margin: 0;

   background-image:none;

}

        ul.horizontal li a {

    display: inline-block;

    color: white;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

}

        ul.horizontal li a:hover:not(.active) {

    background-color: #000;

}

        ul.horizontal li a.active {

    background-color:#4CAF50;

}

        ul.horizontal2 {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    border: 1px solid #e7e7e7;

    background-color: #f3f3f3;

}

        ul.horizontal2 li {

    float: left;

}

        ul.horizontal2 li a {

    display: inline-block;

    color: #666;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

}

        ul.horizontal2 li a:hover:not(.active) {

    background-color: #ddd;

}

        ul.horizontal2 a.active {

    color: white;

    background-color: #4CAF50;

}

.width94 {

width:94%;

}

@media screen and (max-width: 600px) {

    .width94 {

       width:100%;

    }

}

        ul.vertical {

    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 200px;

    background-color: #f1f1f1;

}

ul.vertical li{

  padding: 0;

   margin: 0;

   background-image:none;

}

ul.vertical li a {

    display: block;

    color: #000;

    padding: 8px 0 8px 16px;

    text-decoration: none;

}

        ul.vertical li a:hover:not(.active) {

    background-color: #555;

    color:white;

}

        ul.vertical a.active {

    background-color: #4CAF50;

    color:white;

}

        ul.gray {

border: 1px solid #e7e7e7;

    background-color: #f3f3f3;

}

        ul.gray li a {

    display: block;

    color: #666;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

}

        ul.gray li a:hover:not(.active) {

    background-color: #ddd;

}

        ul.gray li a.active {

    color: white;

    background-color: #008CBA;

}

.rightli {

float:right;

}

        @media screen and (max-width: 408px) {

    .rightli {

       display:none;

    }

}

        ul.ex {

width:90%;

}

@media screen and (max-width: 600px) {

    ul.ex {

       width:100%;

    }

}

        ul.divider li {

    float: left;

    border-right:1px solid #bbb;

}

        ul.divider li:last-child {

    border-right: none;

}

ul.border {

    border: 1px solid #555;

}

        ul.border li a {

    padding: 8px 16px;

}

        ul.border li {

    text-align: center;

    border-bottom: 1px solid #555;

}

        ul.border li:last-child {

    border-bottom: none;

}

垂直

  • 主页
  • 新闻
  • 联系
  • 关于

水平

  • [url=javascript:void(0)]主页
  • [url=javascript:void(0)]新闻
  • [url=javascript:void(0)]联系
  • [url=javascript:void(0)]关于
  • [url=javascript:void(0)]主页
  • [url=javascript:void(0)]新闻
  • [url=javascript:void(0)]联系
  • [url=javascript:void(0)]关于

导航栏

     熟练使用导航栏，对于任何网站都非常重要。

     使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。            

导航栏=链接列表

     作为标准的HTML基础一个导航栏是必须的。
     在我们的例子中我们将建立一个标准的HTML列表导航栏。

    导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：                                    

范例

< ul >
   < li > < a   href = " #home " > 主页 </ a > </ li >
   < li > < a   href = " #news " > 新闻 </ a > </ li >
   < li > < a   href = " #contact " > 联系 </ a > </ li >
   < li > < a   href = " #about " > 关于 </ a > </ li >
</ ul >

                现在，让我们从列表中删除边距和填充：                                    

范例

ul   {
     list-style-type:   none  ;
     margin:   0  ;
     padding:   0  ;
}

               例子解析：    
  • list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
  • 移除浏览器的默认设置将边距和填充设置为0
     上面的例子中的代码是垂直和水平导航栏使用的标准代码。            

垂直导航栏

     上面的代码，我们只需要 <a>元素的样式，建立一个垂直的导航栏：                    

范例

a
{
     display: block  ;
     width: 60 px  ;
}

   示例说明：    
  • display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
  • width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
     注意： 请务必指定 <a>元素在垂直导航栏的的宽度。如果省略宽度，IE6可能产生意想不到的效果。            

垂直导航条范例

     创建一个简单的垂直导航条范例，在鼠标移动到选项时，修改背景颜色：    
  • [url=javascript:void(0)]主页
  • [url=javascript:void(0)]新闻
  • [url=javascript:void(0)]联系
  • [url=javascript:void(0)]关于

范例

ul   {
     list-style-type:   none  ;
     margin:   0  ;
     padding:   0  ;
     width:   200 px  ;
     background-color:   #f1f1f1  ;
}

li   a   {
     display:   block  ;
     color:   #000  ;
     padding:   8 px   16 px  ;
     text-decoration:   none  ;
}

/*  鼠标移动到选项上修改背景颜色  */
li   a :hover   {
     background-color:   #555  ;
     color:   white  ;
}

激活/当前导航条范例

     在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中：    
  • [url=javascript:void(0)]主页
  • [url=javascript:void(0)]新闻
  • [url=javascript:void(0)]联系
  • [url=javascript:void(0)]关于

范例

.active   {
     background-color:   #4CAF50  ;
     color:   white  ;
}

创建链接并添加边框

     可以在  <li> or <a> 上添加text-align:center 样式来让链接居中。

     可以在 border  <ul> 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个 <li> 元素上添加border-bottom :                    

范例

ul   {
     border:   1 px   solid   #555  ;
}

li   {
     text-align:   center  ;
     border-bottom:   1 px   solid   #555  ;
}

li :last-child   {
     border-bottom:   none  ;
}

全屏高度的固定导航条

     接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。                    

范例

ul   {
     list-style-type:   none  ;
     margin:   0  ;
     padding:   0  ;
     width:   25 %  ;
     background-color:   #f1f1f1  ;
     height:   100 %  ;  /*  全屏高度  */
     position:   fixed  ;
     overflow:   auto  ;  /*  如果导航栏选项多，允许滚动  */
}

     注意: 该范例可以在移动设备上使用。                      

水平导航栏

     有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。

     这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。    

内联列表项

     建立一个横向导航栏的方法之一是指定元素， 上述代码是标准的内联:                    

范例

li
{
     display: inline  ;
}

                范例解析：    
  • display:inline; -默认情况下，<li>元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。

浮动列表项

     在上面的例子中链接有不同的宽度。

     对于所有的链接宽度相等，浮动 <li>元素，并指定为 <a>元素的宽度：                    

范例

  li
{
     float: left  ;
}
a
{
     display: block  ;
     width: 60 px  ;
}

    范例解析：    
  • float:left - 使用浮动块元素的幻灯片彼此相邻
  • display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
  • width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

水平导航条范例

     创建一个水平导航条，在鼠标移动到选项后修改背景颜色。            

范例

ul   {
     list-style-type:   none  ;
     margin:   0  ;
     padding:   0  ;
     overflow:   hidden  ;
     background-color:   #333  ;
}

li   {
     float:   left  ;
}

li   a   {
     display:   block  ;
     color:   white  ;
     text-align:   center  ;
     padding:   14 px   16 px  ;
     text-decoration:   none  ;
}

/* 鼠标移动到选项上修改背景颜色  */
li   a :hover   {
     background-color:   #111  ;
}

激活/当前导航条范例

     在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中：                    

范例

.active   {
     background-color:   #4CAF50  ;
}

链接右对齐

     将导航条最右边的选项设置右对齐 (float:right;)：                    

范例

< ul >
   < li > < a   href = " #home " > 主页 </ a > </ li >
   < li > < a   href = " #news " > 新闻 </ a > </ li >
   < li > < a   href = " #contact " > 联系 </ a > </ li >
   < li   style = " float:right " > < a   class = " active "   href = " #about " > 关于 </ a > </ li >
</ ul >

添加分割线

     <li> 通过 border-right  样式来添加分割线:                    

范例

  /*  除了最后一个选项(last-child) 其他的都添加分割线  */
li   {
     border-right:   1 px   solid   #bbb  ;
}

li :last-child   {
     border-right:   none  ;
}

固定导航条

     可以设置页面的导航条固定在头部或者底部：                    

固定在头部

ul   {
     position:   fixed  ;
     top:   0  ;
     width:   100 %  ;
}

固定在底部

ul   {
     position:   fixed  ;
     bottom:   0  ;
     width:   100 %  ;
}

                 注意: 该范例可以在移动设备上使用。              

灰色水平导航条

固定在底部

ul   {
     border:   1 px   solid   #e7e7e7  ;
     background-color:   #f3f3f3  ;
}

li   a   {
     color:   #666  ;
}

           程序猿的技术大观园：www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-29 10:06:35 重新编辑]
Java精品书籍推荐
Java最新视频教程推荐
  Java面向对象编程-->Java语言中的修饰符
  JavaWeb开发-->Servlet技术详解（Ⅰ）
  JSP与Hibernate开发-->Java对象持久化技术概述
  Java网络编程-->ServerSocket用法详解
  精通Spring-->组合（Composition）API
  Vue3开发-->组合（Composition）API
本站其他相关文章
  彻底明白VUE中的done参数和函数作用
  Velocity.js动画库的使用
  CSS3的@keyframes用法详解
  Vue自定义数据验证指令
  前端面试题及答案汇总
  前端图片压缩库images-quickly-compress
  js导出json文件
  CSS 属性选择器
  HTML支持的多媒体(Media)
  HTML5 语义元素
  JavaScript 测试 jQuery
  JavaScript 的代码规范
  JavaScript的比较和逻辑运算符
  JavaScript 函数 的定义和使用
  Android 广播接收器(Broadcast Receivers)
  更多...
 IPIP: 已设置保密
楼主      
共1页 1条记录 当前第1页
发表一个新主题 开启一个新投票 回复文章

中文版权所有： JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶，分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权，请与本站管理员联系。