HTML入门———————DAY2

最新推荐文章于 2024-08-17 08:00:00 发布

好吃的都给你呀

最新推荐文章于 2024-08-17 08:00:00 发布

阅读量107

点赞数

分类专栏：前端杂文文章标签： HTML 入门 margin

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/102547562

版权

前端杂文专栏收录该内容

34 篇文章 0 订阅

订阅专栏

关于网页排版相关的知识。

一个网页body内可分为

<nav>

导航模块

</nav>

页眉模块

</header>

<main>

正文模块

</main>

还可在结束的时候加上页脚模块。

还有关于外边距和内边距的知识。

内边距标签：padding:

外边距标签：margin:

练习如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>样例网页01</title>
    <style>
        nav{
            /* 设置整个导航栏的宽高背景颜色固定格式 */
            width: 100%;
            height: 100px;
            background-color: gray;
            position: fixed;
            top:0px;
        }
        /* 定义导航栏中图片的固定格式和高度 */
        nav img{
            height: 50px;
            margin-top: 25px;
            margin-left: 200px;
        }
        /* 定义导航栏中span的固定格式和高度 */
        nav span{
            /* 漂浮 */
            float: right;
            /* 行高 右边距 */
            line-height: 100px;
            margin-right: 200px;
        }
        nav span a{
            margin-left: 50px;
        }
        /* 定义页眉的背景图片，大小固定格式 */
        header{
            width: 100%;
            height: 400px;
            background-image: url(header.jpg);
            background-size: 100% 400px;
            margin-top: 100px;
        }
        /* 定义网页正文的位置大小边框颜色 */
        main{
            width: 60%;
            height: 3400px;
            border: 3px solid pink;
            /*有一个值的时候是代表上下左右 
            有两个值的时候是第一个值表示上下 第二个值表示左右 
            有三个值的时候是第一个值表示上 第二个值表示右 第三个值表示下 左边默认和右边一样
            有四个值得时候是分别按上右下左顺序表示 */
            margin: 0 auto;
        }
        body{
            margin: 0px;
        }
        p{
            font-size: 25px;
            /* indent缩进 */
            /* text-indent: 50px; */
            /* em=一个字节宽度 */
            text-indent: 2em;
        }
        section>img{
            width:  100%;
        }
        #tab{
            height: 500px;
            background-image: url(HomePage.jpg);
            background-size: 100% 500px;
            
        }
        div img:nth-child(1){
            width: 100px;
            height: 100px;
            /* 与下面相同，设置图片弧角 50%表示成一个圆 */
            border-radius:50%;
        }
        div img:nth-child(2){
            width: 200px;
            height: 200px;
            border-radius:50%;
        }
        div img:nth-child(3){
            width: 150px;
            height: 150px;
            border-radius:50%;
        }
        .over{
            background-color: gray;
            /* 文本位置 */
            text-align: center;
        }
    </style>
</head>
<body>

    <!-- nav是和html5里专门设计网页导航模块的模块标记 -->
    <!-- navigation 导航 航海  语义化 -->
    <nav>
        <img src="logo.png" alt="这是一个网页logo">
        <span>
            <a href="">111</a>
            <a href="">222</a>
            <a href="">333</a>
            <a href="">444</a>
        </span>
    </nav>
    <!-- header 定义文档的页眉  -->
    <header>


    </header>
    <!-- 网页正文区域 规定文档的主要内容-->
    <main>
        <p>
            你好啊你好啊 你好啊你好啊你好啊
          
        </p>
        <!-- section区域 模块 类似div 块元素 -->
        <section>
                <h1>111</h1>
                <img src="classmates.jpg" alt="">
                <p>
                    你好啊你好啊 你好啊你好啊你好啊
                    
                </p>
        </section>
        <!-- section区域 模块 类似div 块元素 -->
        <section>
                <h1>222</h1>
                <div id="tab">
                    <img src="ldh.jpg" alt="">
                    <img src="lry.jpg" alt="">
                    <img src="wf.png" alt="">
                </div>
                <p>
                    你好啊你好啊 你好啊你好啊你好啊
                   
                </p>
        </section>
        <!-- section区域 模块 类似div 块元素 -->
        <section>
                <h1>333</h1>
                <img src="lzu.jpg" alt="">
                <p>
                    你好啊你好啊 你好啊你好啊你好啊
                   
                </p>
        </section>
        <!-- section区域 模块 类似div 块元素 -->
        <section>
                <h1>444</h1>
                <img src="html5.jpg" alt="">
                <p>
                    你好啊你好啊 你好啊你好啊你好啊
                    
                </p>
        </section>
    </main>
    <!-- 结尾处 常规网站中防止侵权的标识-->
    <hr>
    <div class="over">@版权所有违者必究&nbsp;&#x3000;&nbsp;&#x3000;&nbsp;&#x3000;&nbsp;&#x3000;
        CopyRight
    </div>
    <br><br>
</body>
</html>