HTML·第五章CSS盒子模型

MortalTom

于 2024-10-10 11:00:45 发布

阅读量390

点赞数 8

分类专栏： HTML 文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_68332785/article/details/142814984

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

5.1 盒模型的定义

5.2 CSS元素的高度和宽度

1. 高度（height）和宽度（width）属性

7. top、right、bottom、left 属性

8. 包含块（Containing Block）

5.1 盒模型的定义

盒模型（Box Model）是Web开发中的一种概念，用于描述HTML元素如何在页面上占据空间。它将每个HTML元素看作是一个矩形盒子，并且定义了这个盒子由哪些部分组成，如何计算元素的总大小。盒模型包括以下四个区域：

1. 内容区域（Content）：显示元素的实际内容，如文本或图片。这是最内部的区域，定义了元素的宽度和高度。

2. 内边距（Padding）：内容区域与边框之间的空白区域。内边距会增加元素的整体尺寸，但它的背景颜色或图片可以扩展到内边距区域。

3. 边框（Border）：包围内边距和内容区域的边界。边框的厚度、样式和颜色都可以调整，且会增加元素的总宽度和高度。

4. 外边距（Margin）：元素外部与其他元素之间的距离。外边距不会被背景颜色或图片覆盖，它纯粹是用于控制元素之间的空隙。

盒模型的总宽度和高度计算公式为：

总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距

总高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距

理解盒模型是掌握网页布局的关键，因为它直接影响元素的排列和页面的整体设计。

5.2 CSS元素的高度和宽度

在CSS中，设置元素的高度和宽度是进行页面布局的基础。CSS提供了控制元素大小的相关属性和计算规则。以下是关于元素高度和宽度的详细信息：

1. 高度（height）和宽度（width）属性

height 用于设置元素的高度。

width 用于设置元素的宽度。

这些属性可以使用不同的单位来设置大小，比如像素（px）、百分比（%）、视口单位（vw、vh）等。

2. 默认行为

对于块级元素（如 div），默认宽度是父元素宽度的 100%，高度则是根据内容自动扩展。

对于内联元素（如 span），默认情况下 height 和 width 属性是无效的，因为它们根据内容的尺寸自动调整。

3. 单位

像素（px）：绝对单位，表示固定的大小。例如，width: 300px; 表示元素宽度为300像素。

百分比（%）：相对于父元素的尺寸。例如，width: 50%; 表示元素宽度是父元素宽度的50%。

视口单位（vw、vh）：

1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。

例如，width: 50vw; 表示元素宽度是视口宽度的50%。

4. 盒模型对宽度和高度的影响

默认情况下，width 和 height 属性只影响内容区域的大小，不包括内边距、边框和外边距。即使你指定了宽度和高度，实际显示的元素大小可能会因为这些额外的空间而大于预期。

举例：

css

div {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}

在默认的盒模型（boxsizing: contentbox）中，元素的总宽度和总高度计算如下：

总宽度 = 内容宽度 (200px) + 左右内边距 (10px + 10px) + 左右边框 (5px + 5px) = 230px

总高度 = 内容高度 (100px) + 上下内边距 (10px + 10px) + 上下边框 (5px + 5px) = 130px

5. boxsizing属性

使用 boxsizing 属性可以改变盒模型的计算方式：

boxsizing: contentbox;（默认值）：width 和 height 只应用于内容区域，不包含内边距和边框。

boxsizing: borderbox;：width 和 height 包括内容区域、内边距和边框的总和。这意味着设置的宽度和高度是元素的总尺寸，而不是仅仅是内容区域的尺寸。

例如：

css

div {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
boxsizing: borderbox;
}

在这种情况下：

总宽度仍然是 200px（宽度包括了内边距和边框）。

总高度仍然是 100px。

6. 自动高度

当 height 未指定或设置为 auto 时，元素会根据其内容自动调整高度。

7. 最小和最大宽度/高度

minwidth 和 minheight：设置元素的最小宽度和最小高度，即使内容较少，也不会缩小到低于该值。

maxwidth 和 maxheight：设置元素的最大宽度和最大高度，即使内容过多，也不会超过该值。

例如：

css

div {
width: 100%;
minwidth: 300px;
maxwidth: 800px;
}

此时，元素的宽度会根据父容器调整，但不会小于 300px，也不会超过 800px。

