手工编写与借助工具

时间:2019-08-20
本文章向大家介绍手工编写与借助工具,主要包括手工编写与借助工具使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

8.1 从零开始

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

?

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

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

html>

?

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

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

DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>体验CSStitle>
    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部分加入标记,然后在它们之间加入CSS样式规则。



体验CSS

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{
        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>体验CSStitle>
    <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>

?

$flag 上一页 下一页