用css实现列表菜单的效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <style type="text/css"> a:hover{ background:blue; background-repeat:no-repeat;} <!--鼠标放在链接上变颜色--> div.header { text-decoration:none; color:white; background-color:gray; clear:left; ;<!--去掉链接下划线--> } h1.header {text-decoration:none;<!--去掉链接下划线--> padding:8px; ; ;<!--去掉链接下划线--> } a{text-decoration:none;} </style> </head> <body> <!--加载链接--> <div class="header"><h1 class="header"><a href="/index.html">首页</a> <a href="/index.html"> 学习论坛</a> <a href="/index.html">学员问答</a><a href="/index.html"> IT圈子</a><a href="/index.html"> 实时课堂</a><a href="/index.html"> 客户端下载</a><a href="/index.html"> 帮助</a></h1> </div> <div id="menu"> <ul> <li><a href="#">首 页</a></li> <li><a href="#">学习论坛</a></li> <li><a href="#">学员问答</a></li> <li><a href="#">IT圈子</a></li> <li><a href="#">实时课堂</a></li> <li><a href="#">客户端下载</a></li> <li><a href="#">帮助中心</a></li> </ul> </div> </body> </html>
用css实现列表菜单的效果的更多相关文章
- 纯css,编写菜单移入效果
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- css 导航,菜单对应页面切换效果实现方法
实现原理: 每个菜单有多个li标签,每个li标签含一个id,li标签的id用来标记:点击效果 每个页面有一个id,这个id的作用是对应每个li标签的点击链接对应的页面,它的作用是用来标记:li标签的h ...
- 个人练习:使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...
- [转载] ul li css 做横向菜单
原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...
- web中用纯CSS实现筛选菜单
web中用纯CSS实现筛选菜单 本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果,例子虽然没有淘宝那样强大,不过原理差不多,如果花点心思也可以实现和淘宝一样的. 内容过滤是一个在Web上常见的一个 ...
- CSS:CSS 下拉菜单
ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...
- CSS 自适应导航菜单
文章目录 以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成.该菜单可以左对齐,居中或右对齐,也不像上一种方 ...
- 超简洁的CSS下拉菜单
效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...
- iOS开发——UI篇&下拉弹出列表选择项效果
下拉弹出列表选择项效果 右边菜单中的按键,点击弹出一个列表可选择,选择其中一个,响应相应的事件并把文字显示在右边的菜单上:弹出下拉效果使用LMDropdownView插件,可以用POD进行加载pod ...
随机推荐
- 20140603 对error.c 用于分析源代码
20140603 对error.c 用于分析源代码 继续看error.c该功能 买家现在将自己的代码和数据汇编例如,下面的: 1.#include <stdio.h> 2 #inc ...
- js设置奇偶行数样式
$(document).ready(function () { odd = { "background": "none" }; //奇数样式 even = { ...
- Js用正则表达式验证字符串
js 常用正则表达式表单验证代码 作者: 字体:[增加 减小] 类型:转载 js 常用正则表达式表单验证代码,以后大家就可以直接使用了. 正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模 ...
- JavaScript中的字符串
JavaScript字符串是JavaScript最重要的部分,可能比任何其他的数据类型都更多的用到. 所有的JavaScript对象共享的方法之一就是toString(). 字符串对象叫做String ...
- Collection类学习笔记
binarySearch原理: public static index halfSearch(List<String> list, String key) { int max,min,mi ...
- setInterval(code, time)中code传递参数办法
1.使用setInterval的场景 有时我们需要隔一定的时间执行一个方法,这时就会用到setInterval,但是由于这个方法是浏览器模拟出的Timer线程,在调用我们方法时不能为其传递参数. 2. ...
- Resource is out of sync with the file system: 解决办法
在eclipse中,启动server时报此错,是因为文件系统不同步造成的,解决方法有两个: (1)选中工程,右键,选择F5(手动刷新): (2)Window->Preferences->G ...
- learn C on the mac 读后笔记
phper 学习c的一点笔记.参考资料 learn C on the mac 图书地址--http://pan.baidu.com/s/1eQBW2hO 源码地址--http://pan.baidu. ...
- javascript 检测密码强度 美化版
模仿美团的美化 <!DOCTYPE> <head runat="server"> <title></title> <link ...
- java.lang.ClassNotFoundException: javax.servlet.Filter
java.lang.ClassNotFoundException: javax.servlet.Filter:有两个原因:(1)在maven中的作用域,不能是provided,需要是compile就是 ...