第六章css实现页面布局_第1页
第六章css实现页面布局_第2页
第六章css实现页面布局_第3页
第六章css实现页面布局_第4页
第六章css实现页面布局_第5页
已阅读5页，还剩13页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第六章CSS实现页面布局本章目标了解与页面布局相关的CSS属性理解CSS的盒状模型理解DIV标签和SPAN标签掌握CSS实现页面布局与页面布局相关的CSS样式属性外边距和内边距尺寸定位分类外边距和内边距属性说明margin-topmargin-rightmargin-bottommargin-left设置元素的顶、右、底、左外边距，即元素边框之外的空白。像素值或百分比，也可使用auto。margin依次设置顶、右、底、左外边距。padding-toppadding-rightpadding-bottompadding-left设置元素的顶、右、底、左内边距，即元素边框之内的空白。像素值或百分比，也可使用auto。padding依次设置顶、右、底、左内边距。外边距和内边距属性示例<body> <divid="outerDiv"> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p> <divid="innerDiv"> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p> </div> </div></body><styletype="text/css"> *{margin:0;padding:0;} body{background-color:#fedcba;} #outerDiv{ border:1pxsolidblue;width:400px; margin:20px;padding:10px; background-color:#abcdef; } #innerDiv{ border:1pxsolidred;width:300px; margin:20px;padding:10px; background-color:#cccccc; } p{border:1pxsolidgreen;}</style>尺寸属性说明width设置元素内容区域的宽度。像素值或百分比。height设置元素内容区域的高度。像素值或百分比。line-height设置文本块的行间距。像素值或百分比。尺寸属性示例<p>段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p><tableid="mytable"> <tr> <td>单元格</td><td>单元格</td> </tr> <tr> <td><imgsrc="image/eg_bg.gif"alt="示例图片"style="width:125px;height:125px;"/></td> <td><p>段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p></td> </tr></table><title>CSS样式属性_尺寸</title> <styletype="text/css"> #mytable{ height:180px; border:4pxdoubleblack; border-collapse:collapse; } #mytabletd{width:150px;border:1pxsolidgray;} p{line-height:28px;}</style>定位属性说明position设置元素的定位机制。static、relative、absolute、fixed。z-index设置元素在垂直浏览器窗口方向上的层叠顺序。数字值，越大越靠近浏览者。vertical-align设置行内元素在所在行上的垂直对齐方式，或用于设置单元格内容在单元格内的垂直对齐方式。baseline、top、middle、bottom、text-top、text-bottom、super、sub。overflow设置当元素内容所需占用的区域超出内容区域时，如何处理。auto、scroll、hidden、visible。top、right、bottom、left设置元素某边界相对于其包含块相应边界的偏移量。像素值或百分比，默认auto。定位属性示例<styletype="text/css">p{border:1pxsolidgray;}#p_pos_left{position:relative;left:20px;}#p_pos_top{position:relative;top:20px;}</style><pid="p_pos_left">段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p><p>段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p><pid="p_pos_top">段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p>定位属性示例*{margin:0px;padding:0px;}div{border:1pxsolidblue;}p{border:1pxdashedred;}#first{ position:absolute;z-index:1;left:20px;top:10px; width:220px;height:250px; background-color:#abcdef; }#second{ position:absolute;z-index:3;left:250px;top:10px; width:180px;height:150px; background-color:#abcdef;}#third{ position:absolute;background-color:#fedcba;left:-20px;top:50px;}#forth{ position:absolute;z-index:2;left:100px;top:120px; width:180px;height:100px;background-color:red; }<body> <divid="first"> <p>firstdiv位于body中</p> </div> <divid="second"> <p>seconddiv位于body中</p> <divid="third"> <p>thirddiv位于seconddiv中</p> </div> </div> <divid="forth"> <p>forthdiv位于body中</p> </div></body>定位属性示例<body> <divid="footer"> <p>不管页面如何滚动，我自始至终都在这里。</p> </div> <p>页面正文</p><p>页面正文</p><p>页面正文</p><p>页面正文</p><p>页面正文</p><p>页面正文</p><p>页面正文</p><p>页面正文页面正文页面正文页面正文页面正文</p><p>页面正文</p><p>页面正文</p><p>页面正文</p><p>页面正文</p></body><styletype="text/css"> #footer{ position:fixed; bottom:10px; right:10px; width:350px; height:50px; background-color:#fedcba; }</style>定位属性示例<styletype="text/css"> #mytable{ width:250px;border:4pxdoublegray; border-collapse:collapse; } #mytabletd{ vertical-align:top;border:1pxsolidgray; } #mydiv{ width:300px; height:250px; overflow:scroll; border:1pxsolidblue; }</style><divid="mydiv"> <p>段落文字<imgstyle="vertical-align:text-top;"src="image/eg_cute.gif"alt="段落文字中的小图片"/>段落文字</p> <tableid="mytable"> <tr> <td>单元格</td><td>单元格</td><td>单元格</td> </tr> <tr> <td>H<spanstyle="vertical-align:sub;">2</span>O</td><td><p><imgsrc="image/eg_cute.gif"alt="段落文字中的小图片"/></p></td><td>Y=2X<spanstyle="vertical-align:super;">2</span>+3X+4</td> </tr> …… </table></div>分类属性说明display设置元素如何显示Inline、block、none。visibility设置元素的可见性Visible、hidden。cursor设置元素上方光标的样式。help、wait、move、pointer等。float设置元素在其父级元素中如何浮动。left、right、none。clear设置元素的哪边不允许出现浮动元素。left、right、both、none。分类属性示例<styletype="text/css"> body{cursor:move;} p{display:inline;} #mydiv{display:none;}</style><body> <p>第一个段落</p> <p>第二个段落</p> <divid="mydiv">div的内容</div> <pstyle="display:block;">第三个段落</p> <pstyle="visibility:hidden;">第四个段落</p> <pstyle="cursor:hand;">第五个段落</p></body>分类属性示例<styletype="text/css"> #mydiv{ width:80px; border:1pxsolidgray; text-align:center; float:right; margin:5px; } #myulli{ float:left; background-color:#cccccc; margin:2px; width:100px; text-align:center; } a{text-decoration:none;}</style><divid="mydiv"> <imgsrc="image/eg_cute.gif"alt="图像"/><br/>真有趣！</div><p>段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p><ulid="myul"> <li><ahref="#">菜单项一</a></li> <li><ahref="#">菜单项二</a></li> <li><ahref="#">菜单项三</a></li> <li><ahref="#">菜单项四</a></li></ul>分类属性示例<styletype="text/css"> .imgfloat{ float:left; clear:both; } #myp{clear:left;}</style><imgclass="imgfloat"src="image/eg_smile.gif"alt="笑"/><imgclass="imgfloat"src="image/eg_smile.gif"alt="笑"/><pid="myp

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论