人机界面设计9-webcss 用户界面设计WebUI.pptx

用户界面设计WebUI;CSS样式表;5.1 CSS(Cascading Style Sheets)简介;一、CSS+DIV是Web标准的体现;Web标准的定义; ; ; “Web标准”概述;结构、表现和行为;为什么要使用Web标准;CSS定义及相关特性; ; ;在HTML中使用CSS的方法;内嵌样式(Inline Style);内部样式表(Internal Style Sheet);外部样式表(External Style Sheet);02-08.css文件;构造CSS规则;构造CSS规则;构造CSS规则;基本CSS选择器;元素选择器;类别选择器(自定义）;写一个自定义样式：分别定义段落1、2字体的颜色和大小; ; ;2.3 ID选择器; html head titleID选择器/title style type=text/css #bold{ font-weight:bold; /* 粗体 */ } #green{ font-size:30px;/* 字体大小 */ color:#009900; /* 颜色 */ }; ;复合选择器;1.选择器分组 (并集选择器); ; ;2.后代选择器 (交集选择器,包含选择器); ; ; ;3. CSS 伪类 (Pseudo-classes); ;三、文字、图像、背景CSS定义（对比、书写）;常用文字CSS控制;常用文字CSS控制;常用图像的CSS控制;用CSS设置背景样式;CSS+DIV设计中注意的问题;糟糕的代码和优秀的代码*;ID和Class*; DIV+CSS盒子模型;;“盒子”与“模型” ;盒子思想;研究什么;4.2 长度单位;4.3 边框;边框border\内距padding\间距margin;不同个属性意思;后面要用到的浮动和定位属性;分析一个实例;4.4 盒子之间的关系;2．DOM树(Document Object Model)文档对象模型;;body h2今日推荐/h2 a href=# img src=images/ex4.jpg width=210“height=140//a p七星瓢虫图案4件套，采用超柔和进口面料，手感极其柔软，舒适。/p p缩水率以及退色率均符合国家检测标准，绿色环保。30度以下水温洗衣机弱洗，中性洗涤剂，中温熨烫。 /p /body;图4.7 DOM树与页面布局的对应关系;;body h2产品分类/h2 ul lia href=#0-1岁玩具/a/li lia href=#2-3岁玩具/a/li lia href=#4-6岁玩具/a/li lia href=#0-1岁服装/a/li /ul /body;body;4.4.3 标准文档流;标准文档流;换个角度看网页;标准文档流—结构;表现;;4.6 盒子在标准流中的定位原则;4.6 盒子在标准流中的定位原则;4.6 盒子在标准流中的定位原则;4.7 margin属性可以设置为负值; ; ;;div;原因;5.1 盒子的浮动;思考下面代码;;div class=father div class=son1Box-1/div div class=son2Box-2/div div class=son3Box-3/div p这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字./p /div;设置第1个浮动的div;设置第2个浮动的div;;设置第3个浮动的div;改变浮动的方向;再次改变浮动的方向;使用clear属性清除浮动的影响;Clear:left清除左浮动的影响;Clear:right清除右浮动的影响;重新思考;.mainContent { float:left; width:540px; } .sideBar { float:right; width:186px; margin-right:10px; margin-top:20px; };再细节思考这个页面DIV布局;盒子的定位;盒子的定位;盒子的定位;5.2.1 静态定位;5.2.2 相对定位; ;2．两个子块的情况; ;两条关于“相对定位”的定位原则; ; ;5.2.3 绝对定位; ; ; ; ;