目录
[5.1 盒模型的定义](#5.1 盒模型的定义)
[5.2 CSS元素的高度和宽度](#5.2 CSS元素的高度和宽度)
[1. 高度(height)和宽度(width)属性](#1. 高度(height)和宽度(width)属性)
[2. 默认行为](#2. 默认行为)
[3. 单位](#3. 单位)
[4. 盒模型对宽度和高度的影响](#4. 盒模型对宽度和高度的影响)
[5. boxsizing属性](#5. boxsizing属性)
[6. 自动高度](#6. 自动高度)
[7. 最小和最大宽度/高度](#7. 最小和最大宽度/高度)
[8. 溢出内容处理(overflow)](#8. 溢出内容处理(overflow))
[5.3 边距设置和边框设置](#5.3 边距设置和边框设置)
[1. 边距设置(Margin)](#1. 边距设置(Margin))
[2. 边框设置(Border)](#2. 边框设置(Border))
[5.4 CSS元素的定位](#5.4 CSS元素的定位)
[1. position 属性的值](#1. position 属性的值)
[2. static(静态定位)](#2. static(静态定位))
[3. relative(相对定位)](#3. relative(相对定位))
[4. absolute(绝对定位)](#4. absolute(绝对定位))
[5. fixed(固定定位)](#5. fixed(固定定位))
[6. sticky(粘性定位)](#6. sticky(粘性定位))
[7. top、right、bottom、left 属性](#7. top、right、bottom、left 属性)
[8. 包含块(Containing Block)](#8. 包含块(Containing Block))
[9. Z轴定位(zindex 属性)](#9. Z轴定位(zindex 属性))
[5.5 CSS元素的浮动](#5.5 CSS元素的浮动)
[1. 浮动的基本概念](#1. 浮动的基本概念)
[2. 浮动的效果](#2. 浮动的效果)
[3. 清除浮动(Clearfix)](#3. 清除浮动(Clearfix))
[4. 浮动的常见用途](#4. 浮动的常见用途)
[5. 注意事项](#5. 注意事项)
[6. 替代方案](#6. 替代方案)
[5.6 综合案例--昵心美食空间](#5.6 综合案例--昵心美食空间)
5.1 盒模型的定义
盒模型(Box Model)是Web开发中的一种概念,用于描述HTML元素如何在页面上占据空间。它将每个HTML元素看作是一个矩形盒子,并且定义了这个盒子由哪些部分组成,如何计算元素的总大小。盒模型包括以下四个区域:
-
内容区域(Content): 显示元素的实际内容,如文本或图片。这是最内部的区域,定义了元素的宽度和高度。
-
内边距(Padding): 内容区域与边框之间的空白区域。内边距会增加元素的整体尺寸,但它的背景颜色或图片可以扩展到内边距区域。
-
边框(Border): 包围内边距和内容区域的边界。边框的厚度、样式和颜色都可以调整,且会增加元素的总宽度和高度。
-
外边距(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
css
div {
width: 300px;
margin: 0 auto; / 上下边距为 0,左右边距自动分配,居中元素 /
}
负边距
margin 属性也可以使用负值,这会将元素"拉近"其他元素或缩小它与其他元素的距离。
css
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
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
css
borderwidth: 5px;
borderwidth: thin;
边框颜色(bordercolor)
bordercolor 用来指定边框的颜色,可以用颜色名称、RGB、HEX等方式。
css
css
bordercolor: red;
bordercolor: ff0000;
单独设置各边的边框
可以分别为元素的四条边设置不同的边框属性:
bordertop
borderright
borderbottom
borderleft
例如:
css
css
/ 设置上边框为红色实线,宽度为3px /
bordertop: 3px solid red;
/ 为四条边设置不同的颜色 /
bordertopcolor: red;
borderrightcolor: blue;
borderbottomcolor: green;
borderleftcolor: yellow;
圆角边框(borderradius)
borderradius 用于创建圆角边框,允许元素的边角变得圆滑。
css
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
css
div {
position: static; / 默认值 /
}
在这种情况下,元素会按照它在HTML中的位置,依次排列,不会被特别定位。
3. relative(相对定位)
元素仍然保持在文档流中的位置,但会相对于它自己原来的位置进行偏移。
使用 top、right、bottom 和 left 属性来设置相对于它自己原来位置的偏移量。
例子:
css
css
div {
position: relative;
top: 20px; / 元素会从原来位置向下移动20px /
left: 10px; / 元素会从原来位置向右移动10px /
}
在相对定位中,元素依然占据它原本的位置,只是视觉上被偏移到新的位置。
4. absolute(绝对定位)
元素相对于最近的定位祖先(非 static 定位的祖先元素)进行定位。如果没有定位祖先,元素将相对于文档的根元素(通常是 <html> 或 <body>)进行定位。
元素会脱离文档流,不占据原来的位置。它不会影响其他元素的位置,其他元素会填补它的原位置。
例子:
css
css
div {
position: absolute;
top: 50px;
left: 100px;
}
在这种情况下,元素会被从文档流中移出,并根据 top 和 left 设置的位置进行放置。
绝对定位的特性:
相对最近的非 static 定位祖先元素:例如,如果一个祖先元素有 position: relative;,则绝对定位的元素会以该元素为参考。
脱离文档流:其他元素会像它不存在一样重新排列布局。
5. fixed(固定定位)
元素相对于浏览器窗口(视口)进行定位,而不受页面滚动的影响。
fixed 定位的元素也脱离文档流,不会影响其他元素。
例子:
css
css
div {
position: fixed;
top: 0;
right: 0;
}
在这种情况下,元素会固定在视口的右上角,无论页面如何滚动,它都不会移动。
固定定位的典型用途:
固定导航栏、浮动按钮等,始终保持在浏览器窗口中的某个固定位置。
6. sticky(粘性定位)
sticky 是相对定位和固定定位的结合。
元素最初是相对于文档流进行相对定位,当滚动达到特定位置时,元素会"粘附"在视口的某个位置,变成固定定位。
需要结合 top、right、bottom、left 属性指定元素在视口中"粘附"的位置。
例子:
css
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
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
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
html
<div style="float: left; width: 200px;">浮动元素</div>
<p style="clear: both;">清除浮动后的文本段落。</p>
方法二:使用伪元素(clearfix)
为父元素添加清除浮动的效果,可以通过伪元素实现:
css.
css
clearfix::after {
content: "";
display: table;
clear: both;
}
将 .clearfix 类添加到包含浮动元素的父元素:
html
css
<div class="clearfix">
<div style="float: left;">浮动元素</div>
<div style="float: right;">另一个浮动元素</div>
</div>
4. 浮动的常见用途
图文排版:让文本环绕图像。
多列布局:在容器中创建多列效果。
导航栏:水平排列导航链接。
5. 注意事项
高度问题:浮动元素可能会导致父元素高度为零。这是因为父元素不包含浮动的子元素。使用清除浮动的方法可以解决这个问题。
文档流影响:浮动会影响文档流,其他元素会尝试填补浮动元素的空间,因此使用时要注意布局。
浮动与响应式设计:在响应式设计中,使用浮动时要小心,可能会影响元素在不同屏幕尺寸下的排列。
6. 替代方案
随着CSS布局技术的发展,使用浮动布局的情况逐渐减少。现代布局技术如 Flexbox 和 CSS Grid 提供了更灵活和强大的布局功能,通常可以更好地满足复杂布局的需求。
总结
浮动是一个强大的工具,用于创建文本环绕和多列布局。通过理解和正确使用浮动及清除浮动的技巧,可以有效地控制网页布局。尽管浮动在现代设计中逐渐被其他布局方式取代,但在一些简单的布局需求中,仍然是一个有效的选择。
5.6 综合案例--昵心美食空间
代码:
html
<!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">
版权所有©昵心美食空间<br/>
地址:江门市大学路XXX号 邮编:500000 电话:0750-9999999
</div>
</div>
<div align="center">Copyright ©2024 MortalTom</div>
</body>
</html>
set-code-hide
本章习题
习题一
代码:
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">
版权所有©走进内心的文学
</div>
</div>
<div align="center">Copyright ©2024 MortalTom</div>
</body>
</html>
习题二
代码:
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 ©2024 MortalTom</div>
</body>
</html>