页面的主题标记--body

页面主题标记--body

1，设置页面背景色--bgcolor

语法：<body bgcolor="#3399CC">

2，设置背景图片--background

语法：<body background="20160304428.jpg">

如果希望背景不重复显示，借助css在头部中添加style标记。

<html>
    <head>
    <title>背景图片</title>
    <style type="text/css">
        body{back-ground-repeat:no-repeat}
            //no-repeat:不重复
            //repeat-x:水平方向平铺
            //repeat-y:垂直方向平铺
    </style>
    </head>
    <body background="20160304428.jpg">
    </body>
 </html>

设置背景图片是否变化，通过bgproperties参数来设定,将bgproperties的值设为fixed,此时当拖动滚条时，就只有文字在动，背景是不变的。

<html>
    <head>
    <title>背景图片</title>
    </head>
    <body background="20160304428.jpg" bgproperties=fixed>
    </body>
 </html>

3，设置文字颜色--text

在没有对文字颜色进行单独的定义时，这一属性对页面中所有的文字都起作用。

<html>
    <head>
    <title>文字颜色</title>
    </head>
    <body bgcolor="#99CCCC" text="FF0000">
    设置页面的文字颜色
    </body>
 </html>

4，设置链接文字属性--link

在默认情况下，浏览器以蓝色作为超链接文字的颜色；访问过的文字则变为暗红色。用户在创作网页时，可以通过link参数修改链接文字的颜色。

代码：link与body标签放在一起，对网页中所有未单独设置的元素起作用，链接的颜色不是默认颜色了，变成了#CC66CC(紫色)。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面的链接文字</title>
</head>
    <body link="#CC66CC">   
        <center>设置文字的链接效果
          <br><br>
            <a href="https://hao.360.cn/">链接文字</a>
          <br><br>
        </center>
    </body>
</html>

效果图：

代码：在前代码的基础上，添加正在访问的文字颜色设置。这一属性需要用到alink参数，运行以下代码时，单击链接文字“正在访问的链接”，会发现按下鼠标时，文字颜色变成了#FFFF00（黄色）。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>页面的链接文字</title>
</head>
<body link="#CC66CC" alink="#FFFF00">
<center>设置文字的链接效果
<br><br>
<a href="https://hao.360.cn/">链接文字</a>
<br><br>
<a href="https://hao.360.cn/">正在访问的链接<a>
</center>
</body>
</html>

效果图：

代码：在前代码的基础上，添加 vlink参数设置访问后的文字链接颜色，运行以下代码时，单击链接文字“正在访问的链接”，会发现按下鼠标后，文字颜色变成了#00CC00（绿色）。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>页面的链接文字</title>
</head>
<body link="#CC66CC" alink="#FFFF00" vlink="#00CC00">
<center>设置文字的链接效果
<br><br>
<a href="https://hao.360.cn/">链接文字</a>
<br><br>
<a href="https://hao.360.cn/">已访问过的链接</a>
</center>
</body>
</html>

效果图：

5，设置边距--margin

用于定义页面的空白，也就是内容与浏览器之间的距离，其中包括上边框和左边框。在默认情况下，边距的值以像素为单位。

语法：<body topmargin=上边距的值 leftmargin=左边距的值>

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置边距</title>
</head>
<body>
设置上边距为60像素
<br>
设置左边距为40像素
</body>
</html>

效果图：

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置边距</title>
</head>
<body topmargin=60 leftmargin=40>
设置上边距为60像素
<br>
设置左边距为40像素
</body>
</html>

效果图：