微信小程序怎么上架商品_怎样建设网站最好_知名网络软文推广平台_网站搜索引擎推广

目录

5.1 盒模型的定义

5.2 CSS元素的高度和宽度

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

 2. 默认行为

 3. 单位

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

 5. boxsizing属性

 6. 自动高度

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

 8. 溢出内容处理（overflow）

5.3 边距设置和边框设置

 1. 边距设置（Margin）

 2. 边框设置（Border）

5.4 CSS元素的定位

 1. position 属性的值

 2. static（静态定位）

 3. relative（相对定位）

 4. absolute（绝对定位）

 5. fixed（固定定位）

 6. sticky（粘性定位）

 7. top、right、bottom、left 属性

 8. 包含块（Containing Block）

 9. Z轴定位（zindex 属性）

5.5 CSS元素的浮动

 1. 浮动的基本概念

 2. 浮动的效果

 3. 清除浮动（Clearfix）

 4. 浮动的常见用途

 5. 注意事项

 6. 替代方案

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

本章习题

习题一

 习题二

---

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

1. div {
3.   width: 200px;
5.   height: 100px;
7.   padding: 10px;
9.   border: 5px solid black;
11.   margin: 20px;
13. }

在默认的 盒模型（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

1. div {
3.   width: 200px;
5.   height: 100px;
7.   padding: 10px;
9.   border: 5px solid black;
11.   boxsizing: borderbox;
13. }

在这种情况下：

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

 总高度 仍然是 100px。

 6. 自动高度

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

  

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

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

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

例如：

css

1. div {
3.   width: 100%;
5.   minwidth: 300px;
7.   maxwidth: 800px;
9. }

此时，元素的宽度会根据父容器调整，但不会小于 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

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

边距的取值

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

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

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

  css 

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

  

 负边距

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

css

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

 边距合并

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

例如：

html

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

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

 2. 边框设置（Border）

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

 边框的属性

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

 borderwidth：设置边框的宽度。

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

 bordercolor：设置边框的颜色。

 边框的缩写用法

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

css

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

 边框样式（borderstyle）

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

 none：无边框。

 solid：实线边框。

 dashed：虚线边框。

 dotted：点线边框。

 double：双线边框。

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

 ridge：凸起的边框。

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

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

 边框宽度（borderwidth）

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

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

例如：

css

1. borderwidth: 5px;
3. borderwidth: thin;

 边框颜色（bordercolor）

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

css

1. bordercolor: red;
3. bordercolor: ff0000;

 单独设置各边的边框

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

 bordertop

 borderright

 borderbottom

 borderleft

例如：

css

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

 圆角边框（borderradius）

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

css

1. / 创建 10px 的圆角 /
3. borderradius: 10px;
7. / 创建椭圆形的圆角：水平和垂直方向半径不同 /
9. 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

1. div {
3.   position: static; / 默认值 /
5. }

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

 3. relative（相对定位）

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

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

例子：

css

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

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

 4. absolute（绝对定位）

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

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

例子：

css

1. div {
3.   position: absolute;
5.   top: 50px;
7.   left: 100px;
9. }

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

 绝对定位的特性：

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

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

 5. fixed（固定定位）

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

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

例子：

css

1. div {
3.   position: fixed;
5.   top: 0;
7.   right: 0;
9. }

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

 固定定位的典型用途：

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

 6. sticky（粘性定位）

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

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

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

例子：

css

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

当页面滚动到元素与视口顶部距离为 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

1. div {
3.   position: absolute;
5.   zindex: 10; / 元素会覆盖 zindex 较低的元素 /
7. }

 总结

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

5.5 CSS元素的浮动

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

 1. 浮动的基本概念

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

   left：元素向左浮动。

   right：元素向右浮动。

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

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

 2. 浮动的效果

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

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

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

 示例：

html

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

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

 3. 清除浮动（Clearfix）

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

 方法一：使用 clear 属性

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

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

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

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

html

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

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

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

css.

1. clearfix::after {
3.   content: "";
5.   display: table;
7.   clear: both;
9. }

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

html

1. <div class="clearfix">
3.   <div style="float: left;">浮动元素</div>
5.   <div style="float: right;">另一个浮动元素</div>
7. </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>