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中如何制作网页中的菜单,这部分的内容包括 ...
随机推荐
- 在完成端口中使用GetAcceptExSockaddrs
MSDN:When using AcceptEx, the GetAcceptExSockaddrs function must be called to parse the buffer into ...
- shell常见语法
#!/bin/bashecho "**********argument**********"echo script name: $0echo first argument $1ec ...
- JAX-RS入门 一 ：基础
简介 JAX-RS是一套用java实现REST服务的规范,提供了一些标注将一个资源类,一个POJOJava类,封装为Web资源.标注包括: @Path,标注资源类或方法的相对路径 @GET,@PUT, ...
- perl学习笔记（3）—— 坑
(1)用perl来ls一个目录: 写perl的时候,经常要调用到系统命令,perl有很多等价的函数可以用,但是,不小心任性了,就想用system来实现了,好吧,来个ls把,列出指定的一个目录,直接上代 ...
- vs2012 + web api + OData + EF + MYsql 开发及部署
先说下我的情况,b/s开发这块已经很久没有搞了,什么web api .MVC.OData都只是听过,没有实际开发过,因为最近要开发一个手机app的服务端,所以准备用这套框架来开发. 下面开始进入正题( ...
- 【转】工科男IT职场求生法则
转自:http://www.36dsj.com/archives/3459 我在IT职场打滚超过10年了,从小小的程序员做到常务副总.相对于其它行业,IT职场应该算比较光明的了,但也陷阱重重,本文说说 ...
- Flexigrid在IE下不显示数据的处理
文章总结自我的论坛提问: http://bbs.csdn.net/topics/390498434?page=1#post-394918028 解决方法: 网上的答案经我验证都是不靠谱的,以后大家就知 ...
- 减少远程ssh的延迟
今天搞了个很廉价的vps,ssh上去之后操作卡顿得不行,有时候输入一行命令后需要等五六秒才显示出来,蛋疼得不行. 然后想找一个解决方案,先是看到了mosh. 搜索了下教程,看了下说明,因为我这个廉价的 ...
- 都是iconv惹的祸
今天在做采集的时候发现只取到了网页的部分内容,当时我就郁闷了,之前都用的采集都可以采集到网页的所有内容,但这次死活就取到部分内容.寻找原因才知道原来是iconv惹的祸. 发现问题时,网上搜了搜,才发现 ...
- android IPC及原理简介
什么是Android操作系统,所谓的Android:是基于Linux内核的软件平台和操作系统,早期由Google开发,后由开放手机联盟Open Handset Alliance)开发. Linux ...