《WEB前端开发技术实用教程》第04章 网站的布局谋篇-DIV+CSS盒子模型_第1页
《WEB前端开发技术实用教程》第04章 网站的布局谋篇-DIV+CSS盒子模型_第2页
《WEB前端开发技术实用教程》第04章 网站的布局谋篇-DIV+CSS盒子模型_第3页
《WEB前端开发技术实用教程》第04章 网站的布局谋篇-DIV+CSS盒子模型_第4页
《WEB前端开发技术实用教程》第04章 网站的布局谋篇-DIV+CSS盒子模型_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1第4章网站的布局谋篇

-DIV+CSS盒子模型目录24.1DIV+CSS网站布局概述4.2网页布局模型-盒子模型4.3布局属性4.4布局结构4.5DIV+CSS排版方式4.1DIV+CSS网站布局概述常见的布局方式：传统的table方式；div+css方式两种布局方式的比较：34.2网页布局模型-盒子模型4盒子模型盒子模型结构4.2网页布局模型-盒子模型5理解盒子模型一个盒子由content(内容)、border(边框)、padding(间隙)、margin(空隙)四部分组成；盒子具有宽度（width）和高度（height）盒子里面的内容到盒子的边框之间的距离即填充（padding）盒子本身有边框（border）盒子边框外和其他盒子之间，还有边界（margin）4.2网页布局模型-盒子模型6盒子模型具体结构图理解盒子模型4.3布局属性7填充距离(或内边距)padding：用于控制内容和边框之间的距离，顺序依次是上、右、下、左设置1个值：表示上下左右padding均为该值，如padding:5px；设置2个值：前者为上下padding值，后者为左右padding值，如padding:5px10px；设置3个值：第1个为上padding值，第2个为左右padding值，第3个为下padding值，如padding：5px10px15px；设置4个值：按照顺时针方向，依次为上，右，下，左padding值，如padding：1px2px3px4px；4.3布局属性8边界(或外边距)margin：用于控制元素和元素之间的距离，顺序依次是上、右、下、左设置1个值：表示上下左右margin均为该值。设置2个值：前者为上下magin值，后者为左右maigin值。设置3个值：第1个为上margin值，第2个为左右margin值，第3个为下margin值；设置4个值：按照顺时针方向，依次为上，右，下，左margin值。4.3布局属性9边框线border：设置元素的边框样式，顺序也是上、右、下、左。属性：color（颜色）、width(粗细)、style(样式)颜色：border-color:颜色值;粗细：border-width:thin，medium，thick，值；样式：border-style:none、dotted、dashed、solid、double、groove、ridge、inset、outset。4.3布局属性10浮动float：是css的定位属性。当某个元素脱离了标准流的排列，可以使用浮动来实现。所谓“标准流”，是指在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。浮动是非标准流的排列方式，主要用来排版、做文字环绕效果等。float：none，默认值，对象不飘浮float：left，文本流向对象的右边float：right，文本流向对象的左边左浮动案例11<styletype="text/css">*{margin:0px;padding:0px;}#father{border:1pxsolid#000;margin:20px;}#father.son{margin:10px;padding:10px;}/*设置儿子的不同样式*/#son1{color:#F00;border:1pxsolidblue;float:left;}#son2{color:blue;border:1pxdashedred;float:left;}#son3{color:#090;border:1pxsolid#060;float:left;}#fatherp{font:13pxArial,Helvetica,sans-serif;margin:5px;border:1pxsolidred;}</style>左右浮动12<styletype="text/css">*{margin:0px;padding:0px;}#father{border:1pxsolid#000;margin:20px;}#father.son{margin:10px;padding:10px;}/*设置儿子的不同样式*/#son1{color:#F00;border:1pxsolidblue;float:left;}#son2{color:blue;border:1pxdashedred;float:right;}#son3{color:#090;border:1pxsolid#060;float:left;}#fatherp{font:13pxArial,Helvetica,sans-serif;margin:5px;border:1pxsolidred;}</style>4.3布局属性13定位position：定位属性可以允许网页元素相对于其原来本身位置，应该出现在哪。定位一般分为两种：相对定位(relative)和绝对定位(absolute)。相对定位(relative)：指定位元素相对于它自己原先的位置产生的位移，它原先所占据的位置依然保留，因此它被称为“自私的定位方式”，一般结合top和left设置当前定位元素的位置。绝对定位(absolute)：指定位元素相对于离它最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置就相对于最初的包含块。它原先所占据的位置不再保留，让位给跟随其后的元素，因此被称为“无私的定位方式”。相对定位案例14<styletype="text/css">.father{