8. 溢出内容处理（overflow）

如果内容超过了指定的宽度和高度，可以使用 overflow 属性控制内容如何处理：

overflow: visible;（默认）：内容不受限制，会溢出元素框。

overflow: hidden;：超出部分会被裁剪掉。

overflow: scroll;：如果内容超出，会显示滚动条。

overflow: auto;：如果内容超出，会自动显示滚动条，否则不会。

结论

通过控制元素的高度和宽度，结合盒模型的理解，可以精确地设计页面的布局和元素的大小。

5.3 边距设置和边框设置

在CSS中，边距（margin）和边框（border）是用来控制元素外观和布局的重要属性。它们决定了元素之间的距离、元素的外观以及元素在页面中的布局方式。

1. 边距设置（Margin）

边距是元素边框与其他元素或父容器之间的空白区域。边距是透明的，不会有背景色或其他内容。通过设置边距，可以调整元素与其他元素之间的距离。

边距的属性

margin：用于设置所有四个方向（上、右、下、左）的边距。

margintop：设置元素上方的边距。

marginright：设置元素右侧的边距。

marginbottom：设置元素下方的边距。

marginleft：设置元素左侧的边距。

边距的缩写用法

可以通过单个 margin 属性设置四个方向的边距值。根据不同的参数数量，有不同的规则：

css

/ 单值语法：四个方向的边距相同 /
margin: 20px;
/ 双值语法：第一个值为上下边距，第二个值为左右边距 /
margin: 20px 10px;
/ 三值语法：第一个值为上边距，第二个值为左右边距，第三个值为下边距 /
margin: 20px 10px 30px;
/ 四值语法：按顺时针方向设置边距，依次为上、右、下、左 /
margin: 20px 10px 30px 15px;

边距的取值

固定值（px, em, rem等）：例如 margin: 10px;，指定边距为固定像素。

百分比（%）：边距值是父元素宽度的百分比。例如，margin: 5%; 表示边距为父元素宽度的 5%。

自动（auto）：通常用于水平居中。元素的左右 margin 设置为 auto 时，它会自动分配空间，保证元素水平居中。

css

div {
width: 300px;
margin: 0 auto; / 上下边距为 0，左右边距自动分配，居中元素 /
}

负边距

margin 属性也可以使用负值，这会将元素“拉近”其他元素或缩小它与其他元素的距离。

css

div {
margintop: 10px; / 将元素向上移动 10px /
}

边距合并

相邻的块级元素上下边距可能会合并成一个值，称为“边距合并（Margin Collapse）”。

例如：

html

<p style="marginbottom: 20px;">段落1</p>
<p style="margintop: 30px;">段落2</p>

虽然段落1的下边距是20px，段落2的上边距是30px，但它们的实际上下边距合并成30px（较大的那个值）。

2. 边框设置（Border）

边框是围绕元素内容和内边距的可见框架。边框的样式、宽度和颜色都可以通过CSS进行设置。

边框的属性

border：用于同时设置边框的宽度、样式和颜色。

borderwidth：设置边框的宽度。

borderstyle：设置边框的样式（如实线、虚线等）。

bordercolor：设置边框的颜色。

边框的缩写用法

border 是 borderwidth、borderstyle 和 bordercolor 的简写属性。必须指定边框样式，颜色和宽度为可选项。

css

/ 简写方式 /
border: 2px solid black;
/ 单独设置边框的宽度、样式、颜色 /
borderwidth: 2px;
borderstyle: solid;
bordercolor: black;

边框样式（borderstyle）

borderstyle 用于设置边框的样式，有以下几种常见值：

none：无边框。

solid：实线边框。

dashed：虚线边框。

dotted：点线边框。

double：双线边框。

groove：凹槽边框，看起来像被雕刻的效果。

ridge：凸起的边框。

inset：看起来像嵌入页面中的边框。

outset：看起来像凸起于页面上的边框。

边框宽度（borderwidth）

borderwidth 用来设置边框的厚度，可以使用像素、百分比等单位，也可以使用关键字值：

thin（细）、medium（中等，默认值）、thick（厚）。

例如：

css

borderwidth: 5px;
borderwidth: thin;

边框颜色（bordercolor）

bordercolor 用来指定边框的颜色，可以用颜色名称、RGB、HEX等方式。

