用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 ...
随机推荐
- Android Blur效果之FastBlur
Blur 自从iOS系统引入了Blur效果,也就是所谓的毛玻璃.模糊化效果,磨砂效果,各大系统就開始竞相模仿,这是一个怎样的效果呢,我们现来看一些图: 这些就是典型的Blur效果,在iOS和MIUI中 ...
- 使用C#对MongoDB中的数据进行查询,改动等操作
首先,使用的是官方提供的C#訪问组件https://github.com/mongodb/mongo-csharp-driver 然后.编译后引用MongoDB.Bson.dll及MongoDB.Dr ...
- GridView事件分析
GridView事件分析 (转) P1默认数据绑定过程 编号 事件名称 作用 E1 DataBinding 数据绑定之前触发,在这个事件之前(第一次生成GridView),GridView不存在行数据 ...
- IOS中的自动布局
Autolayout是一种“自动布局”技术,专门用来布局UI界面 Autolayout能很轻松地解决屏幕适配问题 Autolayout的两条核心概念: >1 参照:通过参照其他控件或父控件来 ...
- javascript 横向下拉菜单演示
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><me ...
- ODBC、OLE DB、 ADO、ODAC、ODP.NET
面对各式各样.越来越多的数据来源和访问需求.软件开发框架中一般都提供了统一的访问接口和方法,来屏蔽数据库底层差异. 各式各样的Provider提供者. ODBC(Open Database Conne ...
- 设计模式总结1--observer pattern
<!-- 设计模式 --><!--是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代 码可靠性 --&g ...
- Java学习之链表
数据结构学了,java实现下 package com.gh.Link; /** * 链表的实现 * @author ganhang * */ public class Links { public s ...
- 本地机apache配置基于域名的虚拟主机详解
1.打开apache的httpd.conf文件,找到# Virtual hosts#Include conf/extra/httpd-vhosts.conf这一段把Include conf/extra ...
- Apache Common StringUtils工具类
1.List转换成字符串并加入分隔符 public String listToString(List list, char separator) { return org.apache.commons ...