用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 ...
随机推荐
- js动态创建表格方法
window.onload = function(){ var table = document.createElement('table'); table.border = 1; table.wid ...
- [html5] canvas 绘图:八卦图
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...
- linux shell: 搜索字符串,剔除包含特定字符的行
搜索代码中出现CONFIG_BOOTARGS的行,但又不希望有#define和#undef, 暂时不知带如何直接用一个语句做到,因此用了如下三个语句. find . -type f | xargs g ...
- nvl与 is not null的区别等
Oracle中: Select Aae140 From Ab07 Where Aab001 = Pi_Aab001 And Aae002 = Pi_Aae002 ) 1 nvl(aaz288,0)&g ...
- 运行PHP
/usr/local/php/bin/php /home/www/index.php
- 快速配置SSH证书登录
环境: 在 CentOS 5/6/7.RHEL 5/6/7 和 Oracle Linux 6/7 上测试通过 使用 ssh-key-gen 命令生成公钥和私钥 用 ssh-copy-id 命令将公钥复 ...
- 转: seajs手册与文档之 -- 快速参考 ( ~~useful )
目录 快速参考 seajs.use seajs.config define require require.async exports module.exports 快速参考 该页面列举了 SeaJS ...
- jqGrid一些操作
formatter:function(cellvalue,options,rowObject){} 在格式化行的时候这三个参数 cellvalue行数, options配置信息, rowObject行 ...
- stackoverflow,stackexchange,zhihu,ilewen,segmentfault,answerhub,question2answer,,
http://stackexchange.com/ http://question2answer.org/ http://answerhub.com/qa/ http://segmentfault.c ...
- skin++ 终极破解之法
*[标题]:Skin++通用界面换肤系统V2.0.1破解探讨 *[作者]:gz1X <gz1x(at)tom(dot)com> *[来自]:中国黑客联盟 *[前言]: skin技术,大家都 ...