margin:50px;height:250px;border:1pxsolidblack; }.son{

padding:15px;border:1pxsolidred;position:relative;

top:100px;left:50px;}</style></head><body> <divclass="father"> <divclass="son">我是son</div>

</div></body>绝对定位15<styletype="text/css">

#box{margin:50px;height:200px;border:1pxsolidred;position:relative;}

#box.box-small{padding:10px;border:1pxsolidblue;position:absolute;top:10px;left:10px;}

</style><body><divid="box"><divclass="box-small">小盒子</div></div></body>4.3布局属性16层叠顺序Z-index：检索或设置对象的层叠顺序Z-index:auto默认值。遵从其父对象的定位Z-index:number无单位的整数值。可为负数较大number值的对象会覆盖在较小number值的对象之上。4.3布局属性17显示display：定义元素以何种方式显示display：block，此元素将以块元素方式显示，会独占一行，并支持宽度、高度、内边距、外边距等布局属性的设置。display：inline，此元素会被显示为行内元素，其后元素会紧随其后显示，不会换行，设置该元素的宽度、高度、内边距等属性将无效。display：none，此元素将会被隐藏，且所占据的物理位置会被删除。绝对定位综合案例184.4布局结构191、“国”字型网页布局：

也称为"同"字型，最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等搜狐国字型网页布局4.4布局结构20布局结构2、拐角型网页布局上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息hao123的拐角型网页布局结构4.4布局结构21布局结构3、左右框架型网页布局左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文，一般大型论坛采用这种结构CSDN论坛的左右框架型网页布局4.4布局结构224、封面型网页布局：基本上出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示，企业网站和个人主页封面型网页布局4.4布局结构235、flash型网页布局flash网站基本以图形和动画为主，所以比较适合做那些文字内容不太多，以平面、动画效果为主的应用。如：企业品牌推广、特定网上广告、网络游戏、个性网站等

flash网页布局4.5DIV+CSS排版方式241、1-2-1方式（两列布局方式）

flash网页布局1-2-1布局方式1-2-1方式（两列布局方式）25HTML元素定义部分：<divid="container"> <divid="header">页头信息</div><!--页头信息--><divid="main"><!--页面主体--> <divid="menu">

左边内容</div><!--左边--><divid="content">

右边内容</div><!--右边--><divclass="clear"></div></div><divid="footer">

页脚信息</div><!--页脚信息--></div>1-2-1方式（两列布局方式）26CSS样式定义部分：<styletype="text/css">#container{ margin:0pxauto;width:800px;}#header,#main,#footer{ width:800px;border:1pxsolid#999;margin-bottom:10px;}#header{ background-color:#CC0;background-repeat:no-repeat;height:100px;}#menu{ float:left;width:180px;background-color:#B0DCFF;height:400px;}#content{ float:right;width:600px;background-color:#E0DEFE;height:400px;}#footer{ height:100px;background-color:#C6F0FB;}.clear{ clear:both;}</style>4.5DIV+CSS排版方式272、1-3-1方式（三列布局方式）

flash网页布局1-3-1布局方式1-3-1方式（三列布局方式）28HTML元素定义部分：<divid="container"> <divid="header"><!--页头信息开始--></div><!--页头信息结束--><divid="main"><!--主体信息开始--> <divid="left"></div><divid="middle"></div><divid="right"></div><divclass="clear"></div></div><!--主体信息结束--> <divid="footer"><!--页尾信息--></div></div>1-3-1方式（三列布局方式）29CSS样式定义部分：<styletype="text/css">*{margin:0px;padding:0px;}body{font-size:12px;}#container{margin:10pxauto;width:960px;border:1pxsolid#03C;}#header,#main,#footer{

wi

人人文库> 全部分类> 行业资料 > 医学制药

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论