使用div+css制作简单导航 以及要注意问题
<!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=gb2312" /> <style type="text/css"> #headNav {
width:960px;
height:30px;
line-height:30px;
background-color: lightblue;
margin:0 auto;
} #headNav ul {
list-style:none;
} #headNav ul li {
float:left;
height: 30px;
line-height: 30px;
padding:0 10px;
} #headNav ul li:hover {
background-color: white;
} a {
color:red;
text-decoration:none;
} a:hover { }
</style> </head>
<body>
<div id="headNav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页版式布局</a></li>
<li><a href="#">div+css教程</a></li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>
注意:
①第12行即导航的div要设置其高度
使用div+css制作简单导航 以及要注意问题的更多相关文章
- DIV+CSS制作二级横向弹出菜单,略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...
- CSS3学习-用CSS制作立体导航栏
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
- Div+Css制作圆
Div+Css制作四分之一圆主要是使用Css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新…… 如何使用border- ...
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
- 如何使用纯CSS制作特效导航条?
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
随机推荐
- HTML5吧!少年
一.为了能使IE9以下的IE浏览器也能支持html5的标签,所以首先得在文档头部用条件注释的方法引入那段著名的代码. 1 2 3 <!--[if lt IE 9]> <script ...
- JS学习笔记——标准对象
一.对象 在js中万物皆对象. 二.对象类型 number.string.boolean.undefined.function.object等 用typeof来获取对象的类型 如: alert( ty ...
- JDBC入门连接MySQL查数据
在MySQL中建立user表,插入数据 create table user( id int, name varchar(10), age int )engine myisam charset utf8 ...
- 20160509-hibernate-集合映射
集合映射 集合映射(set, list, array,bag, map) <set name=”employees” > <key column=”depart_id”/> & ...
- Android Drawable系列(1):自定义背景以及注意事项
0. Shape自身属性 android:shape=["rectangle" | "oval" | "line" | "ring ...
- Android颜色大全
<?xml version="1.0" encoding="utf-8"?> <resources> <color name=&q ...
- Sql Server Profiler保存与重演跟踪
重演跟踪的作用 可以将一个跟踪当做测试工具,当按照正确的顺序调用某些存储过程是肯能会重新生成特定的故障. 跟踪模板
- CSS3滤镜!!!
<!DOCTYPE html> <html> <head> <style> img { width: 33%; height: auto; float: ...
- SQLite cans and can'ts
SQLite 能做的 和 不能做的 1.SQLite_open/SQLite_open_v2
- SQL查询:『索引失效问题』
1.IN操作符 用IN操作符写出来的SQL直观简单.易于理解.但是在where条件中使用IN操作符是低效的.例如下面这条查询语句: SELECT * FROM tab_a WHERE id IN( S ...