案例一:
使用HBuilder 编写符合以下要求的文档:网页标题为“网页学习”,在浏览器窗口中显示“欢迎大家一起开始学习网页制作”。完成效果如图1-17所示。其中网页所有文字的颜色为blue,背景颜色为#99ffff;水平分割线粗细为5,颜色为#ff3333。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页学习</title>
<style>
body {
color: blue;
/* 文字颜色为蓝色 */
background-color: #99ffff;
/* 背景颜色为#99ffff */
}
hr {
border: 5px solid #ff3333;
/* 水平分割线粗细为5,颜色为#ff3333 */
}
</style>
</head>
<body>
<p>欢迎大家一起开始学习网页制作</p>
<hr />
</body>
</html>
网页效果图:
案例二:
使用HBuilder 编写符合以下要求的文档:网页标题为“百度搜索”,在浏览器窗口中显示“欢迎使用百度搜索”和百度图片,完成效果如图1-18所示。其中网页背景颜色为ffff33;水平分割线粗细为5,颜色为#0033ff。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度搜索</title>
<style>
body {
background-color: #ffff33;
/* 网页背景颜色 */
}
hr {
border: none;
border-top: 5px solid #0033ff; /* 水平分割线粗细和颜色 */
}
</style>
</head>
<body>
<p>欢迎使用百度搜索</p>
<img src="img/1.png" />
<hr>
</body>
</html>
网页效果图:
附图片素材放在项目目录/ing中: