前端的设计、布局、交互、体验.pptx

; 这是设计中最重要的一点，也可以发挥出更多创意的设计想法；其中体现出层次感设计的就是从属关系，点构成线，线构成面，主次清晰明了。 下面示范可以任由设计师发挥，不是这样死板，记得运用层次感的原理去设计即可。细节！;产生丰富色彩的三原色是红，绿，蓝，也就是RGB，十六进制是00 00 00， 例如经常写的red,color:#FF0000; 缩写color:#F00;color:gray(#808080);是比较深的灰色。 常用的：黑色到深灰色从000000-999999，白色到白灰色从FFFFFF-F9F9F9 不同的文字颜色会产生不同的效果： ;CSS块元素(block) 总是另起一行开始； dl dt dd非常适合用于 高度，行高以及顶、底边距都可控制 常用的有：div p table h1 ul dl 等等 CSS内联元素(inline) 和其它元素都在一行上； 高度，行高以及顶、底边距不可改变； 常用的有：a strong font img input span small label等等 display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 但对于这个属性不是所有浏览器都识别。 ;;内边距padding： 元素的内边距在边框和内容区之间。 padding:10px 5px 15px 20px; 上 10px右 5px下 15px左 20px padding:10px 5px 15px; 上 右左 下 padding:10px 15px; 上 右 下左 div style=width:100px; padding:0 20px; 无标题文档/div 这个的宽度实质已经增加了40px 外边距margin： 围绕在元素边框的空白区域是外边距。 margin支持负值，在页面布局中，应该大胆的用，可以解决很多问题。 最常用的就是div居中:margin:0 auto;当然一定要固定宽度。 div style=“width:200px; text-align:center; ”div style=“width:100px;”无标题文档/div/div 这个属性是无法居中的！;position：relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 ;position：absolute 元素框从文档流完全删除，并相对于其包含块定位。元??定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 absolute元素默认以body做为容器元素进行绝对定位。如果你想在页面一个特定区域进行绝对定位，就可以在absolute元素外包裹一层容器元素应用relative样式。;;;;;;