中职高教版高二《网页设计与制作》任务5.2 利用CSS样式美化详情页课件

项目5 制作宝贝详情 任务5.2 利用CSS样式美化详情页 1 CONTENTS 01 活动1 使用CSS样式美化详情页 02 活动2 使用DIV+CSS制作详情页 01 使用CSS样式美化详情页 【CSS样式美化】 CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。现今，绝大部分的详情网页都是利用CSS样式进行美化设计的。能合理有效地使用CSS样式对网页进行美化设计，是网页制作人员必备的技能。 5 【作业步骤】 （1）建立站点。 （2）定位页面。 （3）设置样式器。 （4）预览美化效果。 6 【作业助手】CSS样式的分类 浏览器在读到一个样式表时，会按照这个样式表来对文档进行格式化处理。常见的样式处理方式有以下三种。 1.外部样式表 当有多个网页需要调用相同的样式时，通常使用外部样式表。我们可以通过修改一个文件来改变多个网页或整个站点的样式。一般通过如下代码调用外部样式文件。 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 7 2.内部样式表 当单个文件需要特别样式时，我们可以使用内部样式表。可以在 <head>和</head>之间，通过 <style> 标签定义内部样式表。如下代码是设置了当前网页为红色背景，段落字体18像素。 <head> <style> body {background-color: red} p { font-size:18px;} </style> </head> 【作业助手】CSS样式的分类 8 3.内联样式 在同一网页，只是个别元素需要应用到样式时，就可以直接使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。以下实例显示的是红色，大小18像素的文字内容。 <p style="font-size:18px; color:red" > 这是内联样式 </p> 【作业助手】CSS样式的分类 9 02 使用DIV+CSS制作详情页 DIV+CSS是WEB设计标准,是一种网页布局的方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现的相分离。良好的详情布局能给用户带来好的体验。为用户提供可选择的选项，能准确地告诉用户详情页的重点所在。同时也能给用户带来美的感受。从而降低用户跳失率，提高商品转化率。 【DIV+CSS的含义】 11 【作业步骤】 (1)绘制宝贝详情页草图。 (2)建立站点。 (3)利用DIV+CSS进行页面布局。 (4)导入网页素材。 (5)浏览网页。 12 【作业助手】如何引用外部样式文件 外部样式文件将CSS代码单独放置在一个文件中，给网站设计与维护人员的工作带来了极大的便利。引用外部样式文件的方法主要有两种： 1.手动输入引用 在网页代码的<Head>…</Head>标记中间输入如下所示代码即可引用。 <link rel="stylesheet" type="text/css" href="css/indexcss.css"/> 注：Ling是链接标记，定义了文档的关联，通常放置在<Head>…</Head>中。 此处“indexcss.css”是引用的外部文件名。 13 注：在进行引用操作时，要先保存需要引用外部样式文件的网页文件。 2.鼠标操作引用 在Dreamweaver的站点文件夹中，鼠标左键按住要引用的样式文件不放，拖动到网页文件代码窗的<Head>…</Head>之间释放鼠标左键即可，如图所示。 【作业助手】如何引用外部样式文件 14 【作业助手】DIV标记的float属性 Css样式的float浮动属性，用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。 Float常用属性值left、right、none。 例如： Float:none 不使用浮动。 Float:left 靠左浮动。 Float:right 靠右浮动。 15 【知识链接】Div+css与表格布局的优劣 经常有新手谈起DIV+CSS布局与表格布局的孰优孰劣的问题。简单来讲，DIV+CSS布局可以很简单实现网站换肤，DIV+CSS布局可以让网页一边载入一边显示，DIV+CSS布局可以让网页变得更小。当然DIV+CSS布局也存在很多缺点。 例如:当你需要一个百分比减去一个固定宽度时。你必须添加额外的嵌套层，必须使用上margin的负位，通过取巧的方式来完成:当你要完成普通的垂直居中时