DIV+CSS商业案例与网页布局精讲读书笔记（6-1）

本文链接：https://blog.csdn.net/lilaisi/article/details/7051602

制作站点导航栏

本节主要是理解CSS属性float.

1. 站点导航栏的分类（总体目的是讲究实用性、美观性、以及网站的特色）

根据性质：框架导航栏、文本导航栏、图片导航栏

根据位置：横排导航栏、竖排导航栏

2 CSS的浮动属性float

理解float属性，我们则需要先理解CSS网页布局理：就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它。什么是流布局也就是将窗体自上而下分红一行一行，并在每行中按从左至右的程序排放HTML元素，每个非浮动块级元素都独占一行。浮动元素则按规定浮在行的一端，若当前行容不下，则另起新行再浮动。浮动元素则按什么规定则是有float来指定了。

浮动属性

浮动属性	float
相关属性值	left, right,none

见书上的代码：

<!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=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" /> 
<title>float属性基础页面</title>
<style type="text/css">
body{
	margin:15px;						/*定义外边距*/
	font-size:16px;						/*定义字体大小*/
}
.block{
	background-color:#e8e8b9;			/*定义背景颜色*/
	border:1px solid #111111;				/*定义边框*/
	padding:10px;						/*定义内边距*/
	width:500px /*定义宽度*/
}
.block_in_1{
	padding:10px;						/*定义内边距*/
	margin:15px;						/*定义外边距*/
	border:1px dashed #ffff99;			/*定义边框*/
	background-color:#145897;			/*定义背景颜色*/
}
.block_in_2{
	padding:10px;						/*定义内边距*/
	margin:15px;						/*定义外边距*/
	border:1px dashed #000000;			/*定义边框*/
	background-color:#FFFFFF;			/*定义背景颜色*/
}

</style>
</head>
<body>
	<div class="block">
		<div class="block_in_1">块一</div>
		<div class="block_in_2">块二</div>
	</div>
</body>
</html>

在没有指定float属性时，也没指定块一、块二宽度时是正常显示，指其各站一行。

(1)当对块一指定float属性左或右而块二没有指定flaot属性时，

float:left;或float:right

则块一漂浮到外层块的左或右（由于margin(外边框)一样的，相当于漂浮到块二的左或右且包含在块二中，在这注意在DREAMWARER8中的设计中，看到的是块一完全包含在块二中，而运行时块一与块二由于外层块padding(内边框)=10px，故有上下错位的现象，在这里而书上说是由于块二设置了padding为10像素的原因是错误的。而错位的大小还取决于层块的padding,和块1块2的Margin大小）。