css

bordercolor: red;
bordercolor: ff0000;

单独设置各边的边框

可以分别为元素的四条边设置不同的边框属性：

bordertop

borderright

borderbottom

borderleft

例如：

css

/ 设置上边框为红色实线，宽度为3px /
bordertop: 3px solid red;
/ 为四条边设置不同的颜色 /
bordertopcolor: red;
borderrightcolor: blue;
borderbottomcolor: green;
borderleftcolor: yellow;

圆角边框（borderradius）

borderradius 用于创建圆角边框，允许元素的边角变得圆滑。

css

/ 创建 10px 的圆角 /
borderradius: 10px;
/ 创建椭圆形的圆角：水平和垂直方向半径不同 /
borderradius: 50px 25px;

边距与边框的区别

边距（margin）是元素外部的空白区域，影响元素与其他元素的距离。

边框（border）是围绕元素内容和内边距的可见线条，影响元素的外观。

理解如何使用 margin 和 border，可以有效地控制元素的布局和视觉表现。

5.4 CSS元素的定位

在CSS中，元素的定位通过 position 属性进行控制，它决定了元素相对于其正常文档流或其他容器的放置方式。定位方式有几种常见类型，每种类型适合不同的布局需求。

1. position 属性的值

static（默认值）

relative（相对定位）

absolute（绝对定位）

fixed（固定定位）

sticky（粘性定位）

2. static（静态定位）

默认值，元素按照正常的文档流进行排列。

静态定位的元素不受 top、right、bottom 和 left 属性的影响。

例子：

css

div {
position: static; / 默认值 /
}

在这种情况下，元素会按照它在HTML中的位置，依次排列，不会被特别定位。

3. relative（相对定位）

元素仍然保持在文档流中的位置，但会相对于它自己原来的位置进行偏移。

使用 top、right、bottom 和 left 属性来设置相对于它自己原来位置的偏移量。

例子：

css

div {
position: relative;
top: 20px; / 元素会从原来位置向下移动20px /
left: 10px; / 元素会从原来位置向右移动10px /
}

在相对定位中，元素依然占据它原本的位置，只是视觉上被偏移到新的位置。

4. absolute（绝对定位）

元素相对于最近的定位祖先（非 static 定位的祖先元素）进行定位。如果没有定位祖先，元素将相对于文档的根元素（通常是 <html> 或 <body>）进行定位。

元素会脱离文档流，不占据原来的位置。它不会影响其他元素的位置，其他元素会填补它的原位置。

例子：

css

div {
position: absolute;
top: 50px;
left: 100px;
}

在这种情况下，元素会被从文档流中移出，并根据 top 和 left 设置的位置进行放置。

绝对定位的特性：

相对最近的非 static 定位祖先元素：例如，如果一个祖先元素有 position: relative;，则绝对定位的元素会以该元素为参考。

脱离文档流：其他元素会像它不存在一样重新排列布局。

5. fixed（固定定位）

元素相对于浏览器窗口（视口）进行定位，而不受页面滚动的影响。

fixed 定位的元素也脱离文档流，不会影响其他元素。

例子：

css

div {
position: fixed;
top: 0;
right: 0;
}

在这种情况下，元素会固定在视口的右上角，无论页面如何滚动，它都不会移动。

固定定位的典型用途：

固定导航栏、浮动按钮等，始终保持在浏览器窗口中的某个固定位置。

6. sticky（粘性定位）

sticky 是相对定位和固定定位的结合。

元素最初是相对于文档流进行相对定位，当滚动达到特定位置时，元素会“粘附”在视口的某个位置，变成固定定位。

需要结合 top、right、bottom、left 属性指定元素在视口中“粘附”的位置。

例子：

css

div {
position: sticky;
top: 10px; / 当页面滚动到10px时，元素会粘附到视口顶部 /
}

当页面滚动到元素与视口顶部距离为 10px 时，它会固定在该位置，直到滚动超出该区域。

粘性定位的典型用途：

用于制作粘性导航栏或标题，当页面滚动时，它们会保持在页面顶部或其他指定位置。

7. top、right、bottom、left 属性

这些属性用于在相对、绝对、固定和粘性定位中指定元素的位置：

top：指定元素上边缘相对于包含块的偏移量。

