CSS网页元素设计.pptVIP

第8章 CSS网页元素设计 字体样式的设置 段落样式的设置 颜色与背景的设置 图片样式的控制 em?vs.?px em指字体高，任意浏览器的默认字体高都是16px。 所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。 为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 em?vs.?px em有如下特点：1. em的值并不是固定的；2. em会继承父级元素的字体大小。 阅读： /blog/348 段落内容裁剪（P188） word-break word-wrap white-space over-flow 实例： 程序8-8.htm Spry Spry 框架是一个 JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。 　　 With Spry, you can use HTML code, CSS code, and a minimal amount of JavaScript to incorporate XML data into your HTML documents, create widgets such as accordions and menu bars, and add different kinds of effects to various page elements. 参考tab.html，SpryTabbedPanels.css中各选择器的说明： Spry——Tab面板 .TabbedPanels 对选项卡整体进行设计 .TabbedPanelsTabGroup 选项卡组，对一组选项卡的整体设置 .TabbedPanelsTab 用于设置每一个tab的样式 .TabbedPanelsTabHover 鼠标经过时tab的样式 .TabbedPanelsTabSelected 被选定的选项卡的样式 .TabbedPanelsContentGroup选项卡中的内容组 .TabbedPanelsContent 内容设置 鼠标滑过切换选项 li class=TabbedPanelsTab tabindex=0 onmouseover=TabbedPanels1.showPanel(0)span必威体育精装版行情/span/li 仿新浪TAB 固定宽度且居中1-2-1版式 实现步骤 按照布局结构构建html页面 使用CSS定义网页外观 在html页面中链接CSS文件 保存文件浏览网页 细节调整与修改 小结 字体的设置 字体的颜色 字体的修饰 段落的设置 图片的设置 背景的设置 背景颜色、背景图片 背景图像位置、固定 spry面板 使用“滑动门”技术设置玻璃效果菜单 基本思路： spry Tab面板 效果:/star/ F:\web\CSS彻底研究\12\02\Tab.htm 鼠标经过时切换选项 onmouseover=TabbedPanels1.showPanel(0) 折叠面板 / F:\web\CSS彻底研究\12\03\collapsible.htm Spry工具栏—spry可折叠面板 伸缩面板 F:\web\CSS彻底研究\12\04\accordion-hover.htm onmouseover=Accordion1.openPanel(this.parentNode)“ Spry工具栏—spry折叠式 CSS+DIV布局网页 CSS排版观念 将页面用div分块，搭建html页面 设计各块的位置 用css定位 将页面用div分块 设计各块的位置 固定宽度且居中的版式 body, html{ margin:0px; padding:0px; text-align:center; } #container{ position: relative; margin: 0 auto; width:700px; text-align: left; } 方法1： 固定宽度且居中的版式 body, html{ margin:0px; } #container{ position: relative; left:50%; width:700px; margin-left:-350px; } 方法2： #logo #banner #left #right footer #nav #left-1 #left-2 #right-1 #right-2 #right-3 #