div+css 学习笔记4

最新推荐文章于 2013-12-17 16:52:07 发布

Kang_Nian

最新推荐文章于 2013-12-17 16:52:07 发布

阅读量797

点赞数

分类专栏： Web开发文章标签： CSS web前端布局

本文链接：https://blog.csdn.net/kang_nian/article/details/17354113

版权

Web开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、纵向导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body 
{ 
	font-family: Verdana; 
	font-size: 12px; 
	line-height: 1.5; 
}
img 
{ 
	border-style: none; 
}
a 
{ 
	color: #000; 
	text-decoration: none; 
}
a:hover 
{ 
	color: #F00;
}
#menu 
{ 
	width: 100px; 
	border: 1px solid #CCC; 
	border-bottom:none;
}
#menu ul 
{ 
	list-style: none; 
	margin: 0px; padding: 0px; 
}
#menu ul li 
{ 
	background: #eee; 
	padding: 0px 8px; 
	height: 26px; 
	line-height: 26px; 
	border-bottom: 1px solid #CCC; 
	position:relative; 
}
#menu ul li ul 
{ 
	display:none; 
	position: absolute; 
	left: 100px; 
	top: 0px; 
	width:100px; 
	border:1px solid #ccc; 
	border-bottom:none; 
}
#menu ul li:hover ul 
{ 
	display:block;
}
</style>
</head>
<body>

<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页版式布局</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
</div>

</body>
</html>

2、知识点总结

1、大多数标签都有自己的默认样式，比如第二天课程中遇到的body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地把全局的样式给统一起来。另外页面中的图片添加链接后会默认添加个边框，ul默认情况下会在列表前添加圆点，这些都是需要去掉的。

body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }
ul { list-style: none; }
img { border-style: none; }

2、#menu ul和#menu ul li即为派生选择器，如果我们把前边的#menu去掉，那么将是对ul标签重定义，重定义的属性将应用到全局，而前边加上#menu后，将是定义ID为menu元素内ul的样式，设置它的样式只对#menu下的ul生效，不对它之后的ul生效，这个有点像编程中的局部变量，而直接定义ul则相当于全局变量。#menu ul li 是定义ID为menu元素内ul下的li，派生选择器可以使我们不用再给每个li定义一个样式名来定义样式，只需使用派生选择器，从它的父元素处选择即可，这样能大大提高效率。

3、可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的，p段落、div分区、span都是20像素字体。

h1,h2,h3,h4,h5,h6 {
color: green;
}
p,div,span{
font-size:20px;
}

4、相对定位和绝对定位
定位标签：position
包含属性：relative（相对） absolute（绝对）
（1）position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）
（2）position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）
（3）父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父容器左上角
（4）相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。

5、#menu ul li:hover ul这个样式比较难理解，它的意思是定义ID为menu下ul下li，当鼠标划过时ul的样式，这里设置为display:block，指的是鼠标划过时显示这块内容，这也实现我们今天想要的效果。其中的:hover和前边说的链接一样，同属于伪类

Kang_Nian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div+css 学习笔记4

1、纵向导航菜单Insert title herebody { font-family: Verdana; font-size: 12px; line-height: 1.5; }img { border-style: none; }a { color: #000; text-decoration: none; }a:hover {
复制链接

扫一扫