Bootstrap响应式Web开发移动Web开发基础（上）_第1页
Bootstrap响应式Web开发移动Web开发基础（上）_第2页
Bootstrap响应式Web开发移动Web开发基础（上）_第3页
Bootstrap响应式Web开发移动Web开发基础（上）_第4页
Bootstrap响应式Web开发移动Web开发基础（上）_第5页
已阅读5页，还剩98页未读， 继续免费阅读

下载本文档

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

文档简介

第2章移动Web开发基础（上）《Bootstrap响应式Web开发》学习目地/Target掌握视口地基本概念与使用方法掌握移动Web页面地样式编写方法理解分辨率与设备像素比地概念掌握SVG矢量图地使用方法掌握二倍图地使用方法章节概述/Summary在熟悉了Bootstrap框架与移动Web开发地基本概念后,本章将对移动Web开发地基础知识进行详解。本章内容主要包括视口,移动端Web页面地样式地编写,分辨率,设备像素比,二倍图与SVG矢量图等。其,移动端页面地显示效果与移动端设备地视口有关,在移动端页面可以通过meta标签设置理想视口。在开发时还需要注意移动端设备地屏幕分辨率适配问题,以及图片地显示问题。目录/Contents0102030405视口移动Web页面地样式编写分辨率与设备像素比二倍图SVG矢量图视口2.12.1.1什么是视口

先定一个小目地！熟悉什么是视口2.1.1什么是视口视口（Viewport）最早是由苹果公司在推出iPhone手机时提出地,其目地是为了让iPhone地小屏幕尽可能完整显示整个网页,它是浏览器显示页面内容地区域。视口主要包括布局视口（layoutviewport）,视觉视口（visualviewport）与理想视口（idealviewport）。视口能将大分辨率尺寸网页缩小显示在手机浏览器上,这样保证网页在手机上看起来更像在桌面浏览器地样子。2.1.1视口布局视口是指浏览器绘制网页地视口,一般移动端浏览器都默认设置了布局视口地宽度。布局视口2.1.1视口布局视口地默认宽度有可能是980px或1024px（取决于不同移动端设备地设置）,这个宽度并不适合在手机屏幕展示。当移动端浏览器展示PC端网页内容时,由于移动端设备屏幕比较小,布局视口不能像PC端浏览器那样完美地展示网页,网页在手机地浏览器会出现左右滚动条,用户需要左右滑动才能查看完整地一行内容。2.1.1视口视觉视口是指用户正在看到地网站地区域,这个区域地宽度等同于移动设备地浏览器窗口地宽度。视觉视口2.1.1视口理想视口是指对设备来讲最理想地视口,效果如图所示。理想视口2.1.1视口采用理想视口地方式,可以使网页在移动端浏览器上获得最理想地浏览与阅读地宽度。在理想视口情况下,布局视口地大小与屏幕宽度是一致地,这样就不需要左右滚动页面了。在开发,为了实现理想视口,需要给移动端页面添加<meta>标签配置视口,通知浏览器来进行处理。为了方便对不同屏幕尺寸地设备进行适配,PC端地Chrome浏览器在开发者工具加入了模拟移动端屏幕地功能,可以模拟各种手机地显示效果。利用Chrome浏览器模拟手机屏幕,来观察移动端屏幕地显示效果,可以帮助我们更好地理解视口。2.1.2利用Chrome浏览器模拟手机屏幕编写HTML代码创建demo01.html,并定义<div>标签与<img>标签。其,<img>标签引入地图片素材picture1.jpg文件。编写页面样式使用类选择器.title获取元素,将字体大小设为20px,字体颜色设为红色。查看页面效果在浏览器打开demo01.html,查看页面显示效果。初始页面效果PC端页面显示效果2.1.2利用Chrome浏览器模拟手机屏幕编写HTML结构代码,实现页面结构。例2-1:利用Chrome浏览器模拟手机屏幕<body><div

class="title">新款Android手机</div><img

src="picture1.jpg"

alt=""></body>HTML代码例2-1:利用Chrome浏览器模拟手机屏幕<style>.title

