Web前端开发实例教程——HTML5 CSS3 JavaScript 第7章 使用CSS修饰常见的网页元素.pptVIP

7.5 设置表单样式 7.5.1 修饰常用的表单元素 3．修饰其他表单元素 【例7-16】使用CSS修饰常用的表单元素，本例页面7-16.html在浏览器中的显示效果如图7-22所示。 7.5 设置表单样式 7.5.2 珠宝商城会员注册页面 【例7-17】制作珠宝商城会员注册页面，本例页面7-17.html在浏览器中的显示效果如图7-23所示。 7.6 综合案例——制作珠宝商城网购空间页面 7.6.1 页面布局规划 通过成熟的构思与设计，珠宝商城网购空间页面的效果如图7-24所示，页面布局示意图如图7-25所示。 7.6.2 页面的制作过程 1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹css下新建一个名为style.css的样式表文件。 2．制作页面 （1）制作页面的CSS样式 （2）制作页面的网页结构代码 7.6 综合案例——制作珠宝商城网购空间页面 习题7 习题7 1．简答CSS设置字体样式的常用属性。 2．简答CSS设置文本样式的常用属性。 3．简答CSS设置图像样式的常用属性。 4．简答CSS设置表格样式的常用属性。 5．简答CSS设置表单样式的常用属性。 6．使用CSS修饰表单技术制作用户登录页面，如图7-26所示。 7．使用CSS对页面中的网页元素加以修饰，制作如图7-27所示的页面。 8．使用CSS对页面中的网页元素加以修饰，制作如图7-28所示的页面。 第7章 使用CSS修饰常见的网页元素 Web前端开发实例教程 ——HTML5+CSS3+JavaScript 7.1 设置字体样式 7.1.1 字体类型 一般使用系统默认的“宋体”、“仿宋体”、“黑体”、“楷体”、“Arial”、“Verdana”和“Times New Roman”等常规字体。 CSS提供font-family属性来控制文本的字体类型。 语法：font-family : 字体名称 7.1 设置字体样式 7.1.2 字体大小 在设计页面时，通常使用不同大小的字体来突出要表现的主题，在CSS样式中使用font-size属性设置字体的大小，其值可以是绝对值也可以是相对值。常见的有“px”（绝对单位）、“pt”（绝对单位）、“em”（相对单位）、和“%”（相对单位）等。 语法：font-size : 绝对尺寸 | 相对尺寸 7.1 设置字体样式 7.1.3 字体粗细 CSS样式中使用font-weight属性设置字体的粗细，它包含normal、bold、bolder、lighter、100、200、300、400、500、600、700、800和900多个属性值。 语法：font-weight : bold | number | normal | lighter | 100-900 7.1 设置字体样式 7.1.4 字体倾斜 CSS中的font-style属性用来设置字体的倾斜。 语法：font-style : normal || italic || oblique 参数：normal为“正常”（默认值），italic为“斜体”，oblique为“倾斜体”。 7.1 设置字体样式 7.1.5 设置字体样式综合案例 【例7-1】设置字体样式综合案例，本例页面7-1.html的显示效果如图7-1所示。 7.2 设置文本样式 7.2.1 文本水平对齐方式 使用text-align属性可以设置元素中文本的水平对齐方式。 语法：text-align : left | right | center | justify 参数：left为左对齐，right为右对齐，center为居中，justify为两端对齐。 7.2 设置文本样式 7.2.2 行高 段落中两行文本之间垂直的距离称为行高。在HTML中是无法控制行高的，在CSS样式中，使用line-height属性控制行与行之间的垂直间距。 语法：line-height : length | normal 参数：length为由百分比数字或由数值、单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。normal为默认行高。 7.2 设置文本样式 7.2.3 文本的修饰 使用CSS样式可以对文本进行简单的修饰，text属性所提供的text-decoration属性，主要实现文本加下划线、顶线、删除线及文本闪烁等效果。 语法：text-decoration : underline || blink || overline || line-through | non