网页设计(div+css).ppt

DIV CSS布局 Div Css特点 DIV CSS是网站标准 或称 WEB标准 中常用的术语之一 通常为了说明与HTML网页设计语言中的表格 table 定位方式的区别 因为XHTML网站设计标准中 不再使用表格定位技术 而是采用DIV CSS的方式实现各种定位 Div CSS布局的优势 代码精简表格的嵌套问题速度问题方便搜索引擎的搜录重构页面的方便性 盒状编程模型 DIV CSS通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页内容 content 填充 padding 边框 border 边界 margin CSS盒子模式都具备这些属性 一共分为四个区块 每个区块的框架是一样的 这个框架就是用CSS写出来的 样式写一次 就可以被无数次调用了 用class调用 而不是ID 只要改变其中的文字内容就可以生成风格统一的众多板块了 演示的相关文件 前言正文内容CSS盒子模式正文内容转变思想正文内容熟悉步骤正文内容演示文件 DIV CSS设计思路 用div来定义语义结构 然后用CSS来美化网页 如加入背景 线条边框 对齐属性等 最后在这个CSS定义的盒子内加上内容 如文字 图片等 设计效果图 分析页面布局形式 设置主要4个盒子 将盒子装入Body盒子 定义整体样式 body font family Arial Helvetica sans serif font size 12px margin 0pxauto height auto width 760px border 1pxsolid 006633 分别定义各个盒子样式 header height 100px width 760px background image url headPic gif background repeat no repeat margin 0px0px3px0px 设置更小的盒子 nav height 25px width 760px font size 14px list style type none navli float left navlia color 000000 text decoration none padding top 4px display block 最终盒状模型结构代码 首页文章相册Blog论坛帮助前言第一段内容理解CSS盒子模式第二段内容客服中心 QQ留言 网站管理 会员登录 Copyright2006 2008KeithDan AllRightsReserved演示代码 练习一个实例 初始效果图设计 布局与规划 顶部部分 其中又包括了LOGO MENU和一幅Banner图片 内容部分又可分为侧边栏 主体内容 底部 包括一些版权信息 布局与规划 分析 结构分析 DIV结构如下 body 这是一个HTML元素 具体我就不说明了 Container 页面层容器 Header 页面头部 PageBody 页面主体 Sidebar 侧边栏 MainBody 主体内容 Footer 页面底部 编写主题内容 color aaaaaa color color aaaaaa color color aaaaaa color color aaaaaa color color aaaaaa color color aaaaaa color 菜单的制作 首页博客设计相册论坛关于 重要的属性设置 menuul list style none margin 0px list style none 这一句是取消列表前点 因为我们不需要这些点 margin 0px 这一句是删除UL的缩进 这样做可以使所有的列表内容都不缩进 menuulli float left margin 010px 这里的float left的左右是让内容都在同一行显示 因此使用了浮动属性 float margin 010px的作用就是让列表内容之间产生一个20像素的距离 左 10px 右 10px 预览的效果如下 到此 我们的基本雏形已经形成了 剩下的工作就是如何美化菜单 我们需要添加一条竖线 menuDiv width 1px height 28px background 999 典型的左右分割 pagebody width 730px 设定宽度 margin 8pxauto 居中 sidebar width 160px 设定宽度 text align left 文字左对齐 float left 浮动居左 clear left 不允许左侧存在浮动 overflow hidden 超出宽度部分隐藏 mainbody width 570px text align left float right 浮动居右 clear right 不允许右侧存在浮动 overflow hidden 典型的左右分割 固定大小 浮动大小 重要的属性float 如果float为none则不能发生任何浮动 块元素各占一行 content a width 200px height 80px border 1pxsolid 000 margin 10px background ccc content b width 200px height 80px float left border 1pxsolid 000 margin 10px background 999 content a width 200px height 80px float left border 1pxsolid 000 margin 10px background ccc content b width 200px height 80px float left border 1pxsolid 000 margin 10px background 999 这是第一个DIV不应用浮动这是第二个DIV向左浮动新的一个Div 取消浮动 content a width 200px height 80px float left border 1pxsolid 000 margin 10px background ccc content b width 200px height 80px float left border 1pxsolid 000 margin 10px background 999 foot clear both Div Css将替代Table布局吗 在表格类的