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网页设计(二)--布局与定位

时间: 2024-10-08 08:21:11

css+div网页设计(二)--布局与定位的相关文章

css+div网页设计

css是网页制作不可缺少的部分,我会用两篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 二.使用css控制页面方法 css控制页面的方法共有四种,行内样式.内嵌式.链接式.导入式. a.行内样式 ps:行内样式

精通CSS+DIV网页样式与布局--初探CSS

CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求."DIV+CSS&q

精通CSS.DIV网页样式与布局系列学习

精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式 精通CSS.DIV网页样式与布局(四) ——页面背景 精通CSS.DIV网页样式与布局(三)——中秋效果图 精通CSS.DIV网页样式与布局(二)—— 段落 精通CSS.DIV网页样式与布局(二) 精通CSS.DIV网页样式与布局(一) 神奇的验证码,我们一起来探究

精通CSS+DIV网页样式与布局--图片效果

提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:     精通CSS+DIV网页样式与布局--初探CSS 精通CSS+DIV网页样式与布局--CSS文字效果 精通CSS

CSS+DIV网页样式与布局——文字样式&amp;段落(一)

一个网页要说最多的还是文字,上篇博客说CSS样式是一个网页的精髓,那网页中最直接表现出来的就是文字和图片,还有一些所谓的表单,首先先说最为熟悉和常用的文字.让CSS控制网页中的文字,使它不再那么枯燥平淡,从此网页文字变得绚丽多彩. 一.文字样式 文字样式主要包括文字的大小.颜色.字体等,具体包括如下 写一个小例子,综合运用上述所有的文字效果样式: 代码: <html> <head> <title>文字字体</title> <style> body

css+div网页设计(三)--与多种技术的混合应用

本篇博客将介绍css与多种技术的混合应用,javascript可以为我们的页面更加方便的交互,xml使数据存储跟方便,ajax的异步更新可以加快我们网页的载入速度. 1.css与javascript 由于前面已经讲过javascript的基本知识这里就不多加介绍了http://blog.csdn.net/jinfulin/article/details/38406273 给大家举个实战例子,大家去仔细体味一下css与javascript的强大之处. <span style="font-si

精通CSS+DIV网页样式与布局--页面和浏览器元素

在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动条.首先我们来看一张思维导图: 接着,小编会跟随上述思维导图的足迹,慢慢探寻,丰富的超链接特效中,我们首先来介绍动态超链接,我们来看一下例子的代码和运行的效果:  动态超链接 <span style="font-size:18px;"><span style="

精通CSS+DIV网页样式与布局--页面背景

上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来设置背景颜色.背景图片.首先,我们来看一张图: 接着,小编会随着上述思维导图的脉络,对各个知识点进行详细讲解,首先,我们来看页面背景色,例子代码和运行效果如下所示:   页面背景色 <span style="font-size:18px;"><span style=&qu

精通CSS+DIV网页样式与布局--制作实用菜单

在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括:项目列表.无需表格的菜单.菜单的横竖装换,看下面一张思维导图: 首先,我们看项目列表,列表的符号,我们来看例子代码和运行效果: <span style="font-size:18px;"><span style="font-size:18px;"&g