基础页面布局练习

最新推荐文章于 2022-08-03 17:28:12 发布

V________

最新推荐文章于 2022-08-03 17:28:12 发布

阅读量202

点赞数

分类专栏： web前端文章标签： css html5

本文链接：https://blog.csdn.net/V________/article/details/109612302

版权

web前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<!--文档声明，Document Type，既不是元素也不是注释，用于通知浏览器文档正使用哪个HTML版本-->
<html lang="en">

<head>
    <!--文档头，是HTML元素中第一个子元素-->
    <meta charset="UTF-8">
    <!--空元素，指示浏览器使用UTF-8解析界面-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <title>这是一个网页</title>
    <!--通常包含title，link，style，meta-->
</head>

<body>
    <header></header>
    <!--文档体，定义文档的结构内容-->
   
    <div>
        <header>
            <h1>
                CSS中不为人知的部分
            </h1>
            <p>原文地址：<a href="#1">file:///D:/desktop/F70/page2.html</a></p>
        </header>
        <section>
            <p>
                文字是人类用表意符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很
            </p>
            <p>
                文字是人类用表意符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。文字的不同体现了国家和民族的书面表达的方式和思维不同。文字使人类进入有历史记录的文明社会。
                
                
            </p>
            <h2>
                渲染过程概述
            </h2>
            <p>
                文字是人类用表意符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很
            </p>
            <p>
                文字是人类用表意符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的
            </p>
            <p>
                文字是人类用表意符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很
            </p>
            <p>
                文字是人类用表意符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的
            </p>
            <h2>
                层叠
            </h2>
            <p>
                之久远的方式和工具。现代文字大多是记录语言的工具。
            </p>
            <p>
                之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文
            </p>
            <p>
                文字是人类用表意符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。文字的不同体现了国家和民族的书面表达的方式和思维不同。文字使人类进入有历史记录的文明社会。
                
                
            </p>
            <h2>
                盒模型
            </h2>
            <p>
                现代文字大多是记录语言的工具。人
            </p>
            <p>
                之久远的方式和工具。现代文字大多是记录语言的工具。人类
            </p>
            <p>
                之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，
            </p>
            <p>
                之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。文字大多是记录语言的工具。人类往文字大多是记录语言的工具。人类往
            </p>
            <p>
                文字是人类用表意符号记录表达信息以传之久远的方式和工具。现。
                
            </p>
        </section>

    </div>
    
</body>

</html>

body {
    background-color:gray;
    border: greenyellow 2px dashed;
    margin: 0px;
}

header {
    width: 100%;
    height: 45px;
    background-color: #000000;
    margin: 0px;
   
}
div {
    width: 1200px;
    height:1200px;
    margin: 20px auto;
    background-color: honeydew;
}
div>header {
    height: 145px;
    width: 1270px;
    background-color: lightskyblue;
    position: absolute;
    margin: 30px -35px ;
}
h1 {
    text-align:center;
    margin: 24px auto 0pxnu ;
}
header>p {
    text-align: center;
    margin: 30px auto;
}

h2 {
    padding: 15px 0px;
    margin: 0px;
    font-size: 32px;
    border-top: 1.5px #dbdbdb solid;
    border-bottom: 1.5px #dbdbdb solid;
}

V________

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础页面布局练习

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewpor
复制链接

扫一扫

专栏目录