第4章css+div幻灯片.pptVIP

IT Education Training IT Education Training IT Education Training CSS+DIV网页设计 与制作 课程目标 熟悉CSS层叠样式表 掌握DIV+CSS网页样式与布局 Dreamweaver中的CSS样式 类型 背景 区块 方框 边框 类型 字体 字号 样式 行高 颜色 修饰 font-family: Arial,sans-serif; font-size: 12px; font-style: italic; line-height: 1.5em; color: #FF0000; text-decoration: none; 背景 背景颜色 背景图片 背景重复 背景位置 是否固定 background-color: #999999; background-image: url(11.jpg); background-repeat: repeat-x; background-attachment: fixed; background-position: left top; 区块 水平对齐 垂直对齐 缩进 空白 显示类型 text-align: center; vertical-align: middle; text-indent: 24px; white-space: normal; display: block; 方框 宽和高 填充 边界 浮动 清除 width: 400px; height: 200px; padding: 5px; margin: 5px; float: left; clear: left; 边框 样式 大小 颜色 border: 1px solid #CC00FF; border-top: 1px solid #CC00FF; border-right: 1px dashed #CC00FF; border-bottom: 1px solid #CC00FF; border-left: 1px solid #CC00FF; 盒子模型 盒子模型 Content Padding Border Margin 单个div布局实例 定位 float left right clear left right both position relative absolute 实例 多个div布局 嵌套div布局 图片签名 实用菜单 列表 ul li 纵向菜单 横向菜单 实例 设置网页背景 背景颜色 背景图片 背景图重复 背景图位置 固定背景图片 实例 CSS+Div布局 CSS定位与Div布局 CSS+Div布局剖析 CSS+Div美化与布局实战 CSS定位与Div布局 div与span 盒子模型------相框 定位 div与span div 布局（段落）样式 div class=“div1”/div div class=“div2”/div span 段内文字样式 div class=“para”今年的span class=“red”清明节/span是我国第一个法定假日。/div CSS+Div布局剖析 居中 上中下布局 左中右布局 嵌套布局 背景色问题 实例 上中下 左中右 六变换 相册 CSS+Div美化与布局实战 思路 草图设计 网页布局 CSS设计 添加内容 实例 蓝色经典 清明上河 交河故城 综合案例 博客 小型工作室 企业网站 购物网站 旅游网站 Thank you! 1、居中 解决办法1： body{ text-align:center; } .div{ margin:0 auto; text-align:left; } 2、强调预先做草图设计 3、嵌套原则 1）整体嵌套 2）同行嵌套 3）内容相似嵌套 4、背景色问题 如图2，如果左（left）右（right）两侧的内容高度不确定的情况下，如何保证背景色的匹配？ 解决方案： 考虑左侧内容相对固定，右侧内容可能会增多的情况： 1）将两个div嵌套在一个包容他们的div（content）中 2）设置父div的背景色为左侧要显示的颜色 3）设置right的背景色 IT Education Training IT Education Training IT Education Training 1、居中 解决办法1： body{ text-align:center; } .div{ margin:0 auto; text-align:left; } 2、强调预先做草图设计 3、嵌套原则 1）整体嵌套 2）同行嵌套 3）内容相似嵌套 4、背景色问题 如图2，如果左（left）右（right）两侧的内容高度不确定的情况下