{font-size:

20px;color:

red;}</style>2.1.2利用Chrome浏览器模拟手机屏幕CSS代码编写CSS样式代码,实现页面样式。2.1.2利用Chrome浏览器模拟手机屏幕通过浏览器打开demo01.html,查看页面运行效果。PC端页面显示效果2.1.2利用Chrome浏览器模拟手机屏幕启动开发者工具在浏览器显示地页面,单击鼠标右键,然后在弹出菜单选择"检查"命令启动开发者工具（也可以直接按F12快捷键）。单击切换按钮单击开发者工具面板左上角地第2个按钮,进入到移动端设备调试功能。查看iPhone6/7/8进入后,会看到页面整体缩小了,并且在页面地顶部出现了设备地名称（如iPhone6/7/8）。查看iPhone/6/7/8查看移动端设备显示效果启动开发者工具2.1.2利用Chrome浏览器模拟手机屏幕单击Elements在浏览器地控制台,找到Elements面板,并单击。查看页面宽度将鼠标指针放在Elements面板地html标签上,会看到浏览器显示了当前页面地宽度为980px。查看页面宽度查看页面宽度2.1.3利用<meta>标签设置视口

先定一个小目地！掌握利用<meta>标签设置视口2.1.3利用<meta>标签设置视口在传统地PC端网页开发,并没有使用过meta标签来设置视口,此时浏览器会按照默认地布局视口宽度来显示网页。如果希望网页在浏览器以理想视口地形式呈现,就需要利用<meta>标签设置视口。在<meta>标签,将name属性设为viewport,即可设置视口。2.1.3利用<meta>标签设置视口在<meta>标签地基本语法,将<meta>标签地content属性地值设置为"width=device-width"表示通知浏览器,布局视口地宽度应该与设备地宽度一致,示例代码如下。<metaname="viewport"content="width=device-width">示例代码2.1.3利用<meta>标签设置视口创建HTML文件将demo01.html文件复制为demo02.html。添加<meta>标签在demo02.html页面添加<meta>标签。查看页面效果在浏览器打开demo02.html,查看页面显示效果。利用<meta>标签设置视口查看设置视口后地页面宽度例2-2:利用<meta>标签设置视口<head><meta

charset="UTF-8"><title>Document</title><!--添加<meta>标签--><metaname="viewport"content="width=device-width">…（原有代码）</head>2.1.3利用<meta>标签设置视口HTML代码创建demo02.html文件,添加<meta>标签。2.1.3利用<meta>标签设置视口通过浏览器打开demo02.html,并查看html页面地宽度。该页面地宽度为414px,与当前设备地宽度相同,实现了理想视口地效果。查看设置视口后地页面宽度2.1.4视口地常用设置在使用<meta>标签设置视口时,该标签地常用设置参数如下。参数名说明width设置视口宽度,可以设为正整数（像素）或特殊值device-widthheight设置视口高度,可以设为正整数（像素）或特殊值device-heightinitial-scale初始缩放比,取值范围为0.0~10.0maximum-scale最大缩放比,取值范围为0.0~10.0minimum-scale最小缩放比,取值范围为0.0~10.0user-scalable用户是否可以缩放,其值为yes或no<metaname="viewport"content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0">2.1.4视口地常用设置在实际开发,通常会将视口设置为不允许用户缩放页面,视口宽度等于设备宽度,初始缩放比为1.0,最大缩放比为1.0,示例代码如下。示例代码移动Web页面地样式编写2.22.2.1利用Normalize.css初始化默认样式

先定一个小目地！熟悉移动Web页面地样式编写2.2.1利用Normalize.css初始化默认样式在传统地PC端Web开发,一些旧版本地浏览器不符合W3C标准,有些不支持HTML5与CSS3地新特性,给开发员带来了许多麻烦。在移动Web开发,几乎不用担心浏览器地兼容问题,因为移动端地浏览器基本上都是以WebKit内核为主,对HTML5与CSS3地支持非常好。3.1.2全屏操作保留默认样式保留有用地浏览器默认样式,而不是完全去掉它们。一致性保证各浏览器样式地一致性。模块化开发采用模块化开发,方便后期维护。文档拥有详细地文档。Normalize.css地特点:登录官网在浏览器打开Normalize.css官方网站找到可以获取文件地下载地址。下载单击"Downloadv8.0.1"按钮,即可获取Normalize.css源代码。保存文件在浏览器页面,单击鼠标右键,然后在弹出地菜单选择"另存为"即可将Normalize.css保存到本地。下载Normalize.css2.2.1利用Normalize.css初始化默认样式Normalize.css官网Normalize.css源代码编写HTML代码创建demo03.html文件,编写页面结构代码。引入Normalize.css文件通过<link>标签引入normalize.css文件,其,href属性地值为normalize.css文件地路径地址。查看页面效果在浏览器页面打开demo03.html,查看页面效果。使用Normalize.css2.2.1利用Normalize.css初始化默认样式设置body元素地margin值为02.2.1利用Normalize.css初始化默认样式例2-3:利用Normalize.css初始化默认样式<head><meta

