搜索
学云网签约讲师Tiger天越商城前端设计—第1讲前端布局模式学云为您提供高品质课件、学习督导服务、即时答疑、知识交易平台上节回顾认识什么是前端设计了解前端设计的模式了解不同布局模式的优势及用途学云为您提供高品质课件、学习督导服务、即时答疑、知识交易平台盒状编程模型学云为您提供高品质课件、学习督导服务、即时答疑、知识交易平台通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性学云为您提供高品质课件、学习督导服务、即时答疑、知识交易平台属性•语法定义：•background:background-color||background-image||background-repeat||background-attachment||background-position学云为您提供高品质课件、学习督导服务、即时答疑、知识交易平台典型属性：postion•static:无特殊定位，对象遵循HTML定位规则•absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框•relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置•fixed:IE5.5及NS6尚不支持此属性学云为您提供高品质课件、学习督导服务、即时答疑、知识交易平台(1)•默认情况下，float为none则不能发生任何浮动，块元素各占一行Div1Div2学云为您提供高品质课件、学习督导服务、即时答疑、知识交易平台(2)styletype=text/css#content_a{width:200px;height:80px;float:left;border:1pxsolid#000;margin:10px;background:#ccc;}#content_b{width:200px;height:80px;float:left;border:1pxsolid#000;margin:10px;background:#999;}/style学云为您提供高品质课件、学习督导服务、即时答疑、知识交易平台=content_a这是第一个DIV不应用浮动/divdivid=content_b这是第二个DIV向左浮动/divdivid=“foot”新的一个Div/div学云为您提供高品质课件、学习督导服务、即时答疑、知识交易平台=text/css#content_a{width:200px;height:80px;float:left;border:1pxsolid#000;margin:10px;background:#ccc;}#content_b{width:200px;height:80px;float:left;border:1pxsolid#000;margin:10px;background:#999;}#foot{clear:both;}/style学云为您提供高品质课件、学习督导服务、即时答疑、知识交易平台的方式布局这样一个网页谢谢！学云网签约讲师：Tiger