手工编写与借助工具

时间：2019-08-20 12:54:45 收藏：0 阅读：89

8.1 从零开始

首先建立HTML文件，构建最简单的页面框架。其内容包括标题和正文部分，每一个部分又分别处于不同的模块中。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>体验CSS</title>
    </head>
    
    <body>
        
<h1>互联网发展的起源</h1>

        <p>1969年，为了保障通信网络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标记着计算机网络发展的新纪元</p>
        <p>20世纪10年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENEY、BITNET、CSNET等， 在网络的数量和规模上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP\IP协议的诞生。</p>
    </body>

</html>

技术图片

这时的页面只有标题和正文内容，而没有加任何效果，在浏览器中的显示效果如图所示，看上去十分的单调，但页面的核心框架已经出现。

单纯的文字显得贫乏，因此加入一幅图片作为简单的插图。图片所在位置与正文一样，使用HTML语言中的<img>标记，此时<body>部分修改后的代码如下。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>体验CSS</title>
    </head>
    
    <body>
        
<h1>互联网发展的起源</h1>

        <img src="bridge.jpg" width="200" height="200" />
        <p>1969年，为了保障通信网络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。 ARPANET的建成和不断发展标记着计算机网络发展的新纪元</p>
        <p>20世纪10年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENEY、BITNET、CSNET等。 在网络的数量和规模上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP\IP协议的诞生。</p>
    </body>

</html>

技术图片

显示效果如图所示，可以看到图片和文字的排列比较混乱，必须利用CSS对页面进行全面的改进。

8.2 设置标题

下面对标题样式进行修改。使用蓝色背景的文字可以使标题更醒目。另外，这里将标题设置为居中，并且与正文有一定的距离，再通过修改背景达到更突出的母的。、

首先在HTML的head部分加入<style>和</style>标记，然后在它们之间加入CSS样式规则。

<head>
    <meta charset="UTF-8">
    <title>体验CSS</title>
    <style>
        h1{
            color:white;                                                 /*文字颜色*/
            background-color: #00FFFF;                                   /*背景色*/
            text-align:center;                                           /*居中*/
            padding:15px;                                                /*边距*/
        }
    </style>
</head>

技术图片

8.3 控制图片

在对标题和正文都进行了CSS控制后，真个页面的焦点便集中在了插图上。如图所示，图片和文字的排列显得不够协调。

    img{
        float:left;
        border:1px #9999CC dashed;
        margin:5px;
    }

8.4 设置正文、

下面设置正文部分，可以控制文字得大小、排列的密疏等属性，使得整体上达到更加协调的效果。

p{
        font-size:12px;
        text-indent: 2em;
        line-height:1.5;
        padding:5px;
    }

技术图片

8.5 设置整体页面

接下来对页面整体进行设置，对<body>标记设置样式，消除网页内容与浏览器窗口边界之间的空白，并设置浅色的背景色。

    body{
        margin:0px;
        background-color: #40b3ff;
    }

8.6 对段落进行分别设置

可以使用选择器，为两个文本段落分别设置不同的效果。

<p id="p1">1969年，为了保障通信网络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。
    ARPANET的建成和不断发展标记着计算机网络发展的新纪元</p>
<p id="p2">20世纪10年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENEY、BITNET、CSNET等。
    在网络的数量和规模上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP\IP协议的诞生。

    #p1{
        border-right:3px red double;
    }
    #p2{
        border-right:3px orange aouble;
    }

技术图片

8.7 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>体验CSS</title>
    <style>
        h1{
            color:white;                                                 /*文字颜色*/
            background-color: #00FFFF;                                   /*背景色*/
            text-align:center;                                           /*居中*/
            padding:15px;                                                /*边距*/
        }
    img{
        float:left;
        border:1px #9999CC dashed;
        margin:5px;
    }
    p{
        font-size:12px;
        text-indent: 2em;
        line-height:1.5;
        padding:5px;
    }
    body{
        margin:0px;
        background-color: #40b3ff;
    }
    #p1{
        border-right:3px red double;
    }
    #p2{
        border-right:3px orange aouble;
    }
    </style>
</head>
<body>
<h1>互联网发展的起源</h1>
<img src="bridge.jpg" width="300" height="200"/>
<p id="p1">1969年，为了保障通信网络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。
    ARPANET的建成和不断发展标记着计算机网络发展的新纪元</p>
<p id="p2">20世纪10年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENEY、BITNET、CSNET等。
    在网络的数量和规模上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP\IP协议的诞生。
</p>
</body>
</html>