第05课HTML图片-纺大网页制作.PPTVIP

传媒学院 传媒学院 传媒学院 第18节 div+css布局 武汉纺织大学传媒学院 * * 传媒学院 1、div的排列方式 默认是一个div占一行 如果希望多个div占一行，则要设置“方框”中的“浮动”对齐方式，一般选“左对齐” * * 传媒学院 一行中显示多个div后，如果它们之后还有div，且希望这些div回到默认显示方式，则需设置第一个div的“方框”－“清除”为“两者” * * 传媒学院 2、上下文选择器 也叫css后代选择器 语法 选择器1 选择器2 {样式申明} 上下文选择器用于标记嵌套的情景 例如： #div1 #div2 {color:red} 表明该样式给被使用选择器#div1的标签包含的使用选择器#div2的标签使用 * * 传媒学院 例子 div id=news div id=label /div div id=content /div /div * * 传媒学院 鼠标放置在label div上，再点创建css，dw自动识别是创建上下文选择器样式 如果一个div中并排显示两个div时，且该div没有设置宽高，可能出现下图的情况 上图div id=father设置了红色边框，但没设置高宽，其包含两个div，但最终没被两个div撑开，而是只显示一个红线（那其实是div边框） 3、子div不能撑开父div问题 * * 传媒学院 解决方法：设置father div的定位-溢出-隐藏 设置后的效果如下 两个子div已在父div中 * * 传媒学院 4.1设计图 例子 纺大发展规划处 现在的网站大多是板块化 4、布局策划 * * 传媒学院 3个主区域 第2个区域中又含3个区域 第3个区域也含3个区域 4.2、划分区域 * * 传媒学院 1.logo菜单div id: logo 2.内容1 div id: content1 子div 图片div id:pic 工作div id:work 通知div id:message 3.内容2 div id: content2 子div 高教div id: teaching 他山之石div id: learning 链接div id: linker 5、划分div * * 传媒学院 全局div 网页所有内容都放在这个div中 便于设置效果 比如居中 一般的网站都这么做的 id=container 编写代码 container中包含logo，content1，content2 content1中包含pic，work，message content2中包含teaching，learning，linker 6、创建html框架代码 * * 传媒学院 div id=container div id=logo /div div id=content1 div id=pic /div div id=work /div div id=message /div /div div id=content2 div id=teaching /div div id=learning /div div id=linker /div /div /div * * 传媒学院 依据设计的大小，指定div的大小，在css设计阶段，可以利用背景或边框凸显效果，以便观察css设计的效果 以下是动手操作实例，建议大家以后动手做网页之前，也先规划好数据 1）container（全局）div 宽，1024，边界左右自动（居中效果） 2）logo div 高，100，边框蓝色，下边界2 7、创建样式 * * 传媒学院 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 * * 传媒学院 4）content2 div 背景颜色：绿 定位－溢出－隐藏（为解决子div不能撑开父div问题） teaching div 边框红色，宽350，高300，右边界2，浮动左对齐 learning div 边框红色，宽314， 高300，右边界2，浮动左对齐 linker div 边框红色，宽350， 高300，浮动左对齐 三个div的宽度和为350＋314＋350＝1