[2015网站设计培训.ppt

DIV+CSS通用网页布局 三列浮动中间列宽度自适应 div id=“left”布局左侧内容/div div id=“center”布局中间内容/div div id=“right”布局右侧内容/div #right {background-color:#00ff00; Border:2px solid #343434; Height:300px;Width:100px; Position:absolute;Top:0px;right:0px;} #left {background-color:#ff0000; Border:2px solid #343434; Width:100px;Height:300px; Position:absolute;Top:0px;Left:0px;} #center {background:#ff0000;Border:2px solid #000; Heigth:300px;Margin-left:104px; margin-right:104px;} body{margin:0px;padding:0px;} CSS2.0 基础应用 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. DIV+CSS通用网页布局 高度自适应 CSS2.0 基础应用 #left {background-color:#ff0000; Border:2px solid #343434; Width:100px; Height:100%; Float:left;} Html,body { Margin:0px; Height:100%;} Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. CSS的核心概念 W3C的定义：CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。 理解：任何一个CSS布局的网页，都是由许多大小不同，位置不同的盒子组成。 CSS2.0 基础应用-盒模型(box model) Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 盒模型的描述细节 width,height,padding,margin,border CSS2.0 基础应用-盒模型(box model) Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 深入浮动 CSS网页布局的两种方式：浮动布局，定位布局 皆脱离于文档流的控制。 文档流是浏览器的默认呈现规则。 CSS2.0 基础应用-浮动布局的秘密 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 浮动布局FLOAT定位，清理 clear:both 定位技术 position:static | relative | absolute | fixed | inherit 绝对定位与相对定位 Position:absolute; Top,right,bottom,left,z-index Posistion:relative; CSS2.0 基础应用-定位技术 div.clear { background:none; border:0; clear:both; display:block; float:none; font-size:0; margin:0; padding:0; overflow:hidden; visibility:hidden; width:0; height:0; } Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 常见网站导航条的设计 横向导航 - 纵向导航 - 下拉导航 CSS2.0 基础应用-实战 Eva