HTML知识点-盒子模型

最新推荐文章于 2024-07-24 16:53:23 发布

00的小尾巴

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量261

点赞数

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

本文链接：https://blog.csdn.net/qq_51697761/article/details/127163708

版权

web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一张图详细展示

实例：（是平时的作业！）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        #wrap{
            width: 900px;
            margin: 0 auto; 
            margin-top: 5px;
            border:red solid 2px;
        }
        div{
            text-align: center;
        }
        #wrap::after{
            content:"";
            display: block;
            clear:both;
        }
        #pic{
            width: 420px;
            height: 300px;
            background-image: url(111.jpg);
            background-size: 95%;
            background-position: center;
            background-repeat: no-repeat;
            background-color: #77A;
            float: left;
        }
        #text{
            width: 420px;
            height: 550px;
            font-weight: bold;
            padding: 10px;
            background-image: url(111.jpg);
            background-repeat: repeat-y;
            background-size: 100% auto;         
            margin-left: 40px;
            background-color: #77a;
            float:left;
        }
        #title{
            font-family: "华文彩云";
            font-size: 32px;
        }
        #author{
            font-family: "黑体";
            font-size: 12px;
            text-align: right;
            margin-bottom: 24px;
        }
        #content p{
            font-family: "隶书";
            font-size: 24px;
            border: 2px;
            letter-spacing: 0.5em;
            line-height: 1.5em;
            text-align: center;
        }
        h1{
            text-align: center;
            background-color: #667788;
            color: white;
        }
        img{
            width: 5%;
            height: 5%;
            border:2px solid gray;
        }
        img+p{
            display: inline-block;
            font-size: 25px;
            font-family: "微软雅黑";
            vertical-align:top;
        }
        span{
            font-weight: bold;
            font-size: 50px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="pic"></div>
        <div id="text">
            <div id="title">木兰花令.拟古决绝词</div>
            <div id="author">纳兰性德</div>
            <div id="content">
                <p>人生若只如初见，</p>
                <p>何事秋风悲画扇。</p>
                <p>等闲变却故人心，</p>
                <p>却道故心人易变。</p>
                <p>骊山雨罢清宵半，</p>
                <p>泪雨霖铃终不怨。</p>
                <p>何如薄幸锦衣郎，</p>
                <p>比翼连枝当日愿。</p>
            </div>
        </div>
    </div>
    
    <h1>Head Line</h1>
    <img src="实验8.jpg"/>
    <p><span>M</span>obile Widget使用的标准的Web技术，如HTML，CSS，javascript等。这些经典的Web技术规范是由W3C（万维网联盟）的下属各个工作组制定并推进的。作为开发Widget之前的知识准备，在本章中我们将逐一介绍这些技术。</p>
</body>
</html>

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div#p1{
            border-radius: 50px;
            background-color: aquamarine;
            text-align: center;
            height: 50px;
        }
        div#p2{
            border: solid red 10px;
            height: 50px;
            border-radius: 10px 20px 30px 40px;
            background-color: blueviolet;
        }
        div#p3{
            background-color: burlywood;
            box-shadow: 15px 15px 5px bisque;
            border-radius: 10px;
            height: 100px;
        }
        

    </style>
</head>
<body>
    <div id="p1">这是一个普普通通的圆角边框</div>
    <br>
    <div id="p2">这是border设置多个不同的边框，按照顺时针方向设置的</div>
    <br>
    <div id="p3"></div>
    <br>
    
</body>
</html>