首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

基于html和CSS3制作酷炫的导航栏

Posted in HTML / CSS onSeptember 23, 2015

 主要亮点:

  1 ul 水平显示

  2 li 去掉圆点

  3 li中字体水平、竖直居中

  4 li控制边框样式

  5 使用html + css3 渐变画图 制作背景图片

  6 更改颜色透明度

  7 DIV制作边框阴影

先看效果图:

基于html和CSS3制作酷炫的导航栏

 

基于html和CSS3制作酷炫的导航栏

基于html和CSS3制作酷炫的导航栏

CSS Code复制内容到剪贴板
  1. <!doctype html>     
  2. html lang="en">     
  3. <head>     
  4.  <meta charset="UTF-8"> <!----编码----->     
  5.  <meta name="Generator" content="EditPlus®">     
  6.  <meta name="Author" content="黄涛">     
  7.  <meta name="Keywords" content="关键字，搜索引擎">     
  8.  <meta name="Description" content="描述语言">     
  9.  <title>案例</title>     
  10.    <style type="text/css">     
  11.        *{ margin:0;padding:0; }     
  12.        body{background:url("images/bg_title.jpg") repeat-x,url("images/bg.jpg");}     
  13.        #Logo{     
  14.            width:895px;height:45px;     
  15.            /*margin:上下 左右*/     
  16.            margin:50px auto;     
  17.            border-radius:10px;     
  18.            /*html + css3 渐变画图 */     
  19.                background-image:-webkit-linear-gradient(rgba(41,41,41,0.75) 0% ,rgba(54,54,54,0.72) 50%,rgba(24,23,23,0.94) 51%);     
  20.            box-shadow:1px 1px 33px #fff;/*设计阴影的*/     
  21.        }     
  22.        #Logo ul li     
  23.        {     
  24.            width:127px; height:45px;     
  25.            list-style:none;/*去掉圆点*/     
  26.            float:left;/*水平显示*/     
  27.            color:white;/* #fff */     
  28.            font-size:18px;     
  29.            font-family:"微软雅黑";     
  30.            text-align:center;     
  31.            line-height:45px;/* 行高跟 高度一致时，竖直居中*/     
  32.            border-right:1px solid #000;/*右边框*/     
  33.        }     
  34.        #Logo ul li a     
  35.        {     
  36.            color:white;/* #fff */     
  37.            font-size:18px;     
  38.            font-family:"微软雅黑";     
  39.            text-decoration:none;     
  40.        }     
  41.        #Logo ul li:hover     
  42.        {     
  43.            background:rgba(10,5,5,0.45);     
  44.        }     
  45.        #Logo ul li.first:hover     
  46.        {     
  47.            border-radius:10px 0px 0px 10px;/*左上 左下 圆弧显示 */     
  48.        }     
  49.        #Logo ul li.last:hover     
  50.        {     
  51.            border-radius:0px 10px 10px 0px;/*右上 右下 圆弧显示 */     
  52.        }     
  53.        #Logo ul li ul li      
  54.        {     
  55.            border:none;     
  56.            border-top:1px solid #989898;     
  57.            background:rgba(10,5,5,0.45);/*颜色透明度 */     
  58.            border-radius:10px;     
  59.        }     
  60.        #Logo ul li ul     
  61.        {     
  62.            display:none;/*不显示*/     
  63.        }     
  64.        #Logo ul li ul li:hover     
  65.        {     
  66.            background:rgba(10,5,5,0.8);/*颜色透明度 */     
  67.            border-radius:10px;     
  68.        }     
  69.        #Logo ul li:hover ul     
  70.        {     
  71.            display:block;     
  72.            -webkit-animation:roll 1s ease;/*roll 旋转名称，1s旋转效果 */     
  73.        }     
  74.        @-webkit-keyframes roll /*roll旋转名称与上面一致*/     
  75.        {     
  76.            0% {-webkit-transform:rotate(0deg);}     
  77.            100% {-webkit-transform:rotate(360deg);}     
  78.        }     
  79.    </style>     
  80. </head>     
  81. <body>     
  82.    <div id="Logo">     
  83.        <ul>     
  84.            <li class="first">      
  85.                <a href="#">网址<a>     
  86.                <ul>     
  87.                    <li>     
  88.                        <a href="http://www.baidu.com">百度</a>     
  89.                    </li>     
  90.                    <li>     
  91.                        <a href="http://www.sina.com">新浪</a>     
  92.                    </li>     
  93.                </ul>     
  94.            </li>     
  95.            <li>      
  96.                <a href="#">新闻<a>     
  97.            </li>     
  98.            <li>      
  99.                <a href="#">视频<a>     
  100.            </li>     
  101.            <li>      
  102.                <a href="#">音乐<a>     
  103.            </li>     
  104.            <li>      
  105.                <a href="#">地图<a>     
  106.            </li>     
  107.            <li>      
  108.                <a href="#">问问<a>     
  109.            </li>     
  110.            <li class="last" style="border:none;">      
  111.                <a href="#">关于<a>     
  112.            </li>     
  113.        </ul>     
  114.    </div>     
  115. </body>     
  116. /html>  

代码超简单，希望对大家学习制作html和css3制作超酷导航栏有所帮助。

基于html和CSS3制作酷炫的导航栏

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 #HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 #HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 #HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 #HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 #HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 #HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 #HTML / CSS
celery(1) Outlook(1) OOP(1) Windows server 2003(1) SeaTable(1) MutationObserver(1) Mysql8(2) 黑屏(2) minio(1) appdata(1)
You might like
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
[13:21]DOTA2国际邀请赛采访专栏：RSnake战队国士无双，Fnatic.Fly
2013/08/06 DOTA
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现的视频播放器功能完整示例
2018/02/01 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
flask实现验证码并验证功能
2019/12/05 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
美国最大的旗帜经销商：Carrot-Top
2018/02/26 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
市场营销战略计划书
2014/05/06 职场文书
爱护公物标语
2014/06/24 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
三国演义读书笔记
2015/06/25 职场文书
mysql数据库隔离级别详解
2022/06/16 MySQL