DIVCSS三种经典布局教案.pptxVIP

DIV+CSS布局篇 三种经典的网页布局方式 1 一列布局之一列固定宽度布局（相对宽度） div class=shuyan此处显示 class “shuyan 的内容/div .shuyan { background-color: #06C; width: 60%; } px像素单位 最常用的单位绝对单位 em 是字体高 相对单位 通常用在行高参数中 pt是磅 绝对单位 In 是寸 cm是厘米 pc 派卡 mm毫米 绝对单位 2 一列布局之一列固定宽度布局（绝对宽度） .shuyan { background-color: #06C; width: 600px; } 使用单位为绝对单位 3 一列布局之一列固定宽度居中布局 .shuyan { background-color: #06C; width: 60%; height: 500px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } 只需要将DIV的左右外边距margin-left和margin-right设置为auto即可，实现左右居中。通常用于网页的最外层DIV,目的将网页内容置于浏览器中间显示。 4 二列布局之两列上下布局和左右布局 div class=left-content此处显示 class layout 的内容/div div class=right-content此处显示 class layout 的内容/div .left-content { background: pink; height: 200px; width: 500px; } .right-content { background: green; width: 500px; height: 200px; } Div是块状级元素，默认情况下占一行。因此两个图层上下显示。 5 怎样让这两个图层左右显示？ 二列布局之两列上下布局和左右布局 div class=left-content此处显示 class layout 的内容/div div class=right-content此处显示 class layout 的内容/div .left-content { background: pink; height: 200px; width: 500px; float:left;} .right-content { background: green; width: 500px; height: 200px; float:left;} 想要让下面的DIV，排列到右侧，需要用到css里的浮动float 6 两列布局之居中布局 div class=maincontent div class=left-content此处显示 class left-content 的内容/div div class=right-content此处显示 class right-content 的内容/div /div 将所有的内容置于一个父DIV中，再将父DIV设置为居中。 7 块级元素：就是一个方块，像段落一样，默认占据一行出现 8 块级元素和内联元素 内联元素：又叫行内元素，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。 一般的块级元素诸如段落p、标题h1h2...、列表,ulolli 、表格table、表单form、DIVdiv和BODYbody等元素。而内联元素则如: 表单元素input、超级链接a、图像img、span ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。 Float属性及应用案例 9 10 .left-content { background: pink; float: left; width: 200px; margin-right: 20px; margin-bottom: 20px; } .right-content { width: 500px; height: 500px; background: #693; color: #FFF; } 用float让元素向左浮动，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。 Float属性及应用案例 11 超级链接伪类 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF0