基于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 实现弹跳的小球动画
Oct 26 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 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
编写PHP的安全策略
2006/10/09 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
python pdb调试方法分享
2014/01/21 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
Python运行异常管理解决方案
2020/03/09 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
HTML5 Canvas概述
2009/08/26 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
实习生单位鉴定意见
2013/12/04 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
中标通知书
2015/04/17 职场文书
运动会5000米加油稿
2015/07/21 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
实验心得体会范文
2016/01/25 职场文书