Div+css培训.ppt

CSS DIV 网站标准布局培训 主讲 李桂林 CSS DIV带来的好处 使页面加载速度更快 减小页面文件大小 可以降低网站的流量 使网站符合WEB标准 W3C规范 减少不同浏览器兼容性问题 设计代码与内容分离 易于页面修改和维护 代码精练 有利于搜索引擎抓取 增加收录数量和权重 在世界上越来越多人采用Web标准时 掌握CSS DIV可以提高设计师的职场竞争实力 CSS DIV 崭新的 老技术 什么是DIV CSS DIV全称division意为 区分 CSS全称CascadingStyleSheets意为层叠样式表 这个布局中 DIV承载的是内容 而CSS承载的是样式 内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击 尤其是设计人员很难接受设计一个他们不能立即看到的样式 不过随着学习 会发现DIV CSS的好处实在是太明显了 一 X HTML与CSS核心基础 HTML 超文本标记语言 XMLXHTML 可扩展超文本标记语言 Transitional松散过渡型的XHTML文档类型标题内容 头head 主体body 例子1 1 HTML与DOM 文档对象模型 一 X HTML与CSS核心基础 无标题文档 一 X HTML与CSS核心基础 XHTML遵循的规范1 标记名称必须小写2 属性名称必须小写3 标记必须严格嵌套4 标记必须封闭5 即使是空元素的标记也必须封闭6 属性值用双引号括起来7 属性值必须使用完整形式 正确 正确 正确 文本 正确 正确 正确 正确 一 X HTML与CSS核心基础 XHTML定义结构的标签 布局DIV 首选 文本p h1 h6 strong span b 图片Flashimg object列表ulli olli dldtdd表单form input select textarea 一 X HTML与CSS核心基础 XHTML引入CSS的方式 行内式文本内嵌式h1 color white 导入式 import mystyle css 链接式 一 X HTML与CSS核心基础 CSS语法结构 选择符 selector 属性 property 与值 value body color red 选择符分类 类型选择符id和class选择符群组选择符包含选择符标签指定选择符组合选择符伪类及通配选择符 例子1 1 一 X HTML与CSS核心基础 3 行内样式 ID样式 类别样式 标记样式例子1 2div color red content color green main color blue 我是div 一 X HTML与CSS核心基础 标记与标记div 块级元素 block span 行内元素 inline 例子 1 3 布局的 模型 每个HTML元素都可以看作一个装了东西的盒子 盒子具有宽度 width 和高度 height 盒子里面的内容到盒子的边框之间的距离即填充 padding 盒子本身有边框 border 而盒子边框外和其他盒子之间 还有边界 margin 一 X HTML与CSS核心基础 一 X HTML与CSS核心基础 div width 200px height 100px border 50pxsolid 000000 margin 50px padding 50px background ffffff 例子1 4 一 X HTML与CSS核心基础 属性值的简写形式方法是按照规定的顺序 给出2个 3个或者4个属性值 它们的含义将有所区别 具体含义如下 如果给出2个属性值 前者表示上下边框的属性 后者表示左右边框的属性 如果给出3个属性值 前者表示上边框的属性 中间的数值表示左右边框的属性 后者表示下边框的属性 如果给出4个属性值 依次表示上 右 下 左边框的属性 即顺时针排序 例子1 5 一 X HTML与CSS核心基础 margin 外边距 margin top margin right margin bottom margin left 外边距顺序依次是上 右 下 左例如 margin 2em4em margin left 200px padding 内边距 padding top padding right padding bottom padding left 内边距指文本边框与文本之间的距离 顺序依次是上 右 下 左例如 padding 2px4px6px padding left 200px 一 X HTML与CSS核心基础 border 边框 border color 颜色值 border width thin medium thick 宽度值 border style none无 solid实线 dotted点状 dashed虚线状 double双线 groove3D凹槽状 ridge3D凸槽状 inset3D凹边状 outset3D凸边状 例子1 6 border top border right border bottom border left 例如 border top 1pxsolid 000000 一 X HTML与CSS核心基础 background 背景 background color background image background repeat background attachment background position content background color cccccc background image url img bg jpg background repeat no repeat background position 30 20px 改进后 content background cccurl img bg jpgno repeat30 20px 例1 7 二 CSS网页布局及元素设计 动态超链接a link a visited text decoration none a hover a active text decoration underline 例2 1 二 CSS网页布局及元素设计 二 CSS网页布局及元素设计 Float属性 用于设置对象是否浮动显示 以及设置具体的浮动方式 none 不浮动 left向左 right向右 浮动 float 是CSS布局中非常强大的功能 也是理解CSS布局关系问题所在 包括div在内任何元素都可以浮动显示 例2 2常用布局 二 CSS网页布局及元素设计 Position定位 static 默认值 也就是按照标准流 包括浮动方式 进行布局 relative 称为相对定位 使用相对定位的盒子的位置根据常以标准流的排版方式为基础 然后使盒子相对于它在原本的标准位置偏移指定的距离 相对定位的盒子仍在标准流中 它后面的盒子仍以标准流方式对待它 absolute 绝对定位 使用left right top bottom等属性相对于其最接近的一个absolute定位设置的父对象进行绝对定位 如果不存在这样的父对象 则依据body对象 而其层叠通过z index属性定义fixed 称为固定定位 它和绝对定位类似 只是以浏览器窗口为基准 进行定位 例2 3 二 CSS网页布局及元素设计 Ulli olli dldtdd用法 DIVCSS网页布局中常用的列表元素ulollidldtdd释义 块级元素div尽量少用 和table一样 嵌套越少越好 ol有序列表 ul无序列表 很多人容易忽略dldtdd的用法 dl内容块dt内容块的标题dd内容可以这么写 标题内容1内容2 例2 4 二 CSS网页布局及元素设计 字体样式 Color 用于设置文字的颜色 Font family 设置字体 多个用逗号隔开 Font size 设置文字的大小 Font style 设置文字样式 Font weight 用于设置文字加粗样式 Font variant 设置英文字母大小写 Text transform 设置英文字母大小写方式 Text decoration 设置文本下划线 例2 5 缩写 font italicnormalbold12pt 18pt宋体 二 CSS网页布局及元素设计 段落样式 Line height 设置文本行高 Letter spacing 设置文字之间的间距 Word spacing 单词之间的间距 Text indent 文字缩进值 Vertical align 设置内容垂直对齐方式 Text align 设置文本对齐方式 White space 设置空格字符处理方式 nowarp方式强制文本不换行 除非br 例2 5 三 CSS技巧与兼容问题 圆角样式设计 例3 1 三 CSS技巧与兼容问题 IE捉迷藏 三 CSS技巧与兼容问题 捉迷藏问题主要出现在IE6中 当DIV应用稍显复杂时 常常出现的情况是在用于版本布局时 只要IE6中发现内容不能显示的情况 基本可都算是捉迷藏BUG 例3 2 1 解决方案 在页面上的对象使用float浮动 最后在下面使用带有clear both 的div对页面进行一些浮动上清理工作 可以给 layout使用固定宽和高 可以给 layout和 left使用position relative 对 layout使用line height属性 注意 应当在DIV的嵌套上遵循良好的习惯 尽量使用最少的层次嵌套来满足页面设计需要 使页面结构简单 实用 易控制 尽可能的减少由于不必要的嵌套引来的连锁问题 例3 2 2 三 CSS技巧与兼容问题 Ul的不同表现 列表1 列表2 列表3 ul margin 0 ul padding 0 ul padding 0 margin 0 三 CSS技巧与兼容问题 高度不适应 高度不适应指的是当内层对象的高度发生变化时 外层对象的高度不能自动进行调节 特别是当内层使用margin时 解决方案 对外层对象使用padding或border使外层对象重新计算自己的高度 在内层对象的上下各加一个空的div对象 固定外层对象宽度后overflow hidden或float 在内层对象的上下各加一个空格 nbsp 例3 4 三 CSS技巧与兼容问题 IE断头台 内层非浮动对象的高度作为总高度赋给了外层对象 从而将内层对象的内容切断 解决方案 把层非浮动的对象改成浮动对象 添加一个清除浮动内容的div 例3 5 四 W3C验证注意的问题 http validator w3 org W3C验证地址 较容易发生之错误1 所有标签都必需使用小写错误 正确 2 所有卷标内之属性都要有值且不可省略双引号或单引号错误 连结正确 连结若没有属性值就必需重复属性作为值 如 错误 正确 四 W3C验证注意的问题 3 所有标签必须成对 若非成对需加上 在最后错误 米奇米妮布鲁托正确 米奇米妮布鲁托错误 正确 4 一个网页最少要包含的标签标题内容说明 通常中文网页以gb2312编码 需加上以下这行于与之间 四 W3C验证注意的问题 5 若要显示 6 卷标顺序不可错乱错误 文字正确 文字7 批注文字中不可包含 错误