基于CSS3实现的黑色个性导航菜单效果


Posted in HTML / CSS onSeptember 14, 2015

本文实例讲述了基于CSS3实现的黑色个性导航菜单效果。分享给大家供大家参考。具体如下:

黑色个性的CSS3导航菜单,竖直排列的菜单,基本原理与横向的区别并不大,适合学习CSS。

运行效果截图如下:

基于CSS3实现的黑色个性导航菜单效果

在线演示地址如下:

具体代码如下:

复制代码
代码如下:

<!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=utf-8" />
<title>黑色菜单</title>
<style>
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}
body { background: #1d1d1d; color: #fff; background-image:url("images/bg.png"); background-repeat:repeat-x; }
h1 { font: bold 65px/60px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }
h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #ccc; }
h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif; text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }
h2 a:hover { color: #90bcd0; }
h3 { font-style:italic; border-left:10px solid #eee; padding:10px 20px; margin:30px 0; color:#eee; }
h3 code { display:block; }
/* WRAPPER */
#wrapper { width:800px; margin:40px auto; }
/* LIST #1 */
#list1 { }
#list1 ul { list-style:none; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; }
#list1 ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; }
#list1 ul li a { text-decoration:none; color:#eee; }
#list1 ul li a:hover { text-decoration:underline; }
/* LIST #2 */
#list2 { width:320px; }
#list2 ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1; }
#list2 ol li { }
#list2 ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#eee; border-left: 1px solid #999; }
#list2 ol li p em { display:block; }
/* LIST #3 */
#list3 { }
#list3 ul { list-style-image: url("images/arrow.png"); color:#eee; font-size:18px; }
#list3 ul li { line-height:30px; }
/* LIST #4 */
#list4 { width:320px; font-family:Georgia, Times, serif; font-size:15px; }
#list4 ul { list-style: none; }
#list4 ul li { }
#list4 ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px;
border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; }
#list4 ul li a:hover { color:#FFFFFF; background-image:url(images/hover.png); background-repeat:repeat-x; }
#list4 ul li a strong { margin-right:10px; }
/* LIST #5 */
#list5 { color:#eee; }
#list5 ol { font-size:18px; }
#list5 ol li { }
#list5 ol li ol { list-style-image: url("images/nested.png"); padding:5px 0 5px 18px; font-size:15px; }
#list5 ol li ol li { color:#bfe1f1; height:15px; margin-left:10px; }
/* LIST #6 */
#list6 { font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; }
#list6 ol { list-style-type: upper-roman; color:#eee; font-size:14px; list-style-position: inside; }
#list6 ol li { }
/* LIST #7 */
#list7 { }
#list7 ul { color:#eee; font-size:18px; font-family:Georgia, Times, serif; }
#list7 ul li { display: inline; }
#list7 ul li:after { content: ", "; }
#list7 ul li.last:after { content: ". "; }
/* LIST #8 */
#list8 { }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }
</style>
</head>
<body>
<div id="wrapper">
<h1>Styling your lists<small>using only CSS</small></h1>
<h2><a href="https://3water.com/" title="Visit More Codes">三水点靠木</a></h2>
<div id="list8">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>

希望本文所述对大家CSS3网页设计有所帮助。

HTML / CSS 相关文章推荐
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
CSS3中的content属性使用示例
Jul 20 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 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
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 #HTML / CSS
You might like
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
索趣科技的答案
2007/02/07 Javascript
看了就知道什么是JSON
2007/12/09 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
Python 求数组局部最大值的实例
2019/11/26 Python
Python表达式的优先级详解
2020/02/18 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
HTTP状态码详解
2021/03/18 杂记
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
行政经理岗位职责
2013/11/09 职场文书
个人银行贷款担保书
2014/04/01 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
文案策划岗位职责
2015/02/11 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
详解Python内置模块Collections
2022/03/22 Python