简单盒模型的基础运用

用户11188770

发布于 2024-07-01 13:29:02

550

发布于 2024-07-01 13:29:02

文章被收录于专栏：高并发流量解决方案高并发流量解决方案

网页美化的基础为层叠式样式表，也就是我们熟知的css属性。这里给大家分享一个在css中基础盒模型的运用。

这里有一个实战示例：

整个大盒子的宽为750px，高为485px，背景使用background属性将图片导入，边框圆角为50px。盒子阴影为黑色，最后盒子居中展示。具体实现代码如下

div {
            /*定义盒模型类型*/
            box-sizing: border-box;

            /*定义宽和高的过程*/ 
            width: 750px;
            height: 485px;

            /*用background-image属性导入图片*/
            background-image: url(图片地址);
            
            /*盒模型的居中设置*/
            margin: 250px auto;

            /*边框圆角设置*/
            border-radius: 50px;

            /*边框阴影设置*/
            box-shadow: 10px 10px 5px black;
        }

设置文本内容为居中展示，字体颜色为蓝色，行高为30px。

其中：文本内容居中、颜色和行高均为基础css属性设置。

设置作者的名字的左内边距为450px。

最后我的不成功示例如下（因为我想体现换行所以直接用了很多段落标签，嘿嘿ovo）

<!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 {
            box-sizing: border-box;
            width: 750px;
            height: 485px;
            background-image: url(img/pic.jpg);
            margin: 250px auto;
            border-radius: 50px;
            box-shadow: 10px 10px 5px black;
        }
        h1{
            text-align: center;
            padding-top: 50px;
            color: white;
            font-family: "华文楷体";
        }
        p{
            text-align: center;
            color: white;
            font-family: "华文楷体";
        }
        #a{
            padding-left: 450px;
        }
    </style>
</head>

<body>
    <div>
        <h1><strong>水调歌头</strong></h1>
        <p>明月几时有？把酒问青天。</p>
        <p>不知天上宫阙。今夕是何年？</p>
        <p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</p>
        <p>起舞弄清影，何似在人间？</p>
        <p>转朱阁，低绮户，照无眠。不应有恨，问事长向别时圆？</p>
        <p>人有悲欢离合，月有阴晴圆缺，此事古难全。</p>
        <p>但愿人长久，千里共婵娟。</p>
        <p id="a">————苏轼</p>
    </div>
</body>

</html>

最终的效果图为：