网页设计中的可缩放矢量图形(SVG)入门教程

网页设计中的可缩放矢量图形(SVG)入门教程

Scalable Vector Graphics

可缩放矢量图形(SVG)是矢量图形家族的一部分。相比其他光栅图形(JPEG、GIF 和 PNG),SVG 图形具有更多的优势。本文将探讨 SVG 图形的基本概念和在 HTML5 中的使用。学习绘制、过滤器、渐变、文本和将 SVG XML 添加到网页。
各种浏览器的支持情况 阅读更多

web前端开发常用代码整理

web前端开发常用代码整理

IE条件注释

条件注释简介

  1. IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法。
    条件注释只能用于IE5以上,IE10以上不支持。
  2. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准。
  3. 条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
  4. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

阅读更多

网页编写代码工具-NOtePad++快捷键应用大全

网页编写代码工具-NOtePad++快捷键应用大全

Notepad++ 快捷键 大全,

notepad++也情有独钟,最近发现了一个快捷键,就是选中单词,ctrl+shift+enter。不过现在想知道一个快捷键,假设有三行代码,选中后一般按TAB就可以三行全部缩进.

Notepad++绝对是windows下进行程序编辑的神器之一,要更快速的使用以媲美VIM,必须灵活掌握它的快捷键,下面对notepad++默认的快捷键做个整理; 阅读更多

泉州浮桥网页设计培训班实例笔记-DHTML CSS Positioning (CSS-P)

DHTML CSS Positioning (CSS-P)

CSS 用于为 HTML 元素添加样式。

实例

注释:大多数 DHTML 实例需要IE 4.0+、Netscape 7+ 或者 Opera 7+!

position:relative

如何相对于元素的正常位置来定位这个元素。

<html>

 

<head>

<style>

h1.ex1

{

position:relative;

left:20px;

}

h1.ex2

{

position:relative;

left:-20px;

}

</style>

</head>

 

<body>

<h1>Normal Heading</h1>

<h1 class=”ex1″>Heading +20</h1>

<h1 class=”ex2″>Heading -20</h1>

 

<p>相对定位相对于元素的正常位置对其进行移动。</p>

<p>”left:20″ 给元素的 LEFT 位置增加 20 像素。</p>

<p>”left:-20″ 从元素的 LEFT 位置减去 20 像素。</p>

</body>

 

</html>

position:relative

如何相对其正常位置来定位所有的标题。

<html>

 

<head>

<style>

h1

{

position:relative;

left:40px;

}

</style>

</head>

 

<body>

<h1>标题 A</h1>

<p>这是段落。这是段落。这是段落。这是段落。这是段落。</p>

<h1>标题 B</h1>

<p>这是段落。这是段落。这是段落。这是段落。这是段落。</p>

<h1>标题 C</h1>

<p>这是段落。这是段落。这是段落。这是段落。这是段落。</p>

<h1>标题 D</h1>

<p>这是段落。这是段落。这是段落。这是段落。这是段落。</p>

</body>

 

</html>

position:absolute

如何使用一个绝对值来定义一个元素。

<html>

<head>

<style>

h1.x

{

position:absolute;

left:100px;

top:150px;

}

</style>

</head>

 

<body>

 

<h1 class=”x”>这是一个标题</h1>

 

<p>通过绝对定位,可以把元素放置页面的任何位置。</p>

 

<p>这个标题的 LEFT 位置距离页面左侧 100 像素。TOP 位置距离页面顶端 150 个像素。</p>

 

</body>

</html>

您可以在页面下方找到更多的例子。

 

哪些属性可与 CSS-P 一同使用?

首先,此元素必须指定 position 属性(relative 或 absolute)。

然后,我就可以设置下列 CSS-P 属性了:

  • left – 元素的左侧位置
  • top – 元素的顶端位置
  • visibility – 指定元素应当可见还是隐藏
  • z-index – 元素的堆叠次序
  • clip – 元素裁剪
  • overflow – 如何处理溢出的内容

Position

CSS 的 position 属性允许您控制文档中某个元素的定位。

position:relative

position:relative 属性可向对于一个元素的当前位置来定位此元素。

下面的例子把这个 div 元素定位到距离其正常位置右方 10 像素的位置:

div

{

position:relative;

left:10;

}

position:absolute

position:absolute 属性根据距离窗口的 margin 来定位一个元素。

下面的例子把这个 div 元素定位到距离其包含块左侧 margin 的右方 10 像素的位置:

div

{

position:absolute;

left:10;

}

Visibility

visibility 属性可决定一个元素是否可见。

