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中如何制作网页中的菜单,这部分的内容包括 ...
随机推荐
- Cocos2d-x 关于在iOS平台真机测试的一些注意
下面简单记录一下在最近cocos2d-x项目在iOS平台真机测试和模拟器测试中遇到的一些要注意的地方(使用ipod): 1.图片大小 游戏中基本上都是会用到图片,那么在使用图片的时候要特别注意图片的s ...
- C#下实现的半角转与全角的互转
全角和半角的互转在C#下怎么实现呢? /// 转全角的函数(SBC case) /// ///任意字符串 ///全角字符串 /// ///全角空格为12288,半角空格为32 ///其他字符半角(33 ...
- LRESULT与wParam和lParam的问题
在微软vc提供的头文件中有定义在winnt.h中typedef long LONG;在windef.h中typedef LONG LRESULT; 所以LRESULT就是long,也就是长整形之所以取 ...
- 利用HTML5开发Android(7)---HTML5本地存储之Database Storage
在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...
- MongoDB下载与安装
本节只针对MONGODB的安装进行介绍,具体mongodb的特点及优势可参考其他文件. 注意32位操作系统支持的最大文件为2GB,所以做大文件海量储存的朋友要选择64位的系统安装.开始我们的下载安装之 ...
- 习总强调网络安全 ，咱们国产SSL证书必须加快普及速度
上海(2014 年 2 月 27 日)—— 央视新闻联播 27 日报道中央网络安全和信息化领导小组于当日成立的消息及习总在该小组首次会议上的重要讲话.据悉,该小组由习总任小组长,李克强.刘云山任副组长 ...
- ghostDoct 使用 （转 http://www.cnblogs.com/RockyMyx/archive/2010/04/20/Project-Route-Using-GhostDoc.html）
一.简介 GhostDoc是Visual Studio的一个免费插件,可以为开发人员自动生成XML格式的注释文档. 二.下载 需要的朋友可以去这里下载,填个Email地址就可以下了:GhostDoc下 ...
- IIS 7.0 and Web Farms
1. IIS 6 IIS 6.0 was capable of scaling out to virtually any number of web servers and had tools lik ...
- codeforces Gym 100187H H. Mysterious Photos 水题
H. Mysterious Photos Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100187/p ...
- poj 1845(等比数列前n项和及高速幂)
Sumdiv Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 13959 Accepted: 3433 Descripti ...