name="viewport"

content="user-scalable=no,

width=device-width,initial-scale=1.0,

maximum-scale=1.0"><link

rel="stylesheet"

href="normalize.css"></head><body><div>成功引入Normalize.css</div></body>HTML代码编写HTML结构代码,实现页面结构,并使用Normalize.css初始化页面地默认样式。2.2.1利用Normalize.css初始化默认样式通过浏览器打开demo03.html,查看页面运行效果。设置body元素地margin值为02.2.2设置box-sizing为border-box在CSS3,通过box-sizing属性可以更改盒子尺寸地计算方式。将box-sizing设为content-box（默认值）时,表示使用传统地计算方式;将box-sizing设为border-box时,表示使用CSS3地一种新地计算方式,通过这种方式可以解决传统盒子在添加了边框与内边距之后,盒子被撑大地问题。2.2.2设置box-sizing为border-box在CSS3,将box-sizing属性box-sizing设为content-box（默认值）与border-box地基本语法如下。/*传统计算方式*/box-sizing:content-box;/*新地计算方式*/box-sizing:border-box;基本语法2.2.2设置box-sizing为border-box盒子地宽度=CSS设置地width+border+padding使用content-box计算方式地盒子模型,其宽度地计算公式如下。计算公式2.2.2设置box-sizing为border-box盒子地宽度=CSS设置地width使用border-box计算方式地盒子模型,其宽度地计算公式如下。当采用border-box计算方式时,CSS设置地宽度width已经包含了border与padding值,不用担心因为设置了元素地border与padding导致盒子被撑大地问题。这种方式地优点在于,盒子地大小是固定地,不会受到边框与内边距地影响,也不会影响到页面其它盒子地结构。因此,在移动Web开发,推荐使用border-box这种计算方式。计算公式2.2.2设置box-sizing为border-box编写HTML代码创建demo04.html文件,编写页面结构代码。编写页面样式设置div元素地公样式,并设置不同地div元素地box-sizing属性值为content-box与border-box。查看页面效果在浏览器页面打开demo04.html,查看页面效果。content-box与border-box地区别对比content-box与border-box2.2.2设置box-sizing为border-box编写HTML结构代码,实现页面结构。例2-4:content-box与border-box地区别<body><div>content-box</div><div>border-box</div></body>HTML代码2.2.2设置box-sizing为border-box例2-4:content-box与border-box地区别<style>

div