visibility:visible

visibility:visible 属性可使元素可见。

h1

{

visibility:visible;

}

visibility:hidden

visibility:hidden 属性可使元素不可见。

h1

{

visibility:hidden;

}

Z-index

z-index 属性用于把一个元素放置于另一个元素之后。z-index 的默认值是 0。值越高,其优先权也越高。z-index: -1 更低的优先权。

h1

{

z-index:1;

}

 

h2

{

z-index:2;

}

在上面的例子中,如果 h1 和 h2 彼此叠加,则 h2 元素会位于 h1 的上面。

Filters

filter 属性允许您向文本和图像添加更多的样式效果。

h1

{

width:100%;

filter:glow;

}

注释:若需要使用 filter 属性,请始终指定元素的宽度。

上面的例子产生下面的输出:

Header

不同的滤镜

注释:除非 background-color 属性被设置为 transparent,否则某些 Filter 属性将无法工作!

属性 参数 描述 例子
alpha ·         opacity

·         finishopacity

·         style

·         startx

·         starty

·         finishx

·         finishy

允许您设置元素的透明度 filter:alpha(

opacity=20,

finishopacity=100,

style=1,

startx=0,

starty=0,

finishx=140,

finishy=270)

blur ·         add

·         direction

·         strength

使元素模糊 filter:blur(

add=true,

direction=90,

strength=6);