right：指定元素右边缘相对于包含块的偏移量。

bottom：指定元素下边缘相对于包含块的偏移量。

left：指定元素左边缘相对于包含块的偏移量。

这些属性的作用取决于元素的 position 值：

对于 static 定位的元素，这些属性不起作用。

对于 relative 定位，它们相对于元素原始位置偏移。

对于 absolute 和 fixed 定位，它们相对于最近的定位祖先或视口进行定位。

对于 sticky 定位，它们决定元素在粘附时的位置。

8. 包含块（Containing Block）

在 absolute 和 fixed 定位中，元素的位置相对于包含块进行计算。包含块的确定方式如下：

对于 absolute 定位，包含块是最近的非 static 定位的祖先元素。

对于 fixed 定位，包含块是视口。

9. Z轴定位（zindex 属性）

zindex 控制元素在Z轴上的堆叠顺序，适用于定位元素（非 static 定位）。

zindex 值越大，元素越靠上。

元素的默认 zindex 值为 auto，即遵循文档流顺序。

例子：

css

div {
position: absolute;
zindex: 10; / 元素会覆盖 zindex 较低的元素 /
}

总结

通过使用 position 属性及其相关的 top、right、bottom、left、zindex 属性，开发者可以精确地控制元素在页面中的位置和层次关系。

5.5 CSS元素的浮动

在CSS中，浮动（float）是一种用于控制元素布局的技术，最初用于使文本环绕图像。浮动元素会脱离正常的文档流，允许其他元素在其旁边排列。以下是关于浮动的详细介绍。

1. 浮动的基本概念

float 属性：用于指定元素的浮动方向，可以取以下值：

left：元素向左浮动。

right：元素向右浮动。

none：默认值，元素不浮动。

inherit：继承父元素的浮动属性。

2. 浮动的效果

当一个元素被设置为浮动时，它会：

从文档流中脱离，其他元素会尝试填补其原来的位置。

允许文本和内联元素围绕其排列。

示例：

html

<div style="float: left; width: 200px; margin: 10px;">
<img src="image.jpg" alt="示例图像">
</div>
<p>这是一个文本段落，它将环绕浮动的图像。</p>

在这个示例中，图像会浮动到左侧，文本会环绕在它的右边。

3. 清除浮动（Clearfix）

由于浮动元素脱离了文档流，后面的元素可能会发生布局问题。为了解决这个问题，可以使用清除浮动的方法。常用的方法有以下几种：

方法一：使用 clear 属性

在浮动元素之后的元素上设置 clear 属性：

clear: left;：不允许左侧浮动元素。

clear: right;：不允许右侧浮动元素。

clear: both;：不允许两侧的浮动元素。

html

<div style="float: left; width: 200px;">浮动元素</div>
<p style="clear: both;">清除浮动后的文本段落。</p>

方法二：使用伪元素（clearfix）

为父元素添加清除浮动的效果，可以通过伪元素实现：

css.

clearfix::after {
content: "";
display: table;
clear: both;
}

将 .clearfix 类添加到包含浮动元素的父元素：

html

<div class="clearfix">
<div style="float: left;">浮动元素</div>
<div style="float: right;">另一个浮动元素</div>
</div>

4. 浮动的常见用途

图文排版：让文本环绕图像。

多列布局：在容器中创建多列效果。

导航栏：水平排列导航链接。

5. 注意事项

高度问题：浮动元素可能会导致父元素高度为零。这是因为父元素不包含浮动的子元素。使用清除浮动的方法可以解决这个问题。

文档流影响：浮动会影响文档流，其他元素会尝试填补浮动元素的空间，因此使用时要注意布局。

浮动与响应式设计：在响应式设计中，使用浮动时要小心，可能会影响元素在不同屏幕尺寸下的排列。

6. 替代方案

随着CSS布局技术的发展，使用浮动布局的情况逐渐减少。现代布局技术如 Flexbox 和 CSS Grid 提供了更灵活和强大的布局功能，通常可以更好地满足复杂布局的需求。

总结

浮动是一个强大的工具，用于创建文本环绕和多列布局。通过理解和正确使用浮动及清除浮动的技巧，可以有效地控制网页布局。尽管浮动在现代设计中逐渐被其他布局方式取代，但在一些简单的布局需求中，仍然是一个有效的选择。