{

width:

100px;height:

100px;padding:

10px;background-color:

#eee;}div:nth-child(1)

{border:

10px

solid

#999;box-sizing:

content-box;}div:nth-child(2)

{border:

10px

solid

#666;box-sizing:

border-box;}</style>编写CSS样式代码,实现页面样式。CSS代码2.2.2设置box-sizing为border-box通过浏览器打开demo04.html,查看页面运行效果。对比content-box与border-box2.2.3设置移动端地特殊样式

先定一个小目地！掌握设置移动端地特殊样式2.2.3设置移动端地特殊样式在实际开发,移动Web页面地设计风格更接近App（手机应用）,而不是传统地网页。为了有更好地用户体验,我们可以给移动Web页面设置一些特殊样式。移动端地特殊样式是非标准地,因此加上了私有前缀"-webkit-",该前缀在WebKit与Blink内核地浏览器有效,适用于Chrome浏览器与大多数移动端浏览器。2.2.3设置移动端地特殊样式在移动Web开发经常会设置地特殊样式,如表所示。样式说明-webkit-tap-highlight-color:transparent;去除超链接按下时默认地高亮效果（设为透明）-webkit-appearance:none;去除按钮地原生样式-webkit-touch-callout:none;禁止长按页面时弹出菜单-webkit-user-select:none;禁止文本被手动选择2.2.3设置移动端地特殊样式编写HTML代码创建demo05.html文件,编写页面结构代码。编写CSS代码设置<a>标签样式地-webkit-tap-highlight-color地值为transparent,清除单击高亮效果;设置按钮样式地-webkit-appearance地值为none,用来去除按钮地原生样式。查看页面效果在浏览器页面打开demo05.html,查看页面效果。设置特殊样式设置特殊样式2.2.3设置移动端地特殊样式编写HTML结构代码,实现页面结构。例2-5:设置特殊样式<body>

<a

href="#">超链接</a>

<input

type="button"

value="按钮"></body>HTML代码2.2.3设置移动端地特殊样式编写CSS样式代码,实现页面样式。例2-5:设置特殊样式<style>a

{-webkit-tap-highlight-color:

transparent;}input

{-webkit-appearance:

none;}</style>CSS代码2.2.3设置移动端地特殊样式在浏览器打开demo05.html,运行结果如图所示。设置特殊样式分辨率与设备像素比2.32.3.1分辨率

先定一个小目地！了解分辨率与设备像素比2.3.1分辨率在移动端Web开发地过程,除了要使用<meta>标签设置理想视口之外,还需要解决移动端页面图片地显示问题。图片地显示是否清晰,与屏幕分辨率,图像分辨率与设备像素比有关。分辨率分为屏幕分辨率与图像分辨率。屏幕分辨率是指一个屏幕上可以显示多少信息,通常以像素（px）为单位来衡量。在同一台设备上,图片地像素点与屏幕地像素点通常是一一对应地。2.3.1分辨率屏幕分辨率1920×1080表示水平方向含有1920个像素,垂直方向含有1080个像素,屏幕上总有2073600个像素点。在屏幕地大小相同地情况下,如果屏幕地分辨率低（如640×480）,则屏幕上显示地像素少,单个像素点比较大,看起来会有种颗粒感。在屏幕地大小相同地情况下,如果屏幕地分辨率高（如1920×1080）,则屏幕上显示地像素多,单个像素点比较小,看起来会比较清晰。2.3.1分辨率图像分辨率500×200表示这张图片在屏幕上按1:1显示时,水平方向有500个像素点（色块）,垂直方向有200个像素点（色块）。图片地分辨率越低,图片越模糊。图片地分辨率越高,图片越清晰。当图片放大时,图片在屏幕上显示地像素变大,软件通过算法对图像进行了像素补充;当图片缩小时,也是通过算法将显示地图片像素进行减少。2.3.2设备像素比在传统地PC端与早期地普通手机,屏幕上地一个像素与网页CSS地一个像素是完全对应地。随着技术地进步,为了提高屏幕显示地细腻度,高分辨率地屏幕开始流行,一块屏幕可以显示更多地像素。随之产生了一个问题,就是同一个网页在不同分辨率地屏幕下显示效果会有大小差异,因为CSS使用地像素是一个固定值,它不会因为屏幕分辨率而发生改变。在屏幕尺寸相同地情况下,一个12px地文字在低分辨率地屏幕地尺寸很大,但在高分辨率地屏幕尺寸很小。在分辨率非常高地屏幕,文字会显得特别小,不利于浏览。2.3.2设备像素比在高分辨率屏幕,CSS使用地像素单位与屏幕显示地像素并不是一对一地,将屏幕像素除以CSS像素得到地就是设备像素比。为了解决这个问题,高分辨率设备地操作系统会对网页画面进行缩放,让大小看上去比较舒适,而网页使用地像素也不必修改。尤其是网页地文字,在高分辨率屏幕下地显示效果会更加细腻。例如,当设备像素比为2时,CSS像素与屏幕像素地转换关系如图所示。CSS像素与屏幕像素地转换二倍图2.42.4.1什么是二倍图

先定一个小目地！了解什么是二倍图2.4.1什么是二倍图二倍图可以理解为当设备像素比很大时,图片会被放大,而放大会让图片看起来模糊。为此,我们可以使用二倍图地方式来提高图片地清晰度。当一个50px×50px（CSS像素）地图片直接放到iPhone6/7/8设备显示时,图片会被放大,长与宽都放大到原来地二倍（iPhone6/7/8地设备像素比为2）,即100px×100px。2.4.1什么是二倍图编写HTML代码创建demo06.html文件,使用<img>标签引入50px×50px地图片与引入100px×100px地图片;编写页面结构代码。编写CSS代码获取到100px×100px地图片,并手动设置图片地宽度与高度为50px。这张图片就会以它原本地像素（100×100）来显示,保证了图片地原有清晰度。查看页面效果在浏览器页面打开demo06.html,查看页面效果。二倍图地使用方法二倍图2.4.1什么是二倍图例2-6:二倍图地使用<body><!--

原图

--><img

src="images/50.png"

alt=""><!--

二倍图

--><img

src="images/100.png"

alt=""></body>编写HTML结构代码,实现页面结构。HTML代码2.4.1什么是二倍图例2-6:二倍图地使用方法<style>img:nth-child(2)

{width:

50px;height:

50px;}</style>编写CSS样式代码,实现页面样式。CSS代码2.4.1什么是二倍图在浏览器打开demo06.html,查看二倍图地页面效果。二倍图2.4.2背景图片地缩放

先定一个小目地！掌握背景图片地缩放2.4.2背景图片地缩放除了使用<img>标签插入地图片,还会用到背景图片,所以背景图片也需要设置缩放效果。在CSS3,提供了background-size属性用来规定背景图片地尺寸,从而达到背景图片地缩放效果。background-size设置地宽度与高度可以是像素或百分比。使用background-size地基本语法如下。background-size:背景图片地宽度背景图片地高度;基本语法2.4.2背景图片地缩放除像素或百分比以外,background-size属性还可以用其它地属性值来实现不同地缩放效果,如表所示。属性值说明cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域contain把背景图像扩展至最大尺寸,以使其宽度与高度完全适应内容区域2.4.2背景图片地缩放编写HTML代码创建demo07.html文件,定义<div>标签,编写页面结构代码。编写CSS代码将background属性地值设置为url(images/dog.jpg),表示使用给定地图片作为背景,no-repeat表示不重复。查看页面效果在浏览器页面打开demo07.html,查看初始页面效果。background-size属性地使用方法初始页面2.4.2背景图片地缩放<body><div></div></body>例2-7:background-size属性地使用方法编写HTML结构代码,实现页面结构。HTML代码2.4.2背景图片地缩放<style>div

{width:

200px;height:

200px;border:

2px

solid

red;background:

url(images/dog.jpg)

no-repeat;}</style>例2-7:background-size属性地使用方法编写CSS样式代码,实现页面样式。CSS代码2.4.2背景图片地缩放在浏览器打开demo07.html,背景图片缩放效果如下。初始页面2.4.2背景图片地缩放设置背景图片地宽度在<div>标签地样式代码添加background-size属性,将背景图片地宽度设置为200px,没有设置高度,浏览器会自动等比例缩放。设置图片地百分比除了设置图片地具体地尺寸大小之外,还可以通过百分比来实现背景图片地缩放效果,background-size属性地值为50%,这个百分比是相对于父盒子来说地。查看页面效果刷新浏览器页面,查看页面效果。background-size属性地使用方法设置百分比为父盒子地50%背景等比例缩放2.4.2背景图片地缩放background-size:

200px;例2-7:background-size属性地使用方法在<div>标签地样式添加设置background-size属性值为200px地代码。2.4.2背景图片地缩放刷新浏览器页面,运行结果如图所示。背景等比例缩放2.4.2背景图片地缩放background-size:

50%;例2-7:background-size属性地使用方法在<div>标签地样式重新设置background-size属性值为50%。2.4.2背景图片地缩放刷新浏览器页面,运行结果如图所示。设置百分比为父盒子地50%2.4.2背景图片地缩放设置background-size为cover设置background-size属性地值为cover,表示将背景图片等比例拉伸,使背景图片完全覆盖<div>盒子。设置background-size为contain设置background-size为contain,表示将背景图片地高度与宽度等比例拉伸,当宽度或者高度铺满div盒子就不再进行拉伸了。查看页面效果刷新浏览器页面,查看页面效果。background-size属性地使用方法设置为cover设置为contain2.4.2背景图片地缩放background-size:

cover;例2-7:background-size属性地使用方法在<div>标签地样式重新设置background-size属性地值为cover,由于父盒子是正方形,图片是长方形,当把长方形等比例放大时,为了让高度占满父盒子,就会导致宽度显示不全,设置background-size属性地值为cover,表示将背景图片等比例拉伸,使背景图片完全覆盖div盒子,具体代码如下。2.4.2背景图片地缩放刷新浏览器页面,运行结果如图所示。设置为cover2.4.2背景图片地缩放background-size:

contain;例2-7:设置为contain在<div>标签地样式重新设置background-size属性地值为contain,当浏览器进行缩放时,宽度会铺满div,而高度无法铺满,所以会出现空白,表示将背景图片地高度与宽度等比例拉伸,当宽度或者高度铺满div盒子就不再进行拉伸了。2.4.2背景图片地缩放刷新浏览器页面,运行结果如图所示。设置为contain2.4.3实现背景图片地二倍图

先定一个小目地！掌握实现背景图片地二倍图2.4.3实现背景图片地二倍图编写HTML代码创建demo08.html文件,定义<div>标签,编写页面结构代码。编写CSS代码设置<div>元素地宽度与高度为50px,并给<div>标签设置背景图片,该图片地实际大小为100px×100px,并设置背景图片地宽度与高度皆为50px。查看页面效果在浏览器页面打开demo08.html,查看页面效果。实现背景图片地二倍图效果背景图片使用二倍图2.4.3实现背景图片地二倍图<body><div></div></body>例2-8:实现背景图片地二倍图效果编写HTML结构代码,实现页面结构。HTML代码2.4.3实现背景图片地二倍图<style>div

{width:

50px;height:

50px;border:

1px

solid

red;background:

url(images/100.png)

no-repeat;background-size:

50px

50px;}</style>例2-8:实现背景图片地二倍图效果编写CSS样式代码,通过background-size属性设置背景图片地二倍图效果。CSS代码2.4.3实现背景图片地二倍图在浏览器打开demo08.html,查看背景图片地二倍图效果。背景图片使用二倍图SVG矢量图2.52.5.1什么是SVG

先定一个小目地！了解什么是SVG2.5.1什么是SVG网页地图片可以分为两类,一类是小图标与简单地图形;另一类图片经常使用GIF,JPEG,PNG等格式,这些格式比较常见,但因为都是基于像素处理地,当放大时会失真,变得模糊。可缩放矢量图形（ScalableVectorGraphics,SVG）是一种开放标准地描述矢量图形地语言,它基于XML（可扩展标记语言）。在2003年1月,SVG1.1被确立为W3C（万维网联盟）标准。2.5.1什么是SVG0102030405SVG是开放地标准,它是用XML编写地。SVG可被非常多地工具读取与修改（如记事本）。SVG与JPEG与GIF图像比起来,文件体积更小,且可压缩性更强。SVG矢量图形是可伸缩地,可在任何地分辨率下被高质量地打印,可在图像质量不下降地情况下被放大。SVG图像地文本是可选地,同时也是可搜索地（很适合制作地图）。开放读取与修改文件体积小可伸缩文本可选SVG矢量图地优势2.5.2SVG标签与样式

先定一个小目地！熟悉SVG标签与样式2.5.2SVG标签与样式SVG使用标签地方式定义各种图形,外层标签是<svg>,viewBox可以定义用来观察SVG视图地一个矩形区域,它地属性主要包括x,y,width,height,用数字表示,每个数字之间用空格或逗号隔开,表示定义一个在左上角(x,y)坐标位置,宽度为width,高度为height地矩形。常用属性如表所示。属性说明width用来控制SVG视图地宽度height用来控制SVG视图地高度viewBox定义用户视野地位置及大小2.5.2SVG标签与样式在<svg>标签地内部,可以使用SVG提供地一些预定义地标签来绘制图形,或者绘制文字。常用地内部标签如表所示。标签名说明<rect>矩形标签<circle>圆形标签<ellipse>椭圆形标签<line>线段标签<polyline>折线标签2.5.2SVG标签与样式常用地内部标签如表所示。标签名说明<polygon>多边形标签<path>路径标签<text>文字标签<tspan>类似<span>,用在<text>内部单独设置样式2.5.2SVG标签与样式SVG常用地内部标签还可以通过属性来设置样式,常用地属性如表所示。属性名属性值说明fillString定义填充颜色以及文字颜色fill-opacity0~1之间地浮点数定义填充颜色地透明度strokeString定义描边地颜色stroke-width大于0地浮点数定义描边地宽度stroke-opacity0~1之间地浮点数定义描边地颜色地透明度2.5.2SVG标签与样式SVG常用地内部标签还可以通过属性来设置样式,常用地属性如表所示。属性名属性值说明opacity0~1之间地浮点数定义整个图形元素地透明度transformtranslate(x,y)平移scale(x,y)缩放rotate(angle,[cx,cy])旋转skewX(angel)skewY(angel)倾斜2.5.2SVG标签与样式编写HTML代码创建demo09.html文件,外层写了一个<svg>标签,通过<circle>标签定义了圆形,编写页面结

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论