电子商务设计实务_第1页
电子商务设计实务_第2页
电子商务设计实务_第3页
电子商务设计实务_第4页
电子商务设计实务_第5页
已阅读5页，还剩45页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

书名：电子商务设计实务第3版ISBN：978-7-111-50682-9作者：孙永道王彤出版社：机械工业出版社本书配有电子课件第3章用CSS美化网页UI相关知识：什么是CSS样式表样式定义的基本格式样式的基本组成三种常见的选择器技能项目：如何创建样式表如何应用样式常见样式使用技巧如何使用特效滤镜主要内容CSS介绍1CSS创建和应用2Dreamweaver中设计样式3CSS3新样式介绍4一、

什么是样式表

样式表CSS（CascadingStyleSheet）中文译为“层叠样式表”，实际上就是一组用于设置网页内容显示形式的“样式”的集合。样式表的作用是可以在同一页面里设置不同内容的不同表现形式。另外，用样式功能可以使得仅仅改变一个样式就可以改变数百个网页的外观（即我们常听说的“皮肤”），或者改变一个单独的样式影响到网站的所有文字大小。某些特别的纪念日子里，读者看到很多网站突然变成一片黑白色，这就是样式表的功能。一、如何使用样式通过内联样式表设计样式

内联样式是指通过style标记直接将样式设置在网页的head标记中。可以直接指定某个html标记的样式（标记选择器样式）、某个具体网页元素的样式（ID选择器样式）或用于不同网页元素的样式（类选择器样式）。在网页中引用样式时，直接在HTML标记中设置id="ID样式名"（ID选择器样式）或class="类样式名"（类选择器样式）的方式引用样式。类样式的有效范围是在当前整个网页中有效，即网页中所有的标记都可以应用当前页面顶部定义的内联样式。一、如何使用样式通过内联样式表设计样式

