在网上看到很多做的非常漂亮的menu,感觉非常不错,今天就在这儿学做一个menu。
其效果如图1所示:(源代码在最下方,可以下载)
图 1
并且,该菜单仅仅用到了html和CSS,以下是其源码:
html源码:(很简单,不解释)
<!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> </head> <link rel="stylesheet" type="text/css" href="style.css" /> <body> <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphic design</a></li> <li><a href="#">Development tools</a></li> <li><a href="#">WEb design</a></li> </ul> </li> <li><a href="#">Work</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html>
html的代码如上所示。
CSS的代码如下所示:
@charset "utf-8"; /* CSS Document */ /* Main */ #menu{ /*通过ID,寻找ID为menu的DOM*/ width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #111; background: -moz-linear-gradient(#444, #111); /*【注释】1:线性渐变在Mozilla下的应用(即,采用Mozilla内核的浏览器,例如:Firefox、Flock等浏览器),本句话是指:采用线性渐变方式,起点颜色是#444,终点颜色是#111*/ /*【注释】2:线性渐变在Mozilla下的语法为: --moz-linear-gradient([<point>||<angle>,]?<stop>,<stop> [,<stop>]*) 共有三个参数:第一个代表线性渐变的方向,top是从上到下,left为从左至右,如果定义为left top,则代表从左上角至右下角。 第二个、第三个参数分别代表起点颜色和终点颜色。也可以在他们之间插入更多的颜色,表示多种颜色的渐变。 */ background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); /*【注释】和上句话相同,只不过是指:线性渐变在Webkit下的应用(采用webkit内核的浏览器,例如safari、google浏览器)*/ /*【注释】:不过google在最新版本28.0.1469.0中已经将Webkit内核替换为Blink内科,不过Blink内核也是基于webkit内核引擎开发所得 时间:2013年4月15日19:09:11 */ /*【注释】:CSS说明: -webkit-gradient(<type>,<point> [,<radius>]?,<point> [,<radius>]? [,<stop>]*) -webkit-gradient是webkit引擎对渐变实现的参数,是老式语法书写规则,最新式的语法书写规则是下面的-webkit-linear-gradient。 其共有5个参数: 第一个参数:代表类型,可以是线性渐变(linear)或径向渐变(radial) 第二个参数、第三个参数:是一对值,非别代表渐变起点和渐变终点。可以用坐标形式标识,也可以用关键值表示。 第四、五个参数:分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为终点。第二个表示该点的颜色。 */ background: -webkit-linear-gradient(#444, #111); /*【注释】:这个不进行详细的介绍,和-moz-linear-gradient一样 语法形式: -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) */ background: -o-linear-gradient(#444, #111); /*【注释】:不解释,同上。只不过是在Opera引擎下的应用。 语法形式: -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]) */ background: -ms-linear-gradient(#444, #111); /*【注释】同上,是针对微软的IE9及以上浏览器*/ background: linear-gradient(#444, #111); /*【注释】同上,这是无前缀的渐变,IE10也支持无前缀的渐变 参考文献:msdn上的文章: 题名:IE10 中的无前缀 CSS3 渐变 网址:http://blogs.msdn.com/b/ie_cn/archive/2012/06/27/css-gradients-in-ie10-release-preview.aspx */ -moz-border-radius: 50px; border-radius: 50px; /*【注释】:上面两个是将正方形的四个直角进行切割,变得圆滑*/ -moz-box-shadow: 0 2px 1px #9c9c9c; -webkit-box-shadow: 0 2px 1px #9c9c9c; box-shadow: 0 2px 1px #9c9c9c; /*【注释】:上面的三个实现了对象实现图层阴影效果 具体的语法为: box-shadow:inset x-offset y-offset blur-radius spread-radius color 其中:第一个参数(inset):此处可有可无,即inset可以删掉。没有inset是指,投影在对象的外部,也是我们常见的,为默认值;若为inset,则,投影在对象的内部。 第二个参数:水平方向的偏移量。其值可正可负,若为正,代表投影在对象右侧;为负,在左侧; 第三个参数:垂直方向的偏移量。其值可正可负,若为正,代表投影在对象底侧;为负,在顶侧; 第四个参数:阴影模糊半径。其值只能为>=0,值越大,阴影越模糊。 第五个参数:阴影扩展半径。其值可正可负,值越大,阴影越大 第六个参数:阴影颜色。如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。 各个浏览器对box-shadow的支持度: IE9及以上、google浏览器2.0及以上、firefox3.5及以上,opera10.6及以上、safari4 */ } #menu li{ float: left; padding: 0 0 10px 0; position: relative; } #menu a{ float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; /*【注释】:呵呵,先说一个题外话:transformers是"变形金刚"电影的英文名称 言归正传: text-transform -- 定义文本的大小写状态,此属性对中文无意义 其取值有5种: capitalize: 首字母大写 uppercase: 大写 lowercase: 小写 none: 正常无变化 inherit: 继承 */ font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a{ color: #fafafa; } *html #menu li a:hover{ /* IE6 */ color: #fafafa; } #menu li:hover > ul{ display: block; } /* Sub-menu */ #menu ul{ list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 5px; border-radius: 5px; } #menu ul li{ float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; } #menu ul li:last-child{ -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a{ padding: 10px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } *html #menu ul a{ /* IE6 */ height: 10px; width: 150px; } *:first-child+html #menu ul a{ /* IE7 */ height: 10px; width: 150px; } #menu ul a:hover{ background: #0186ba; background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child a{ -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } #menu ul li:first-child a:hover:after{ border-bottom-color: #04acec; } #menu ul li:last-child a{ -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Clear floated elements */ #menu:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html #menu { zoom: 1; } /* IE6 */ *:first-child+html #menu { zoom: 1; } /* IE7 */
相关推荐
我都是拿别人的模板,模仿者编写DIV布局,以及CSS样式。一般而言,我都是用ID来标整个页面的布局结构,然后里面的内容用CSS类来设置样式。 比如我布局可以这么写,然后我可以写一些小工具(也可以这么想,反正就是一...
3.jQuery+CSS实用图片收缩与放大效果插件 4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿...
某互联网公司开发官网的首页,为了适配移动端,决定菜单采用底部固定形式。...项目名称为menu,包含首页index.html、css文件夹、js文件夹,其中,css文件夹包含style.css文件;js文件夹包含jquery.min.js 和index.js。
不仅性能低下而且代码很脆弱,html代码和css代码严重耦合,html代码结构发生变化时,CSS也得修改,这是多么糟糕,特别是在大公司里,写html和css的往往不是同一个人。 CSS Code复制内容到剪贴板 // 烂透了 html...
改进版本优化了这个问题,通过简单的Javascript代码就可以增加菜单。同时使得HTML页面非常简洁,只需要...link type=”text/css” rel=”stylesheet” href=”menu.css”> </HEAD> <BODY> <div><scri
代码易读性好,html标签语言加JavaScript加Css编写,可直接关联后台数据使用。
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8、火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧。 运行效果截图如下: 在线演示地址如下: ...
用jsp编写的图片上传的功能 <%@ page contentType="text/html; charset=GBK" %> *,java.util.*,ljh.util.*,java.sql.*"%> String newFilename=DateUtil.getRandom(); FileUploadBean upload=new FileUploadBean()...
CSS 预处理器:使用像 Sass、Less 等 CSS 预处理器可以简化 CSS 编写过程,提高样式代码的可维护性,进而对动画效果的实现有所帮助。 综上所述,前端动画素材的技术实现方式多种多样,开发者可以根据项目需求和个人...
这个 Hugo 主题非常适合为小型组织...高性能 - 从头开始编写的 HTML/CSS/JS 尽可能快,无需依赖框架或库。多语言 - 支持多种语言的内容。Mega Menu - 带有下拉部分的大菜单。FAQ accordion - 带有手风琴结构的 FAQ 页面
该文档内容为H5自适应的个人简历模板,下载后修改HTML中的内容即可使用。
本文实例讲述了纯CSS...http://demo.jb51.net/js/2015/css-2level-mouse-over-show-menu-codes/ 具体代码如下: 复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://ww
基于MVC的.java.web设计与开发.pdf │ 学习Struts提供的和Form相关标签.txt │ 日企编码规范.doc │ 电信盈科面试题.pdf │ 速算.txt │ 面试题URL.txt │ ├─Javascript │ │ javascript资料(源码,教材,ppt)....
尝试了解index.html中的结构,并考虑如何以良好的顺序编写CSS homework5:计算器 学习基本JavaScript,然后使用它们来实现简单计算器。 homework6:游戏 homework7:十五难题 homework8:表分类器 给TA,11.06...
开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。 jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,...
开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。 jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,tree...
第3章 html文档的编写规范 3.1 使用标签、元素和属性 3.1.1 标签 3.1.2 元素 3.1.3 属性的定义 3.1.4 属性值的定义 3.1.5 元素和属性的大小写规范 3.2 字符引用 3.2.1 字符数字引用 3.2.2 字符实体引用 3.3 使用注释...
开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,...