HTML网页的设计

        网页是我们上网经常会用到的、也是最常见的，而网页的布局是其中吸引人注意的一个点 。对于网页的排版布局我们会用到HTML自身的一些表格、图像构建；第二种就是CSS页面布局，它比HTML自身的布局结构要精细的多。

        CSS指层叠样式表，储存在CSS文件中，它可以对HTML中的所有内容（标签、滚动条、字体、链接等）进行编辑。因为它是外部样式表，所以能极大的提升工作效率。我下面简单的介绍两种CSS中的样式，代码来自于菜鸟教程。CSS 简介 | 菜鸟教程https://www.runoob.com/css/css-intro.html 

        一、CSS字型：

通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）

特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）

字体样式演示代码：

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title>
        <style>p.serif{font-family:"Times New Roman",Times,serif;}

                p.sansserif{font-family:Arial,Helvetica,sans-serif;}
        </style>
</head>

<body>
        <h1>CSS font-family</h1>
        <p class="serif">这一段的字体是 Times New Roman </p>
        <p class="sansserif">这一段的字体是 Arial.</p>

</body>
</html>

结果：

         二、CSS背景

        CSS 背景属性用于定义HTML元素的背景。

        CSS 属性定义背景效果:

                background-color

                background-image

                background-repeat

                background-attachment

                background-position

        CSS中，颜色值通常以以下方式定义:

                十六进制 - 如："#ff0000"

                RGB - 如："rgb(255,0,0)"

                颜色名称 - 如："red"

背景样式演示代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
h1
{
    background-color:#6495ed;
}
p
{
    background-color:#e0ffff;
}
div
{
    background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>CSS background-color 实例!</h1>
<div>
    该文本插入在 div 元素中。
    <p>该段落有自己的背景颜色。</p>
    我们仍然在同一个 div 中。
</div>
</body>
</html>

运行结果：

        这就是其中基础的样式，更多的内容大家可以通过上面的链接去自行学习。