毕业设计之电子商城系统纯UI设计与实现-基于div+css+js技术从零到交付系列教程第2讲-熟悉常用CSS样式(1)范本.pptxVIP

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