书签 分享 收藏 举报 版权申诉 / 13
立即下载 加入VIP,免费下载
当前位置： 首页 > 经管营销 > 财务管理 > 彻底弄懂CSS盒子模式DIV布局快速入门.docx

类型彻底弄懂CSS盒子模式DIV布局快速入门.docx

  • 文档编号：10540724
  • 上传时间：2023-02-21
  • 格式：DOCX
  • 页数：13
  • 大小：151.66KB

　　不用CSS排版

以下是引用片段：

jpg"width="100"height="80"align="middle"/>

　　第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：

我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。

这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。

如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。

演示地址：

 

　　像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了（用class调用，而不是ID），只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：

以下是引用片段：

--

*{margin:

0px;padding:

0px;} 

body{

font-size:

12px; 

margin:

0pxauto;

height:

auto;

width:

805px;

}

.mainBox{

border:

1pxdashed#0099CC;

margin:

3px;

padding:

0px;

float:

left;

height:

300px;

width:

192px;

}

.mainBoxh5{

float:

left;

height:

20px;

width:

179px;

color:

#FFFFFF;

padding:

6px3px3px10px;

background-color:

#0099CC;

font-size:

16px;

}

.mainBoxp{

line-height:

1.5em;

text-indent:

2em;

margin:

35px5px5px5px;

}

-->

前言

正文内容

CSS盒子模式

正文内容

转变思想

正文内容

熟悉步骤

正文内容

　熟悉工作流程

　　在真正开始工作之前我们脑海中要形成这样一种思想：

表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：

font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“

文字块一
文字块二
文字块三
”，而用“

文字块一

文字块二

文字块三

”更合适。

　　用DIV+CSS设计思路是这样的:

1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。

先看结果图：

　　

　　演示地址：

1.用div来定义语义结构

　　现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），典型版面分栏结构其结构代码如下：

以下是引用片段：

　　上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:

以下是引用片段：

　　最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：

以下是引用片段：

body {

font-family:

 Arial, Helvetica, sans-serif;

font-size:

 12px;

margin:

 0px auto;

height:

 auto;

width:

 760px;

border:

 1px solid #006633;

}

　　页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。

其样式代码为：

以下是引用片段：

#header {

height:

 100px;

width:

 760px;

background-image:

 url（headPic.gif）;

background-repeat:

 no-repeat;

margin:

0px 0px 3px 0px;

}

　　导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：

以下是引用片段：

#nav {

height:

 25px;

width:

 760px;

font-size:

 14px;

list-style-type:

 none;

}

#nav li {

float:

left;

}

#nav li a{

color:

#000000;

text-decoration:

none;

padding-top:

4px;

display:

block;

width:

97px;

height:

22px;

text-align:

center;

background-color:

 #009966;

margin-left:

2px;

}

#nav li a:

hover{

background-color:

#006633;

color:

#FFFFFF;

}

　　内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。

内容区块样式代码为：

以下是引用片段：

#content {

height:

auto;

width:

 740px;

line-height:

 1.5em;

padding:

 10px;

}

#content p {

text-indent:

 2em;

}

#content h5 {

font-size:

 16px;

margin:

 10px;

　　版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。

其样式代码如下：

以下是引用片段：

#footer {

height:

 50px;

width:

 740px;

line-height:

 2em;

text-align:

 center;

background-color:

 #009966;

padding:

 10px;

}

　　最后回到样式开头大家会看到这样的样式代码：

以下是引用片段：

* {

margin:

 0px;

padding:

 0px;

}

　　这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。

最终完成全部样式代码是这样的：

以下是引用片段：

--

* {

margin:

 0px;

padding:

 0px;

}

body {

font-family:

 Arial, Helvetica, sans-serif;

font-size:

 12px;

margin:

 0px auto;

height:

 auto;

width:

 760px;

border:

 1px solid #006633;

}

#header {

height:

 100px;

width:

 760px;

background-image:

 url（headPic.gif）;

background-repeat:

 no-repeat;

margin:

0px 0px 3px 0px;

}

#nav {

height:

 25px;

width:

 760px;

font-size:

 14px;

list-style-type:

 none;

}

#nav li {

float:

left;

}

#nav li a{

color:

#000000;

text-decoration:

none;

padding-top:

4px;

display:

block;

width:

97px;

height:

22px;

text-align:

center;

background-color:

 #009966;

margin-left:

2px;

}

#nav li a:

hover{

background-color:

#006633;

color:

#FFFFFF;

}

#content {

height:

auto;

width:

 740px;

line-height:

 1.5em;

padding:

 10px;

}

#content p {

text-indent:

 2em;

}

#content h5 {

font-size:

 16px;

margin:

 10px;

}

#footer {

height:

 50px;

width:

 740px;

line-height:

 2em;

text-align:

 center;

background-color:

 #009966;

padding:

 10px;

}

-->

　　结构代码是这样的：

以下是引用片段：

  • 首 页

  • 文 章

  • 相册

  • Blog

  • 论 坛

  • 帮助

    • 前言

    第一段内容

    理解CSS盒子模式

    第二段内容

    关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车

    Copyright ©2006 - 2008 Tang Guohui. All Rights Reserved

    　　好了，此文到此结束，更多内容，如：

    CSS中的盒子宽度计算，浏览器兼容问题，XHTML规范化写法等请大家去参考其它资料。

    举报
    举报     版权申诉
    版权申诉     word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载
    配套讲稿：

    如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

    特殊限制：

    部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

    关 键  词：
    彻底 弄懂 CSS 盒子 模式 DIV 布局 快速 入门
    提示  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
    关于本文
    本文标题：彻底弄懂CSS盒子模式DIV布局快速入门.docx
    链接地址：https://www.bdocx.com/doc/10540724.html

    热门标签

    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    copyright@ 2008-2022 冰点文档网站版权所有

    经营许可证编号:鄂ICP备2022015515号-1

    收起
    在线客服
    意见反馈
    返回顶部
    展开
    QQ交谈
    返回顶部