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 基础应用 DIV+CSS通用网页布局 高度自适应 CSS2.0 基础应用 #left {background-color:#ff0000; Border:2px solid #343434; Width:100px; Height:100%; Float:left;} Html,body { Margin:0px; Height:100%;} CSS的核心概念 W3C的定义：CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。 理解：任何一个CSS布局的网页，都是由许多大小不同，位置不同的盒子组成。 CSS2.0 基础应用-盒模型(box model) 盒模型的描述细节 width,height,padding,margin,border CSS2.0 基础应用-盒模型(box model) 深入浮动 CSS网页布局的两种方式：浮动布局，定位布局 皆脱离于文档流的控制。 文档流是浏览器的默认呈现规则。 CSS2.0 基础应用-浮动布局的秘密 浮动布局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; } 常见网站导航条的设计 横向导航 - 纵向导航 - 下拉导航 CSS2.0 基础应用-实战 盒模型背景的控制 Background:设置背景的所有控制选项 背景颜色（background-color） 背景图片(background-image) 背景定位（background-position） 背景滚动(background-attachment) 背景属性缩写 基于背景控制的导航优化 css?sprites技术 CSS2.0 基础应用-背景控制 盒模型背景的控制 背景颜色（background-color） h1十六进制表示法/h1 h2光学三元色表示法/h2 h3名称表示法/h3 h4透明表示法/h4 Body{background:#ededed;} H1{background:#6e87ff;} H2{background:#rgb(53,200,30);} H3{background:red;} H4{background:transparent;} CSS2.0 基础应用-背景控制 盒模型背景的控制 背景图片(background-image) Background-image:url(url); Background-repeat CSS2.0 基础应用-背景控制 盒模型背景的控制 背景定位（background-position） background-position：左对齐方式 上对齐方式 CSS2.0 基础应用-背景控制 必须按此规范写，手写容易出错，也不方便记。所以用工具生成就好。切记，非这种规范写法的，兼容性不能保证。这也是标准的推进所必要的手段！ 公司版