武汉纺织大学传媒学院 cm.wtu.edu.cn 第18节 div+css布局 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/4/18 传媒学院

1、div的排列方式 默认是一个div占一行 如果希望多个div占一行，则要设置“方框”中的“浮动”对齐方式，一般选“左对齐” 2019/4/18 传媒学院

一行中显示多个div后，如果它们之后还有div，且希望这些div回到默认显示方式，则需设置第一个div的“方框”－“清除”为“两者” 2019/4/18 传媒学院

2、上下文选择器 也叫css后代选择器 语法 上下文选择器用于标记嵌套的情景 例如： 选择器1 选择器2 {样式申明} #div1 #div2 {color:red} 表明该样式给被使用选择器#div1的标签包含的使用选择器#div2的标签使用 2019/4/18 传媒学院

<div id=content> 例子 <div id=news> <div id=label> </div> <div id=content> 鼠标放置在label div上，再点创建css，dw自动识别是创建上下文选择器样式 2019/4/18 传媒学院

3、子div不能撑开父div问题 如果一个div中并排显示两个div时，且该div没有设置宽高，可能出现下图的情况 上图<div id=father>设置了红色边框，但没设置高宽，其包含两个div，但最终没被两个div撑开，而是只显示一个红线（那其实是div边框） 2019/4/18 传媒学院

解决方法：设置father div的定位-溢出-隐藏 设置后的效果如下 两个子div已在父div中 2019/4/18 传媒学院

4、布局策划 4.1设计图 例子 纺大发展规划处 现在的网站大多是板块化 2019/4/18 传媒学院

4.2、划分区域 3个主区域 第2个区域中又含3个区域 第3个区域也含3个区域 2019/4/18 传媒学院

5、划分div 1.logo菜单div 2.内容1 div 3.内容2 div id: logo id: content1 子div id:pic 工作div id:work 通知div id:message 3.内容2 div id: content2 高教div id: teaching 他山之石div id: learning 链接div id: linker 2019/4/18 传媒学院

6、创建html框架代码 全局div 编写代码 网页所有内容都放在这个div中 便于设置效果 id=container 比如居中 一般的网站都这么做的 id=container 编写代码 container中包含logo，content1，content2 content1中包含pic，work，message content2中包含teaching，learning，linker 2019/4/18 传媒学院

<div id=container> <div id=logo> </div> <div id=content1> <div id=pic> <div id=work> <div id=message> <div id=content2> <div id=teaching> <div id=learning> <div id=linker> 2019/4/18 传媒学院

7、创建样式 依据设计的大小，指定div的大小，在css设计阶段，可以利用背景或边框凸显效果，以便观察css设计的效果 以下是动手操作实例，建议大家以后动手做网页之前，也先规划好数据 1）container（全局）div 宽，1024，边界左右自动（居中效果） 2）logo div 高，100，边框蓝色，下边界2 2019/4/18 传媒学院

3）content1 div 背景颜色：灰，下边界：2 定位－溢出－隐藏（为解决子div不能撑开父div问题） pic div 边框红色，宽350，高300，右边界2，浮动左对齐 work div 边框红色，宽314， 高300，右边界2，浮动左对齐 message div 边框红色，宽350， 高300，浮动左对齐 三个div的宽度和为350＋314＋350＝1014，还有10个像素是边界2＋2和三个div的边框宽度6 2019/4/18 传媒学院

4）content2 div 背景颜色：绿 定位－溢出－隐藏（为解决子div不能撑开父div问题） teaching div 边框红色，宽350，高300，右边界2，浮动左对齐 learning div 边框红色，宽314， 高300，右边界2，浮动左对齐 linker div 边框红色，宽350， 高300，浮动左对齐 三个div的宽度和为350＋314＋350＝1014，还有10个像素是边界2＋2和三个div的边框宽度6 2019/4/18 传媒学院

布局的div+css框架效果如下 2019/4/18 传媒学院

去掉content1，content2背景颜色之后的效果 2019/4/18 传媒学院

8、细节处理 实现一个简单的效果（区域标签），如下 2019/4/18 传媒学院

1）重新规划该区域（message） 2）编写html代码 要实现这样的效果，message中要包含两个div，上面的div显示标签，下面的div显示该区域的内容 2）编写html代码 <div id=message> <div id=label> 通知公告 </div> <div id=content> 通告内容。。。 2019/4/18 传媒学院

3）定义css样式效果 message的边框颜色改成蓝色 label的样式 高度28 左填充5 颜色：白色 背景颜色：蓝色 2019/4/18 传媒学院

作业 用div排版，实现如下效果 2019/4/18 传媒学院