javaweb---静态网页开发技术(3)

最新推荐文章于 2022-07-05 18:03:08 发布

小张哎！

最新推荐文章于 2022-07-05 18:03:08 发布

阅读量204

点赞数 1

本文链接：https://blog.csdn.net/qq_45746744/article/details/114872088

版权

课件+实例：

在这里插入图片描述

在这里插入图片描述

其代码实现：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8">
        <title>互联网发展的起源zqy</title>
    </head>
    <body>
        <h1>互联网发展的起源</h1>
        <img alt="" src="image/cap.png">
        <p>1969年，为了保障通值联络。美国国防部5级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPAKET.连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
        <p>20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，SOMTLJET、USENET、BITNET、CSHET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。</p>
    </body>
</html>

在这里插入图片描述
border的属性：

width：粗细程度，一般都以px为单位，color：颜色，与文字的color属性一样，style：样式，solid（实线）、dashed（虚线）、dotted（点划线）、none（不显示）…等等较为常用。border常用样式可以写在一起，例如：border：1px solid blue.

padding表示“内容”与“边框”之间的间隙

形式：padding：padding-top | padding-right | padding-bottom | padding-left 也就是上、右、下、左

margin（外边距）的使用：

理解margin作用：用于控制块与块之间的距离。块元素之间的左右margin。

结论：当两个块元素紧邻的时候，它们之间的距离为第一个元素的margin-right加上第二个元素的margin-left。

块元素之间的上下margin：在块级元素中当两个div设置了margin-top和margin-bottom时，两个块级元素的实际间隔并不是二者相加，而是二者取其“较大”者。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8">
        <title>互联网发展的起源zqy</title>
        <style type="text/css">
            h1{
              color:white;
              background-color: blue;
              text-align: center;/*格式居中*/
              padding: 15px;/*四个方向的填充值*/
              }
            img{
               float:left;/*文字环绕*/
               border: 1px #9999cc dashed;
               margin: 5px;
               }
            p{
             font-size: 12px;/*字体大小*/
             text-indent:2em;/*首行缩进2字符*/
             line-height: 1.5;/*列高*/
             padding: 5px;
             }
            body{
                margin: 0px;
                background-color: #ccccff;
                }
            #p1{
               border-right: 3px double red;
               }
            #p2{
               border-right: 3px double orange;
               }
        </style>
    </head>
    <body>
        <h1>互联网发展的起源</h1>
        <img alt="" src="image/cap.png">
        <p id="p1">1969年，为了保障通值联络。美国国防部5级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPAKET.连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
        <p id="p2">20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，SOMTLJET、USENET、BITNET、CSHET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。</p>
    </body>
</html>