css+div网页设计（二）--布局与定位
在网页设计中，能否控制好各个模块中在页面中的位置是非常关键的，与传统的表格定位不同，css+div定位方式更加的灵活，本篇博客将为大家介绍css+div的布局与定位。
一.盒子模型
由图可以看出 盒子模型的范围包括 margin、border、padding、content。
需要指出的一点是，在ie中与firefox中盒子模型表示略有不同：
IE 盒子模型的 content 部分包含了 border 和 pading。
而firefox中的盒子模型的content部分不包含border和padding。
二、元素定位
1、float定位
float为浮动的意思，在css布局中有很重要的作用，这里举一个例子。
<span style="font-size:18px;"><html>
<head>
<title>float属性 clear</title>
<style type="text/css">
<!--
body{
margin:5px;
font-family:Arial;
font-size:13px;
}
.block1{
padding-left:10px;
margin-right:10px;
float:left; /* 块1向左浮动 */
}
h3{
background-color:#a5d1ff; /* 标题的背景色 */
border:1px dotted #222222; /* 标题边框 */
clear:left; /*清除float对左侧的影响 */
}
-->
</style>
</head>
<body>
<div class="block1"><img src="building2.jpg" border="0"></div>
<div>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本章从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。</div>
<h3>CSS的概念</h3>
<div>CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</div>
</body>
</html></span>
此时结果
如果将float:left注释掉结果如下：
2、position定位
a、position:static|无定位
position:static是所有元素定位的默认值, 一般不用注明，除非有需要取消继承的别的定位
<span style="font-size:18px;">#div-1 {
position:static;
}</span>
b、position:relative|相对定位
使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。
如果要让div-1层向下移动20px,左移40px:
<span style="font-size:18px;">#div-1 {
position:relative;
top:20px;
left:40px;
}</span>
c、position:absolute|绝对定位
使用绝对定位的层前面的或者后面的层会认为这个层并不存在，丝毫不影响到他们。
三、z-index定位：
z-index属性用于定位重叠时的上下位置。
<span style="font-size:18px;"><html>
<head>
<title>z-index属性</title>
<style type="text/css">
<!--
body{
margin:10px;
font-family:Arial;
font-size:13px;
}
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:20px;
top:30px;
z-index:1; /* 高低值1 */
}
#block2{
background-color:#ffc24c;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:40px;
top:50px;
z-index:0; /* 高低值0 */
}
#block3{
background-color:#c7ff9d;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:60px;
top:70px;
z-index:-1; /* 高低值-1 */
}
-->
</style>
</head>
<body>
<div id="block1">AAAAAAAA</div>
<div id="block2">BBBBBBBB</div>
<div id="block3">CCCCCCCC</div>
</body>
</html></span>
结果如下：
以上为css+div的布局与定位，下篇博客我将为大家介绍，css与javascript，css与jquery，css与ajax的混合运用。
css+div网页设计（二）--布局与定位的更多相关文章
- 精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
- 系列文章--精通CSS.DIV网页样式与布局学习
精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...
- 精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...
- css+div网页设计（一）--基础知识
css是网页制作不可缺少的部分,我会用三篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一 ...
- CSS+DIV网页样式与布局：第二章：CSS的基本语法
第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...
- 精通CSS+DIV网页样式与布局--页面和浏览器元素
在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...
- 精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
- 读CSS DIV网页样式与布局心得体会
一.首先根据网页设计图拆分网页的整体结构 二.在html页面用DIV划分出结构块 三.再根据设计图在各个大<DIV>块中加入对应的小<DIV>块或者段落<P>,表单 ...
- 精通CSS+DIV网页样式与布局--制作实用菜单
在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...
随机推荐
- MPMoviePlayerController 视频播放器—IOS开发
MPMoviePlayerController 与AVAudioPlayer有点类似,前者播放视频,后者播放音频,不过也有很大不同,MPMoviePlayerController 可以直接通过远程UR ...
- HDU 5444 Elven Postman （二叉树，暴力搜索）
题意:给出一颗二叉树的先序遍历,默认的中序遍历是1..2.……n.给出q个询问,询问从根节点出发到某个点的路径. 析:本来以为是要建树的,一想,原来不用,其实它给的数是按顺序给的,只要搜结点就行,从根 ...
- class DelegatingFilterProxy
/** * Proxy for a standard Servlet Filter, delegating to a Spring-managed bean that * implements the ...
- Unity3d:如何让程序在失去焦点时，继续运行，而不是暂停呢？
问题描述如题.解决方案: <ignore_js_op> <ignore_js_op>
- C# DataTable.Select() 筛选数据
有时候我们需要对数据表进行筛选,微软为我们封装了一个公共方法, DataTable.Select(),其用法如下: Select() Select(string filterExpression) S ...
- 5.迪米特法则（Law Of Demeter）
1.定义 狭义的迪米特法则定义:也叫最少知识原则(LKP,Least Knowledge Principle).如果两个类不必彼此直接通信,那么这两个类就不应当发生直接的相互作用.如果其中的一个类需要 ...
- 如何自学Java
转自:http://www.360doc.com/content/12/0624/19/5856897_220191533.shtml JAVA自学之路 JAVA自学之路 一:学会选择 为了就业, ...
- Trie树学习2
数组实现的Trie树 字符容量有限,能够使用链表实现更为大容量的Trie #include <iostream> #include <cstdio> #include < ...
- Android Studio开发JNIproject
使用Android Sutdio创建一个新的project后,接下来记录创建NDKproject的基本步骤. 本文将达到: 1. 创建NDKproject 2. 在JNI中输出Log语句 3. 指定编 ...
- .NET连接SAP系统专题：C#调用RFC代码（三）
本文就说明在C#中如何编写代码来调用SAP中的RFC函数获取数据. 首先需要引用两个NCO3.0的DLL DLL下载地址:http://files.cnblogs.com/mengxin523/SAP ...