使用CSS制作页面样式优秀培训书.ppt

指导子阶段二： 1、讲解网页的组成部分，如何布局 2、各部分有哪些内容，特别是使用CSS设置文本输入框和按钮样式 3、页面统一字体大小、样式 4、使用CSS设置按钮时，注意方框要设置为0 * 练习子阶段： 1、把素材提供给学员 2、学员独立完成，教员适时的进行指导 3、最后留几分钟做本次课程的总结，把大部分学员遇到的问题进行讲解，如果时间不允许就记录下来，在习题课上统一进行讲解 * 1、如果使鼠标移到一个按钮上时，鼠标呈手形，该如何设置？ 2、当鼠标移至一个超链接文字上时，文字颜色发生变化，显示下划线且为虚线，如何使用CSS设置？ 3、当用户在输入框中输入价格时，价格颜色为红色且居中显示，该如何使用CSS设置？ 第3题样式设置： .in { font-size: 12px; color: #FF0000; text-align: center; height: 18px; width: 60px; } 价格：input type=text name=“price id=“price class=in / 实验案例2：制作华夏银行信用卡介绍页 需求描述 网页头部的菜单超链接文字颜色为白色，当鼠标移上超链接文字时，颜色为#A5BED4 钛金卡、缤纷图片信用卡和普卡区的基本功能等文字实现按钮式超链接 信用卡介绍下面的文字，当鼠标移上时，文本前的图像、背景颜色和文字颜色均发生改变 实现思路 用表格布局信用卡介绍页面 使用UL制作各个部分需要显示的超链接 插入各部分的Flash、图片、文字 使用CSS统一设置页面文字样式 分别各个设置UL项目列表，制作需要的超链接样式 钛金区等类似的文字设置其背景图像、字体样式，然后统一使用class应用其样式 实验案例2：制作华夏银行信用卡介绍页 学员练习 表格布局页面，并制作导航和版权部分 制作页面主体 用CSS统一设置页面文字样式及超链接等样式 保存页面 实验案例2：制作华夏银行信用卡介绍页 35分钟完成 实验案例3：制作126用户登录页面 需求描述 网页文本进行统一的格式化 网站最上方的菜单实现无下划线超链接，且鼠标移至超链接上时文本颜色发生变化 表单文本输入框实现细边框样式 登录按钮实现图片按钮样式 实验案例3：制作126用户登录页面 实现思路 用表格布局制作126用户登录页面 统一设置页面文字的大小 设置用户名、密码输入框的长度、高度及边框样式 设置登录按钮样式，设置其背景图像、方框大小等。 实验案例3：制作126用户登录页面 学员练习 表格布局页面 制作顶端背景、超链接 制作左侧及右侧登录部分 制作CSS样式设置页面元素 25分钟完成 * Cascading Style Sheet是CSS的英文缩写，即层叠样式表，CSS是一种标记语言，本章主要使用CSS设置字体大小、字体颜色、表格的细边框样式、表格背景颜色、背景图片等，设置各种超链样式、设置表单元素的大小、使用图片代替按钮等 * 行内样式表示只设置当前文字、段落、表格样式、DIV样式等的样式内格。 Style=font-weight:bold表示行内样式，bold表示字体加粗显示 border:1px #FF9900 solid;DIV边框的宽度为1px，颜色为#FF9900，样式为solid，即实线。 * 嵌入样式是包含在head和/head之间的style标记内的CSS规则，适用于单个页面中同类标记的样式，例如页面中body、td、div等标签中的内容 * 使用link把CSS文件链接到应用CSS样式的页面中 * 新建CSS样式的两种方法： 第一种在CSS样式面板中单击新建CSS规则按钮 第二种在CSS样式面板中右击鼠标，在弹出的菜单中选择“新建”选项 * 1、在这个页面中首先介绍类、标签、ID、伪类这几种样式如何创建，然后介绍这几种之间的区别。 2、在页面中使用类时必须用class来引用，标签和高级创建的样式不用引用，页面会直接引用，而创建的ID选择器前面会有一个#号，这样当页面中ID对应的元素才会使用此样式。 3、伪类主要是对文本超链接进行样式设置 注意： 在这里可能会有学员问：既然对所有的网页元素，都可以用类样式来设置，为什么还要使用ID选择器？ 因此在这里要讲清楚类和ID选择器的不同用法。 ID选择器常用于DIV标签中或使用UL项目列表制作菜单等，每个页面中的ID是唯一的，因此每个ID选择器在一个页面中的应用是不会重复的。 类样式在一个页面中应用可以重复。 * “类型”分类：定义字体样式、颜色、大小等设置。 “背景”分类：定义背景颜色、背景图像的设置。 “区块”分类：定义字体间距、对齐方式等。 “方框”分类：设置方框大小以控制页面元素布局等。 “边框”分类：设置边框的样式、宽度和颜色。 “列表”分类：