网页制作技巧

1.带背景网页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>背景音乐</title>

</head>

<body>
	<!--带背景音乐的网页-->
	
	<!--controls="middleconsole"表示有一个控制器-->
	<!--<embed src="music1.mp3" width="300" height="200" autostart=true controls="middleconsole" ></embed>-->
	<embed src="music1.mp3" width="300" height="200" autostart=true hidden="true" ></embed>
</body>
</html>

2.网页定时跳转

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!--<meta http-equiv="refresh" content="时间（秒） , url=(网页)" />-->
<meta http-equiv="refresh" content="10 , url=other.html" />
<title>网页定时跳转</title>

</head>

<body>
	<!--网页定时跳转-->
</body>
</html>

3.网页定时刷新

只需要把上面代码中的 url 写成本身网页的url，这样就能实现不停刷新自身的功能.实际上是一直跳到本身的url.

4.返回页面顶部加超链接的使用

<!--href = # 返回页面本身,可以刷新-->
<a href="#"></a>
<a href="#top">返回顶部</a>

<!--href = （#+锚点）页面可以显示到锚点处，经常用于网页类容过多时设置-->
<a href="#1" >跳到锚点1处</a>
<!--还可以跳到其他页面的锚点,但是其它页面也要先设置好锚点。 如other.html页面的锚点1-->
<a href="other.html#1" >跳到other.html的锚点1处</a>

<!--用 name 设置锚点-->
<a name="1">这是一个位置，里面可以放其他标签类容</a>
<a name="2">这是一个位置，里面可以放其他标签类容</a>
<a name="3">这是一个位置，里面可以放其他标签类容</a>

<!--连接到email-->
<!--<a href="mailto:邮件地址"></a>-->
<!--前提是电脑上有可以发邮件的软件 如：网易邮箱大师等-->
<a href="mailto:******@qq.com">发送邮件到我的邮箱</a>

<!--还可以用于下载文件-->
<!--文件可以是 rar zip mp3 exe 等 ,点击链接后就可以下载-->
<a href="music.rar">音乐包下载</a>

5.给超链接加文字提示 + 给图片加文字提示

<a href="other.html" title="这是提示内容">鼠标放上，会有文字提示</a>
	<!--图片文字提示用 alt不兼容，可以用 title-->
	<!--<img src="img1.jpg" alt="这是提示的内容" /> -->
	<img src="img1.jpg" title="这是提示的内容" />

6.图片可以设置边框，但边框的颜色不能变。可以把<img>放在<a>里面，这样图片边框的颜色与链接的颜色有关了.

7.用水平线<hr>制作垂直线

<hr>有两个属性一个是 width决定宽度，一个是size决定高度，所以

8.布局技巧

用1行3列的表格，中间宽度设为1，用颜色填充，左右两边放入内容。

实现了用分割线分割左右内容的效果

9.浏览器滚动条的隐藏和显示和自动隐藏显示(hidden scroll auto)

<body style=
"overflow-x: scroll; <!--x方向上的滚动条始终显示-->
overflow-y: hidden; <!--y方向上的滚动条始终隐藏-->
"
>

</body>

猜你喜欢