5.6 综合案例--昵心美食空间

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>昵心美食空间</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            background-color: #fff999;
        }
        a {
            color: red;
            text-decoration: none;
        }
        .all {
            width: 700px;
            height: 650px;
            margin: 10px auto;
            padding: 5px;
            background-image: url('img/11.jpg');
            background-size: cover;
        }
        .banner, .menu, .bottom {
            width: 100%;
            height: 70px;
        }
        .menu {
            height: 40px;
        }
        .main {
            width: 700px;
            height: 450px;
            margin: 5px 0;
            position: relative;
            overflow: hidden;
        }
        .left, .right {
            width: 150px;
            height: 440px;
            border: 1px solid #999;
            float: left;
            overflow: hidden;
        }
        .middle {
            width: 384px;
            height: 450px;
            margin: 0 5px;
            float: left;
            font-size: 20px;
            font-family: "楷体";
            font-weight: 700;
            color: #0000ff;
        }
        .one {
            width: 380px;
            height: 155px;
            border: 1px solid #999;
            padding: 10px;
            box-sizing: border-box;
        }
        .two {
            width: 255px;
            height: 100px;
            border: 1px solid #999;
            margin: 20px 0;
            border-radius: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .three {
            width: 380px;
            height: 135px;
            border: 1px solid #999;
            padding: 10px;
            box-sizing: border-box;
        }
        .bottom {
            width: 700px;
            height: 70px;
            text-align: center;
            font-family: "楷体";
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="banner">
            <img src="img/11.jpg" width="700" height="70" alt="Banner"/>
        </div>
        <div class="menu">
            <img src="img/11.jpg" width="690" height="40" alt="Menu"/>
        </div>
        <div class="main">
            <div class="left">
                <marquee direction="up">
                    <img src="img/11.jpg" width="150" height="140" alt="Image"/>
                    <img src="img/11.jpg" width="150" height="140" alt="Image"/>
                    <img src="img/11.jpg" width="150" height="140" alt="Image"/>
                </marquee>
            </div>
            <div class="middle">
                <div class="one">
                    <img src="img/11.jpg" width="25" height="25" alt="Icon"/> 为您推荐
                    <br/><br/>
                    <img src="img/11.jpg" width="80" height="40" alt="Recommendation"/>
                    <img src="img/11.jpg" width="80" height="40" alt="Recommendation"/>
                    <img src="img/11.jpg" width="80" height="40" alt="Recommendation"/>
                    <img src="img/11.jpg" width="80" height="40" alt="Recommendation"/>
                    <img src="img/11.jpg" width="80" height="40" alt="Recommendation"/>
                    <img src="img/11.jpg" width="80" height="40" alt="Recommendation"/>
                </div>
                <div class="two">
                    <h1>昵心美食空间</h1>
                </div>
                <div class="three">
                    <img src="img/11.jpg" width="25" height="25" alt="Icon"/>
                    <br/>
                    <a href="#">1. 火锅团购</a><br/>
                    <a href="#">2. 烧烤团购</a><br/>
                    <a href="#">3. 自助餐团购</a><br/>
                    <a href="#">4. 新春特惠</a><br/>
                </div>
            </div>
            <div class="right">
                <marquee direction="up">
                    <img src="img/11.jpg" width="150" height="140" alt="Image"/>
                    <img src="img/11.jpg" width="148" height="140" alt="Image"/>
                    <img src="img/11.jpg" width="148" height="140" alt="Image"/>
                </marquee>
            </div>
        </div>
        <div class="bottom">
            <hr color="#0000ff">
            版权所有&copy;昵心美食空间<br/>
            地址:江门市大学路XXX号 邮编:500000 电话:0750-9999999
        </div>
    </div>
		<div align="center">Copyright &copy;2024 MortalTom</div>
		</body>
</html>

本章习题

习题一

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>走进内心的文学</title>
    <style>

        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
 

        .container {
            max-width: 1000px;
            margin: 50px auto;
            padding: 20px;
            background-color: #e0f7fa;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
 

        h1 {
            text-align: center;
            font-size: 36px;
            margin-bottom: 20px;
            background-image: url('img/11.jpg'); 
            background-size: cover;
            background-position: center;
            color: white;
            padding: 20px;
        }
 
        .footer {
            text-align: center;
            margin-top: 30px;
            padding: 20px;
            font-size: 14px;
            background-image: url('img/11.jpg'); 
            background-size: cover;
            background-position: center;
            color: white;
        }
 

        .columns {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }
 

        .box {
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            padding: 20px;
            flex: 1;
            box-sizing: border-box;
        }
 
        .box h2 {
            font-size: 24px;
            margin-bottom: 10px;
        }
 
        p {
        text-indent: 2em; 
        }
 
        .nav {
            margin-top: 10px;
            background-color: #b3e5fc;
            padding: 10px;
            text-align: center;
            background-image: url('img/11.jpg');
        }
 
        .nav a {
            text-decoration: underline;
            color: #0288d1;
            margin: 0 15px;
            font-weight: bold;
        }
 
        .nav a:hover {
            color: #01579b;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>走进内心的文学</h1>
 
        <div class="columns">

            <div class="box">

                <div class="nav">
                    <h2>生活随笔</h2>
                    <a href="#">感动心灵</a>
                    <a href="#">人生哲理</a>
                    <a href="#">励志文章</a>
                </div>
            </div>

            <div class="box">

                <div class="nav">
                    <h2>抒情散文</h2>
                    <a href="#">唯美句子</a>
                    <a href="#">美文欣赏</a>
                    <a href="#">爱情是聚</a>
                </div>
            </div>
        </div>
        <p>当你终于站在时光的这头,回首过往的种种,会毫无遗憾地告别此生吗?一位白发苍苍的老者,对着镜头说道:这辈子做自己的时光太少,一直在为别人活,从来没有为自己真正活一场.人这一生,确实有许多牵绊,让我们放不开手脚,仿佛作茧自缚,一生都在别人眼光做成的无形大网中挣扎,从没痛痛快快为自己而活.这样的人生,值得留恋吗?这样的人生,值得回首吗?</p>
        <br/>
        <p>人总会被别人的成功影响,别人混得好,心里总会咯噔一下,仿佛有一块石头堵着,很不舒服.为何不放宽心,多看看自己有的,不要总想着别人有的,如此便能释怀很多.</p>
        <br/>
        <p>人生十之八九都是在自寻烦恼,很多事本和自己八竿子打不着,亲戚的儿子混得好,又和你有什么关系呢?世界上混得好的人那么多,难道每一个人都要拿出来让自己难受一次吗?多看看自己有的,才能知足常乐.</p>
 

        <div class="footer">
            版权所有&copy走进内心的文学
        </div>
    </div>
		<div align="center">Copyright &copy;2024 MortalTom</div>
		</body>
</html>

习题二

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人生哲理</title>
    <style>
        body {
            font-family: "宋体", sans-serif;
            background-color: #f9f9f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
 
        .container {
            width: 400px;
            height: 600px;
            border: 2px solid black;
            padding: 20px;
            position: relative;
            background-color: white;
        }
 
        .border-design {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('img/11.jpg'); /* 使用你需要的花边图片 */
            background-size: contain;
            background-repeat: no-repeat;
        }
 
        .right-text {
            position: absolute;
            top: 50%;
            right: 100px;
            transform: translateY(-50%);
            writing-mode: vertical-rl;
            font-family: "微软雅黑", sans-serif;
            font-size: 24px;
            text-align: right;
        }
 
        .left-text {
            position: absolute;
            top: 50%;
            left: 100px;
            transform: translateY(-50%);
            writing-mode: vertical-rl;
            font-family: "楷体", serif;
            font-size: 24px;
            text-align: left;
        }
 
        .enter-button {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #ccc;
            padding: 10px;
            border-radius: 5px;
            writing-mode: vertical-rl;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }
 
        .enter-button:hover {
            background-color: #aaa;
        }
    </style>
</head>
<body>
 
    <div class="container">
        <div class="border-design"></div>
 
        <!-- 右侧文字，居中靠右50px，使用微软雅黑字体 -->
        <div class="right-text">
            让生活简单一点
        </div>
 
        <!-- 左侧文字，居中靠左50px，使用楷体字体 -->
        <div class="left-text">
            定而后能静，静而后能安
        </div>
 
        <div class="enter-button">
            进入网站
        </div>
    </div>
		<div align="center">Copyright &copy;2024 MortalTom</div>
		</body>
</html>