chroma color 使指定的颜色透明 filter:chroma(

color=#ff0000)

fliph none 水平反转元素 filter:fliph;
flipv none 垂直反转元素 filter:flipv;
glow ·         color

·         strength

使元素发光 filter:glow(

color=#ff0000,

strength=5);

gray none 用黑白色来呈现元素 filter:gray;
invert none 用反转的颜色和亮度值来呈现元素 filter:invert;
mask color 呈现带有指定背景色和透明前景色的元素 filter:mask(

color=#ff0000);

shadow ·         color

·         direction

呈现带有阴影的元素 filter:shadow

(color=#ff0000,

direction=90);

dropshadow ·         color

·         offx

·         offy

·         positive

呈现带有阴影的元素 filter:dropshadow

(color=#ff0000,

offx=5,

offy=5,

positive=true);

wave ·         add

·         freq

·         lightstrength

·         phase

·         strength

把元素呈现为波浪状 filter:wave(

add=true,

freq=1,

lightstrength=3,

phase=0,

strength=5)

xray none 使用黑白色显示带有反转色和亮度值的元素 filter:xray;

Background

background 属性允许您选用自己的背景。

background-attachment:scroll

背景随页面滚动。

background-attachment:fixed

背景不会随页面滚动。

加强实例

Visibility

如何使某个元素不可见。你希望此元素显示还是不显示?

<html>

<head>

<style>

h1.one

{

visibility:visible;

}

h1.two

{

visibility:hidden;

}

</style>

</head>

<body>

 

<h1 class=”one”>标题 一</h1>

<h1 class=”two”>标题 二</h1>

 

<p>标题二在哪儿?</p>

 

</body>

</html>

Z-index

Z-index 可用于把一个元素放置于另一个元素之后,通过使用 Z-index 次序。

<html>

 

<head>

<style>

img.x

{

position:absolute;

left:0px;

top:0px;

z-index:-1;

}

</style>

</head>

 

<body>

 

<h1>这是一个标题</h1>

<img class=”x” src=”/i/eg_bulbon.gif” />

 

<p>默认 z-index 是 0。Z-index -1 有更低的优先级。</p>

 

</body>

Z-index

请看一下,元素的 Z-index 次序已经改变了。

<html>

 

<head>

<style>

img.x

{

position:absolute;

left:0px;

top:0px;

z-index:1;

}

</style>

</head>

 

<body>

 

<h1>这是一个标题</h1>

<img class=”x” src=”/i/eg_bulbon.gif” />

 

<p>默认 z-index 是 0。Z-index 1 有更高的优先级。</p>

</body>

</html>

Cursors

通过 CSS 来改变鼠标指针的样式。

<html>

<body>

<p>请把鼠标移动到单词上,这样会看到鼠标指针的变化:</p>

<span style=”cursor: auto”>Auto</span><br />

<span style=”cursor: crosshair”>Crosshair</span><br />

<span style=”cursor: default”>Default</span><br />

<span style=”cursor: pointer”>Pointer</span><br />

<span style=”cursor: hand”>Hand</span><br />

<span style=”cursor: move”>Move</span><br />

<span style=”cursor: e-resize”>e-resize</span><br />

<span style=”cursor: ne-resize”>ne-resize</span><br />

<span style=”cursor: nw-resize”>nw-resize</span><br />

<span style=”cursor: n-resize”>n-resize</span><br />

<span style=”cursor: se-resize”>se-resize</span><br />

<span style=”cursor: sw-resize”>sw-resize</span><br />

<span style=”cursor: s-resize”>s-resize</span><br />

<span style=”cursor: w-resize”>w-resize</span><br />

<span style=”cursor: text”>text</span><br />

<span style=”cursor: wait”>wait</span><br />

<span style=”cursor: help”>help</span><br />

</body>

</html>

Filters

使用 filter 属性来改变标题的样式。

<html>

<head>

<style>

h2

{

width:100%;

}

</style>

</head>

 

<body>

 

<h2 style=”filter:glow()”>发光</h2>

<h2 style=”filter:blur()”>模糊</h2>

<h2 style=”filter:fliph()”>Flip H</h2>

<h2 style=”filter:flipv()”>Flip V</h2>

<h2 style=”filter:shadow()”>阴影</h2>

<h2 style=”filter:dropshadow()”>阴影</h2>

<h2 style=”filter:wave(Strength=2)”>波浪</h2>

 

<p>注释:如果元素的 width 属性没有设置,那么滤镜不会起作用。</p>

</body>

</html>

Filters on Images

filter 属性也可以应用于图像,这里有一些已应用了 filter 属性的图像例子。

<html>

<head>

<style>

div

{

width:160px;

height:120px;

}

</style>

</head>

<body>

 

Alpha:

<div style=”filter:alpha(Opacity=20)”>

<img src=”/i/eg_landscape.jpg” width=”160″ height=”120″ />

</div>

 

Gray:

<div style=”filter:gray()”>

<img src=”/i/eg_landscape.jpg” width=”160″ height=”120″ />

</div>

 

Invert:

<div style=”filter:invert()”>

<img src=”/i/eg_landscape.jpg” width=”160″ height=”120″ />

</div>

 

Xray:

<div style=”filter:xray()”>

<img src=”/i/eg_landscape.jpg” width=”160″ height=”120″ />

</div>

 

Mask:

<div style=”position:absolute;left:10;top:610;”>

<img src=”/i/eg_landscape.jpg” width=”160″ height=”120″ />

</div>

 

<div style=”position: absolute; left: 10; top: 610; filter: mask(color=#ffffff); width: 160; height: 120″>

<h2>The mask value makes the text transparent</h2>

</div>

 

</body>

</html>

Watermark

当页面滚动时不会移动的背景图片。

<html>

<head>

<style>

body

{

background-attachment: fixed;

background-image: url(“/i/eg_bulboff.gif”);

background-repeat: no-repeat;

}

</style>

</head>

<body>

 

<p>请滚动页面,看看会发生什么。</p>

<br /><br /><br /><br /><br /><br /><br />

<p>请滚动页面,看看会发生什么。</p>

<br /><br /><br /><br /><br /><br /><br />

<p>请滚动页面,看看会发生什么。</p>

<br /><br /><br /><br /><br /><br /><br />

<p>请滚动页面,看看会发生什么。</p>

<br /><br /><br /><br /><br /><br /><br />

<p>请滚动页面,看看会发生什么。</p>

<br /><br /><br /><br /><br /><br /><br />

<p>请滚动页面,看看会发生什么。</p>

<br /><br /><br /><br /><br /><br /><br />

<p>请滚动页面,看看会发生什么。</p>

<br /><br /><br /><br /><br /><br /><br />

<p>请滚动页面,看看会发生什么。</p>

<br /><br /><br /><br /><br /><br /><br />

<p>请滚动页面,看看会发生什么。</p>

</body>

</html>

泉州浮桥网页设计培训班实例笔记HTML DOM 实例(十一)-Screen 对象

TableTableHeaderTableRowTableData 对象

更改表格边线的宽度

<html>

<head>

<script type=”text/javascript”>

function changeBorder()

{

document.getElementById(‘myTable’).border=”10″

}

</script>

</head>

<body>

 

<table border=”1″ id=”myTable”>

<tr>

<td>100</td>

<td>200</td>

</tr>

<tr>

<td>300</td>

<td>400</td>

</tr>

</table>

<br />

<input type=”button” onclick=”changeBorder()” value=”改变边框”>

</body></html>

更改表格的 cellPadding cellSpacing

<html>

<head>

<script type=”text/javascript”>

function padding()

{

document.getElementById(‘myTable’).cellPadding=”15″

}

function spacing()

{

document.getElementById(‘myTable’).cellSpacing=”15″

}

</script>

</head>

<body>

 

<table id=”myTable” border=”1″>

<tr>

<td>100</td>

<td>200</td>

</tr>

<tr>

<td>300</td>

<td>400</td>

</tr>

</table>

<br />

<input type=”button” onclick=”padding()” value=”改变 Cellpadding”>

<input type=”button” onclick=”spacing()” value=”改变 Cellspacing”>

</body></html>

规定表格的外部边框

<html>

<head>

<script type=”text/javascript”>

function aboveFrames()

{

document.getElementById(‘myTable’).frame=”above”

}

function belowFrames()

{

document.getElementById(‘myTable’).frame=”below”

}

</script>

</head>

<body>

 

<table id=”myTable”>

<tr>

<td>100</td>

<td>200</td>

</tr>

<tr>

<td>300</td>

<td>400</td>

</tr>

</table>

<br />

<input type=”button” onclick=”aboveFrames()” value=”显示上边框”>

<input type=”button” onclick=”belowFrames()” value=”显示下边框”>

</body></html>

规定表格的内部边线

<html>

<head>

<script type=”text/javascript”>

function rowRules()

{

document.getElementById(‘myTable’).rules=”rows”

}

function colRules()

{

document.getElementById(‘myTable’).rules=”cols”

}

</script>

</head>

 

<body>

<table id=”myTable” border=”1″>

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

<tr>

<td>Row3 cell1</td>

<td>Row3 cell2</td>

</tr>

</table>

<br />

<input type=”button” onclick=”rowRules()” value=”仅显示行边框”>

<input type=”button” onclick=”colRules()” value=”仅显示列边框”>

 

</body></html>

某一行的 InnerHTML

<html>

<head>

<script type=”text/javascript”>

function showRow()

{

alert(document.getElementById(‘myTable’).rows[0].innerHTML)

}

</script>

</head>

<body>

 

<table id=”myTable” border=”1″>

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

<tr>

<td>Row3 cell1</td>

<td>Row3 cell2</td>

</tr>

</table>

<br />

<input type=”button” onclick=”showRow()” value=”显示第一行的 innerHTML”>

 

</body></html>

表格单元的 InnerHTML

<html>

<head>

<script type=”text/javascript”>

function cell()

{

var x=document.getElementById(‘myTable’).rows[0].cells;

alert(x[0].innerHTML);

}

</script>

</head>

<body>

 

<table id=”myTable” border=”1″>

<tr>

<td>cell 1</td>

<td>cell 2</td>

</tr>

<tr>

<td>cell 3</td>

<td>cell 4</td>

</tr>

</table>

<br />

<input type=”button” onclick=”cell()” value=”显示第一个单元”>

 

</body>

</html>

为表格创建了一个标题

<html>

<head>

<script type=”text/javascript”>

function createCaption()

{

var x=document.getElementById(‘myTable’).createCaption()

x.innerHTML=”我的表格标题”

}

</script>

</head>

<body>

 

<table id=”myTable” border=”1″>

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

</table>

<br />

<input type=”button” onclick=”createCaption()” value=”创建标题”>

</body></html>

从表格删除行

<html>

<head>

<script type=”text/javascript”>

function deleteRow(r)

{

var i=r.parentNode.parentNode.rowIndex

document.getElementById(‘myTable’).deleteRow(i)

}

</script>

</head>

<body>

 

<table id=”myTable” border=”1″>

<tr>

<td>Row 1</td>

<td><input type=”button” value=”删除” onclick=”deleteRow(this)”></td>

</tr>

<tr>

<td>Row 2</td>

<td><input type=”button” value=”删除” onclick=”deleteRow(this)”></td>

</tr>

<tr>

<td>Row 3</td>

<td><input type=”button” value=”删除” onclick=”deleteRow(this)”></td>

</tr>

</table>

</body>

</html>

向表格添加新行然后向其添加内容

<html>

<head>

<script type=”text/javascript”>

function insRow()

{

var x=document.getElementById(‘myTable’).insertRow(0)

var y=x.insertCell(0)

var z=x.insertCell(1)

y.innerHTML=”NEW CELL1″

z.innerHTML=”NEW CELL2″

}

</script>

</head>

 

<body>

<table id=”myTable” border=”1″>

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

<tr>

<td>Row3 cell1</td>

<td>Row3 cell2</td>

</tr>

</table>

<br />

<input type=”button” onclick=”insRow()” value=”插入行”>

</body>

</html>

向一个已有的行中插入单元格

<html>

<head>

<script type=”text/javascript”>

function insCell()

{

var x=document.getElementById(‘tr2’).insertCell(0)

x.innerHTML=”John”

}

</script>

</head>

<body>

 

<table border=”1″>

<tr id=”tr1″>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr id=”tr2″>

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type=”button” onclick=”insCell()” value=”插入单元”>

 

</body>

</html>

对齐行中的单元格内容

<html>

<head>

<script type=”text/javascript”>

function leftAlign()

{

document.getElementById(‘header’).align=”left”;

}

</script>

</head>

<body>

 

<table width=”100%” border=”1″>

<tr id=”header”>

<th>名</th>

<th>姓</th>

</tr>

<tr>

<td>John</td>

<td>Adams</td>

</tr>

</table>

<br />

<input type=”button” onclick=”leftAlign()” value=”左对齐表格行” />

</body>

</html>

垂直对齐行中的单元格内容

<html>

<head>

<script type=”text/javascript”>

function topAlign()

{

document.getElementById(‘tr2’).vAlign=”top”;

}

</script>

</head>

<body>

 

<table width=”50%” border=”1″>

<tr id=”tr1″>

<th>名</th>

<th>姓</th>

<th>文本</th>

</tr>

<tr id=”tr2″>

<td>John</td>

<td>Adams</td>

<td>你们好。我是名字是 John Adams。

在本例中,我需要一段长的文本。

在本例中,我需要一段长的文本。

在本例中,我需要一段长的文本。</td>

</tr>

</table>

<br />

<input type=”button” onclick=”topAlign()” value=”上对齐表格行” />

 

</body>

</html>

对齐单元格中的内容

<html>

<head>

<script type=”text/javascript”>

function alignCell()

{

document.getElementById(‘td1’).align=”right”

}

</script>

</head>

<body>

 

<table border=”1″>

<tr>

<th>—–名—–</th>

<th>—–姓—–</th>

</tr>

<tr>

<td id=”td1″>John</td>

<td>Adams</td>

</tr>

</table>

 

<form>

<input type=”button” onclick=”alignCell()”

value=”对齐 ‘John’ 单元格” />

</form>

 

</body>

</html>

 

垂直对齐单元格中的内容

<html>

<head>

<script type=”text/javascript”>

function topAlign()

{

document.getElementById(‘td1’).vAlign=”top”;

document.getElementById(‘td2’).vAlign=”top”;

document.getElementById(‘td3’).vAlign=”top”;

}

</script>

</head>

<body>

 

<table width=”50%” border=”1″>

<tr>

<th>名</th>

<th>姓</th>

<th>文本</th>

</tr>

<tr>

<td id=”td1″>John</td>

<td id=”td2″>Adams</td>

<td id=”td3″>你们好。我是名字是 John Adams。

在本例中,我需要一段长的文本。

在本例中,我需要一段长的文本。

在本例中,我需要一段长的文本。</td>

</tr>

</table>

<br />

<input type=”button” onclick=”topAlign()” value=”上对齐表格单元” />

 

</body>

</html>

更改表格单元格中的内容

<html>

<head>

<script type=”text/javascript”>

function changeContent()

{

var x=document.getElementById(‘myTable’).rows[0].cells

x[0].innerHTML=”新的内容”

}

</script>

</head>

 

<body>

<table id=”myTable” border=”1″>

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

<tr>

<td>Row3 cell1</td>

<td>Row3 cell2</td>

</tr>

</table>

<form>

<input type=”button” onclick=”changeContent()” value=”改变内容”>

</form>

</body>

</html>

更改表元横跨的列数

<html><head>

<script type=”text/javascript”>

function changeColSpan()  {

document.getElementById(“td1″).colSpan=”2″;

}

</script>

</head>

<body>

<table border=”1″>

<tr>

<th>名</th>

<th>姓</th>

</tr>

<tr>

<td id=”td1″>John</td>

<td id=”td2″>Adams</td>

</tr>

</table>

<br />

<input type=”button” onclick=changeColSpan() value=”改变 colspan” />

</body></html>

泉州浮桥网页设计培训班实例笔记HTML DOM 实例(八)-Navigator

Navigator   更多学习内容:泉州电脑设计培训班

检测访问者的浏览器和版本号

<html><body>

<script type=”text/javascript”>

var browser=navigator.appName

var b_version=navigator.appVersion

var version=parseFloat(b_version)

document.write(“浏览器名称:”+ browser)

document.write(“<br />”)

document.write(“浏览器版本:”+ version)

</script>

</body></html> 阅读更多