下面是一个内联样式的例子：…<head><styletype="text/css">/*下面定义一个ID标签名样式，只针对定义ID为a1的html标记有效*/#a1{background-color:blue;font-size:12px;}/*下面定义一个类样式，对那些包含classa2的html标记有效*/二、创建和使用样式通过内联样式表设计样式.a2{background-color:red;font-size:14px;}/*下面定义一个标记样式，对当前网页中的所有div标记都有效*/div{background-color:red;font-size:14px;}3.2如何使用样式通过内联样式表设计样式</style></head><body><divid="a1">样式为div</div><divclass="a2">样式为类样式a1</div><div>样式为类样式标记div样式</div></body>二、创建和使用样式直接给标记嵌入样式设计样式的第三种方式是嵌入样式，这种方法比较简单，只要在需要应用样式的HTML标记内写上CSS属性就可以了。<fontstyle="font:small;font-family:Arial">设置字体样式</font>三、各种样式的具体操作实践新建样式打开“CSS样式”面板之后，就可以在网页中新建CSS样式，具体步骤如下：步骤一：在“CSS样式”面板中右击，弹出快捷菜单，选择“新建”命令，如图6-3所示。三、各种样式式的具体操作作实践新建样式打开“CSS样式”面板之之后，就可以以在网页中新新建CSS样式，具体步步骤如下：步骤二：弹出“新建CSS规则”对话框框，该对话框框中的一些选选项说明如下下：选择器类型：：类：类选择器器是可以用于于任何html元素的样式，，它的样式名名前有个点。。标签：就是直直接在现有的的html标记上设置样样式。复合内容：复复合内容主要要是针对超链链接的样式进进行特别设置置，包括以下下四种可设置置的样式。三、各种样式式的具体操作作实践新建样式打开“CSS样式”面板之之后，就可以以在网页中新新建CSS样式，具体步步骤如下：步骤二：弹出“新建CSS规则”对话框框，该对话框框中的一些选选项说明如下下：选择器类型：：a:active：设置当前选选中超链接的的样式。a:hover：设置当前光光标悬停在其其上方时的超超链接样式。。a:link：设置超链接接一般样式，，即没有鼠标标选择，也没没有鼠标悬停停状态时候的的样式。a:visited：设置已经访访问（点击））过的超链接接的样式。三、各种样式式的具体操作作实践新建样式打开“CSS样式”面板之之后，就可以以在网页中新新建CSS样式，具体步步骤如下：步骤二：弹出“新建CSS规则”对话框框，该对话框框中的一些选选项说明如下下：选择器名称：类：类选择器器是可以用于于任何html元素的样式，，它的样式名名前有个点。。标签：就是直直接在现有的的html标记上设置样样式。复合内容：复复合内容主要要是针对超链链接的样式进进行特别设置置，包括以下下四种可设置置的样式。三、各种样式式的具体操作作实践新建样式打开“CSS样式”面板之之后，就可以以在网页中新新建CSS样式，具体步步骤如下：步骤二：弹出“新建CSS规则”对话框框，该对话框框中的一些选选项说明如下下：选择器类型：：设置选择器的的名称。只有有当选择器类类型选择为ID选择器或类选选择器的时候候才需要设置置选择器的名名称。规则定义：这里是指，新新设计的样式式是作为当前前网页的内嵌嵌样式方式引引用还是作为为外部样式文文件的链接方方式应用。三、各种样式式的具体操作作实践新建样式打开“CSS样式”面板之之后，就可以以在网页中新新建CSS样式，具体步步骤如下：步骤三：单击“确定””按钮，弹出出“保存样式式表文件为””对话框，如如图6-5所示，对新建建的样式表文文件进行保存存。三、各种样式式的具体操作作实践文本样样式文本样样式对对话框框说明明如图6-7所示：三、各各种样样式的的具体体操作作实践践背景样样式背景样样式对对话框框说明明如图所所示：三、各各种样样式的的具体体操作作实践践段落样样式段落样样式对对话框框说明明如图6-14所示：三、各各种样样式的的具体体操作作实践践定位样样式定位””样式式主要要用来来定义义元素素在页页面中中的相相关位位置和和大小小等属属性，，如图图所示示。三、各各种样样式的的具体体操作作实践践边框样样式边框””样式式可以以给对对象添添加边边框，，设置置边框框的颜颜色、、粗细细以及及样式式。如如图所所示。。三、各各种样样式的的具体体操作作实践践标准盒盒子模模型三、各各种样样式的的具体体操作作实践践标准盒盒子模模型三、各各种样样式的的具体体操作作实践践方框样样式方框””样式式是定定义特特定元元素的的大小小及其其与周周围元元素的的间距距等属属性。。在CSS3样式中中设置置方框框样式式，如如图所所示。。三、各各种样样式的的具体体操作作实践践盒子模模型案案例三、各各种样样式的的具体体操作作实践践列表样样式列表””样式式是用用于控控制列列表内内各项项元素素，可可以定定义样样式的的空格格和对对齐方方式，如图所所示。。四、关关于CSS3和HTML5HTML5的新功功能图像方方面的的改进进HTML5引入了了canvas标签，，通过过canvas可以动动态地地生成成各种种图形形图像像、图图表以以及动动画。。不仅仅如此此，HTML5也赋予予图片片图形形更多多的交交互功功能，，HTML5的canvas标签还还能够够配合合javascript来利用用键盘盘控制制图形形图像像。四、关关于CSS3和HTML5HTML5的新功功能位置应应用的的支持持HTML5通过提提供应应用接接口———GeolocationAPI，在用用户允允许的的情况况下共共享当当前的的地理理位置置信息息，并并为用用户提提供其其他相相关的的信息息。HTML5的GeolocationAPI主要特特点在在于：：本身身不去去获取取用户户的位位置，，而是是通过过其他他三方方接口口来获获取，，例如如IP、GPS、WIFI等方式式；用用户可可以随随时开开启和和关闭闭，在在被程程序调调用时时也会会首先先征得得用户户同意意，保保证了了用户户的隐隐私。。四、关关于CSS3和HTML5HTML5的新功功能网络存存储方方面的的支持持HTML5的WebStorageAPI采用了了离线线缓存存，会会生成成一个个清单单文件件（ManifestFile），这这个清清单文文件实实质就就是一一系列列的URL列表文文件，，这些些URL分别指指向页页面当当中的的HTML、CSS、JavaScrpit、图片片等相相关内内容。。四、关关于CSS3和HTML5CSS3的新功功能选择器器CSS选择器器是个个强大大的工工具：：它们们允许许在标标签中中指定定特定定的HTML元素而而不必必使用用多余余的class、ID或javascripts。而且它们们中的大部部分并不是是CSS3中新添加的的，而是没没有被得到到应有的广广泛应用。。四、关于CSS3和HTML5CSS3的新功能连字符CSS3中唯一新引引入的连字字符是通用用的兄弟选选择器（同同级）。它它针对一个个元素的有有同一个父父级结点的的所有兄弟弟级别元素素。比如，，给某个特特定的div同级的图片片添加一个个灰色的边边框（div和图片应该该有同一个个父级结点点），在样样式表中定定义下面的的样式就足足够了：div~img{border:1pxsolid#ccc;}四、关于CSS3和HTML5CSS3的新功能伪类或许在CSS3中增加最多多的就是新新的伪类了了，以下介介绍一些比比较有用的的伪类：:nth-child(n)：基于元素素在父结点点的子元素素的列表位位置来指定定元素。可可以是用数数字、数字字表达式或或odd和even关键词（对对斑马样式式的列表很很完美）。。:last-child：匹配一个个父结点下下的最后一一个子元素素，等同于于:nth-last-child(1)。:checked：匹配选择择的元素，，比如复选选框。:empty：匹配空元元素（没有有子元素））。四、关于CSS3和HTML5CSS3的新功能伪元素在CSS3中唯一引入入的伪元素素是::selection，它可以让让你指定被被用户高亮亮（选中））的元素。。四、关于CSS3和HTML5CSS3的新功能RGBA和透明度RGBA让设计者不不仅可以设设定色彩，，还能设定定元素的透透明度。一一些浏览器器尚不支持持它，所以以最好在RGBA前面设定其其他浏览器器支持的没没有透明的的颜色属性性。当设定定一个RGBA色彩的时候候，必须依依次设定红红、蓝和绿绿色的值，，可以是0～255或百分数。。四、关于CSS3和HTML5CSS3的新功能多栏布局新的CSS3选择器可以以不用使用用多个div标签就能实实现多栏布布局。下面面是CSS3的多栏布局局例子：.index#contentdiv{-webkit-column-count:4;-webkit-column-gap:20px;-moz-column-count:4;-moz-column-gap:20px;}四、关于CSS3和HTML5CSS3的新功能可以通过这这个选择器器定义三件件事情：栏栏数（column-count）、栏宽宽（column-width）和各栏栏之间的的空白/间距（column-gap）。如果果column-count未设定，，浏览器器会在允允许的宽宽度内设设置尽可可能多的的栏目。。为了在各各栏目之之间添加加一个数数值的分分隔，可可以使用用column-rule属性，其其功能和和border属性类似似：div{column-rule:1pxsolid#00000;}四、关于于CSS3和HTML5CSS3的新功能能多背景图图CSS3允许使用用多个属属性比如如background-image、background-repeat、background-size、background-position、background-originand、background-clip等在一个个元素上上添加多多层背景景图片。。在一个元元素上添添加多背背景的最最简单的的方法是是使用简简写代码码，可以以指定上上面的所所有属性性到一条条声明中中，最常常用的是是image、position和repeat属性：四、关于于CSS3和HTML5CSS3的新功能能div{background:url(example.jpg)topleftno-repeat,url(example2.jpg)bottomleftno-repeat,url(example3.jpg)centercenterrepeat-y;}四、关于于CSS3和HTML5CSS3的新功能能自动换行行word-wrap（自动换换行）属属性用来来防止太太长的字字符串溢溢出。可可以用两两个属性性值normal和break-word。normal值（默认认的）只只在允许许的断点点截断文文字，如如连字符符。如果果使用了了break-word，文字可可以在任任何需要要的地方方截断以以匹配分分配的空空间并防防止溢出出。四、关于于CSS3和HTML5CSS3的新功能能文字阴影影尽管在CSS2中就已经经存在，，text-shadow是一个未未被广泛泛应用的的CSS属性。但但是它将将在CSS3中被广泛泛采用。。这个属属性给设设计师一一个新的的跨浏览览器的工工具来为为设计添添加一个个维度以以使文字字醒目。。四、关于于CSS3和HTML5CSS3的新功能能@font-face属性尽管是最最被期待待的CSS3特性，@font-face在网站上上仍然没没有像其其他CSS3属性那样样被广泛泛采用。。这主要要因为字体授权和版版权问题题：嵌入入的字体体很容易易从网站站上下载载到，这这是字体体厂商的的主要顾顾虑。四、关于于CSS3和HTML5CSS3的新功能圆角（边框半半径）Border-radius无需背景图片片就能给HTML元素添加圆角角。现在，它它可能是使用用最多的CSS3属性了，很简简单的原因是是使用圆角比比较好而且不不会对设计和和可用性有冲冲突。不同于于添加JavaScript或多余的HTML标签，仅仅需需要添加一些些CSS属性即可实现现。而且可以以让设计者省省去花费几个个小时来寻找找精巧的浏览览器方案和基基于JavaScript圆角。四、关于CSS3和HTML5CSS3的新功能边框图片border-image属性允许在元元素的边框上上设定图片，，从通常的solid、dotted和其他边框样样式中解放出出来。该属性性给设计师一一个更好的工工具，用它可可以方便地定定义设计元素素的边框样式式，比background-image属性（对高级级设计来说））或枯燥的默默认边框样式式更好用。也也可以明确地地定义一个边边框可以被如如何缩放或平平铺。四、关于CSS3和HTML5CSS3的新功能盒阴影box-shadow属性可以对HTML元素添加阴影影而不用额外外的标签或背背景图片。类类似text-shadow属性，它增强强设计的细节节；通过一些些属性的选择择设置，即可可实现美妙的的阴影效果。。四、关于CSS3和HTML5CSS3的新功能盒子大小根据CSS

2.1规范，在计算算盒子的总大大小的时候，，元素的边框框和padding应该被加入到到宽度和高度度之中的。但但是众所周知知，旧的浏览览器却以它们们自己的非常常有“创意””的方式来解解释这个规范范。box-sizing属性允许指定定浏览器如何何计算一个元元素的宽度和和高度。四、关于CSS3和HTML5CSS3的新功能媒体查询媒体查询（mediaqueries）可以为不同同的设备，基基于设备特性性定义不同的的样式。比如如，在可视区区域小于480

px的时候，你可可能想让网站站的侧栏显示示在主内容的的下边，这样样它就不应该该浮动并显示示在右侧了。。四、关于CSS3和HTML5CSS3的新功能语音CSS3的语音模块可可以为屏幕

人人文库> 全部分类> 专业文献 > 生活休闲

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论