码迷,mamicode.com
首页 > 其他好文 > 详细

手工编写与借助工具

时间:2019-08-20 12:54:45      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:height   double   标记   显示效果   颜色   png   通过   页面框架   分组   

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>

 

手工编写与借助工具

标签:height   double   标记   显示效果   颜色   png   通过   页面框架   分组   

原文地址:https://www.cnblogs.com/qinghshan/p/11375922.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!