国开《Dreamweaver网页设计》形考任务四!

活动1:采用CSS样式来设置背景、标题和段落的颜色。

HTML代码如下:

<html>

<head>

</head>

<body>

这是标题 1

这是标题 2

这是段落

这个段落设置了内边距。

</body>

</html>

活动2:使用百分比或者像素值设置行间距。

HTML代码如下:

<html>

<head>

</head>

<body>

这是拥有标准行高的段落。

在大多数浏览器中默认行高大约是 110% 到 120%。

这是拥有标准行高的段落。

这是拥有标准行高的段落。

这是拥有标准行高的段落。

这个段落拥有更小的行高。

这个段落拥有更小的行高。

这个段落拥有更小的行高。

这个段落拥有更小的行高。

这个段落拥有更小的行高。

这个段落拥有更大的行高。

这个段落拥有更大的行高。

这个段落拥有更大的行高。

这个段落拥有更大的行高。

这个段落拥有更大的行高。

</body>

</html>

参考答案

<html>

<head>

<style type=”text/css”>

body {background-color: yellow}

h1 {background-color: #00ff00}

h2 {background-color: transparent}

p {background-color: rgb(250,0,255)}

p.no2 {background-color: gray; padding: 20px;}

</style>

</head>

<body>

这是标题 1

这是标题 2

这是段落

这个段落设置了内边距。

</body>

</html>

(1)百分比

<html>

<head>

<style type=”text/css”>

p.small {line-height: 90%}

p.big {line-height: 200%}

</style>

</head>

<body>

这是拥有标准行高的段落。

在大多数浏览器中默认行高大约是 110% 到 120%。

这是拥有标准行高的段落。

这是拥有标准行高的段落。

这是拥有标准行高的段落。

这个段落拥有更小的行高。

这个段落拥有更小的行高。

这个段落拥有更小的行高。

这个段落拥有更小的行高。

这个段落拥有更小的行高。

这个段落拥有更大的行高。

这个段落拥有更大的行高。

这个段落拥有更大的行高。

这个段落拥有更大的行高。

这个段落拥有更大的行高。

</body>

</html>

(2)像素值

<html>

<head>

<style type=”text/css”>

p.small{ line-height: 10px }

p.big{ line-height: 30px }

</style>

</head>

<body>

这是拥有标准行高的段落。

在大多数浏览器中默认行高大约是 20px。

这是拥有标准行高的段落。

这是拥有标准行高的段落。

这是拥有标准行高的段落。

这是拥有标准行高的段落。

这是拥有标准行高的段落。

这个段落拥有更小的行高。

这个段落拥有更小的行高。

这个段落拥有更小的行高。

这个段落拥有更小的行高。

这个段落拥有更小的行高。

这个段落拥有更小的行高。

这个段落拥有更小的行高。

这个段落拥有更大的行高。

这个段落拥有更大的行高。

这个段落拥有更大的行高。

这个段落拥有更大的行高。

这个段落拥有更大的行高。

这个段落拥有更大的行高。

这个段落拥有更大的行高。

</body>

</html>

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码