当前位置：首页 > news >正文

CSS入门学习

news 2025/8/29 14:29:09

一、CSS的简单介绍

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页内容样式和布局的标记语言，它与HTML共同构建现代网页。

CSS的作用

· 样式控制：定义HTML元素的颜色、字体、间距、背景等视觉效果。

· 布局管理：通过定位、浮动、弹性盒子（Flexbox）、网格（Grid）等技术实现复杂页面结构。

· 响应式设计：适配不同设备（如手机、平板、PC）的屏幕尺寸。

· 交互增强：通过过渡（Transitions）和动画（Animations）提升用户体验。

基本语法

CSS规则由选择器和声明块组成：

选择器 {

属性: 值;

}

示例：将所有段落文字设为红色

p {color: red;font-size: 16px;}

引入CSS的方式

1、行内样式：直接写在HTML标签的style属性中。

<p style="color: blue;">文本</p>

2、内部样式表：在HTML的<style>标签内定义。

<style>p { color: green; }
</style>

示例：

3、外部样式表：通过.css文件引入（推荐，便于复用和维护）。

<link rel="stylesheet" href="styles.css">

示例：

注意：

优先级：就近原则，接近的先展示

二、选择器

CSS 选择器（Selector）是用于定位 HTML元素并应用样式规则的核心工具。

基础选择器

①标签选择器

· 语法：

元素名 {属性: 值;}

· 作用：匹配所有指定标签的元素。

· 示例：

<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>桌面屏幕设置</title>/*  标签选择器  */<style>/* 所有段落文字设为红色 */p {color: red;}/* 所有一级标题居中 */h1 {text-align: center;}</style></head><body><p>这是一个段落</p><h1>标题1</h1></body>

注意：

①可能影响页面所有同名元素，需谨慎使用。

②优先级较低（低于类选择器和 ID 选择器）。

②类选择器

· 语法：

.类名 {属性: 值;
}

· 作用：匹配所有具有指定 class 属性的元素。

· 示例：

<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>桌面屏幕设置</title><style>/* 类选择器  *//* 所有带有 warning 类的元素背景为黄色 */.warning {background: yellow;}/* 按钮基础样式 + 主按钮样式 */.btn {padding: 8px 16px;}.btn-primary {background: blue;color: white;}</style></head><body>  <div class="warning">警告信息</div><button class="btn btn-primary">提交</button>
</body>

注意：

优先级高于元素选择器，但低于 ID 选择器。

③ID 选择器

· 语法：

#id名 {属性: 值;
}

· 作用：匹配唯一具有指定 id 属性的元素，常用于定位页面中唯一的元素

· 示例：

<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>桌面屏幕设置</title><style>	/* ID选择器 *//* 设置页面头部样式 */#main-header {height: 80px;background: #333;color: white;}/* 关于模块隐藏边框 */#about {border: none;}</style></head><body><p id="main-header">网站标题</p><section id="about">关于我们</section>
</body>

注意：

①ID 在页面中必须唯一，重复 ID 会导致样式和脚本错误。

②优先级极高

④通配符选择器

·语法：

* {属性: 值;
}

·作用：匹配页面中所有元素（包括 <html>、<body> 及其子元素）。

·示例：

        /* 通配符选择器 *//* 清除所有元素的内外边距 */* {margin: 0;padding: 0;box-sizing: border-box; /* 推荐添加，统一盒模型 */}

对比

层次选择器

CSS 的层次选择器用于根据 HTML 元素的嵌套关系（父子、兄弟等）精准定位元素。

①后代选择器（Descendant Selector）

语法：

祖先元素 后代元素 {属性: 值;
}

· 符号：空格。

· 作用：选择指定祖先元素内的所有层级嵌套的后代元素（无论嵌套多深）。

· 示例：

<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>桌面屏幕设置</title><style>/* 后代选择器 */body p {color: blue;background: yellow;}</style>
</head>
<body><p>p0</p><p>p1</p><p>p2</p><p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li></ul>
</body>

②子选择器（Child Selector）

语法：

父元素 > 子元素 {属性: 值;
}

· 符号：大于号 >。

· 作用：仅选择直接作为父元素一级子元素的目标元素（不包含更深层的嵌套）。

· 示例：

<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>桌面屏幕设置</title><style>/* 子选择器 */body > p{color: blue; background: yellow;}</style>
</head>
<body><p>p0</p><p>p1</p><p>p2</p><p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li></ul>
</body>

③相邻兄弟选择器（Adjacent Sibling Selector）

语法：

元素A + 元素B {属性: 值;
}

· 符号：加号 +。

· 作用：选择紧跟在元素A之后的第一个同级元素B。

· 示例：

<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>桌面屏幕设置</title><style>/* 后代选择器 */<!-- body p { --><!-- color: blue; --><!-- background: yellow; --><!-- } --><!-- /* 子选择器 */ --><!-- body > p{ --><!-- color: blue;  --><!-- background: yellow; --><!-- } -->/* 相邻兄弟选择器 */.active + p{color: blue; background: yellow;}</style>
</head>
<body><p>p0</p><p class = "active">p1</p><p>p2</p><p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li></ul>
</body>

④通用兄弟选择器（General Sibling Selector）

语法：

元素A ~ 元素B {属性: 值;
}

· 符号：波浪号 ~。

· 作用：选择元素A之后的所有同级元素B（不要求紧邻）。

· 示例：

<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>桌面屏幕设置</title><style>/* 后代选择器 */<!-- body p { --><!-- color: blue; --><!-- background: yellow; --><!-- } --><!-- /* 子选择器 */ --><!-- body > p{ --><!-- color: blue;  --><!-- background: yellow; --><!-- } --><!-- /* 相邻兄弟选择器 */ --><!-- .active + p{ --><!-- color: blue;  --><!-- background: yellow; --><!-- } -->/* 通用兄弟选择器 */.kill ~ p{color: blue; background: yellow;}</style>
</head>
<body><p class = "kill">p0</p><p class = "active">p1</p><p>p2</p><p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li></ul><h>ppp</h>
</body>

对比

结构伪类选择器

①基础结构伪类

:first-child

作用：匹配父元素中的第一个子元素。

:last-child

作用：匹配父元素中的最后一个子元素。

:only-child

作用：匹配父元素中唯一一个子元素（无其他兄弟元素）。

示例：

<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>桌面屏幕设置</title><style>/*  基础结构伪类选择器 */ul li:first-child{background:red;}ul li:last-child{background:blue;}.alert:only-child{background:yellow;}</style>
</head>
<body><p>p0</p><p>p1</p><p>p2</p><p>p3</p><ul><li><p>p4</p></li><li><p class = "alert">p5</p></li><li><p>p6</p></li></ul><h>ppp</h>
</body>

②索引类伪类

:nth-child(n)

· 作用：匹配父元素中第 n 个子元素。

· 参数 n 的取值：

数字：如 3（第3个子元素）。

公式：如 2n+1（奇数项）、3n（每第3项）。

关键字：even（偶数）、odd（奇数）。

:nth-last-child(n)

·作用：与 :nth-child 类似，但从倒数第 n 个元素开始计算。

示例：

<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>桌面屏幕设置</title><style>/* 仅 body 下的第二个 p 变绿 */p:nth-child(2){background: green;}/* 倒数第二个 p 变绿 */ul li:nth-last-child(1){background: yellow;}</style>
</head>
<body><p>p0</p><p>p1</p><p>p2</p><p>p3</p><ul><li><p>p4</p></li><li><p class="alert">p5</p></li><li><p>p6</p></li></ul><h>ppp</h>
</body>
</html>

③类型过滤伪类

:nth-of-type(n)

·作用：匹配父元素中同类型元素的第 n 个。

与 :nth-child 的区别：

:nth-child 不关心元素类型，仅按位置匹配。

:nth-of-type 先过滤同类型元素，再按位置匹配。

:nth-last-of-type(n)

·作用：与 :nth-of-type 类似，但从倒数第 n 个同类型元素开始计算。

:first-of-type 与 :last-of-type

·作用：分别匹配父元素中同类型元素的第一个和最后一个。

属性选择器

属性选择器（Attribute Selectors）是 CSS 中用于根据 HTML 元素的属性（如 class、id、href、data-* 等）匹配元素的工具。Class+ID

基础语法

元素[属性] { ... }          /* 匹配具有该属性的元素 */存在性匹配
元素[属性="值"] { ... }     /* 匹配属性值完全相等的元素 */精确匹配
元素[属性^="值"] { ... }    /* 匹配属性值以指定值开头的元素*/部分匹配
元素[属性*="值"]{ ... }    /* 匹配属性值包含指定子串的元素*/部分匹配
元素[属性$="值"]{ ... }    /* 匹配属性值以指定值结尾的元素*/部分匹配
元素[属性~="值"]{ ... }   /*匹配属性值（以空格分隔的列表）中包含指定独立单词的元素*/空格分隔匹配
元素[属性|="值"]{ ... }   /*匹配属性值以指定值开头且紧跟连字符的元素*/连字符匹配

示例

<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>桌面屏幕设置</title><style>/* 所有带 id 的绿色横条添加阴影 */p[id] {box-shadow: 2px 2px 5px rgba(0,0,0,0.1);}/* p3 高亮显示 */p[data-type="highlight"] {background: #ffeb3b;}/* p5 背景变蓝（仅匹配 class 列表中的 "active"） */.list-item[class~="active"] {background: #2196f3;}/* p0-p6 和 ppp 文字颜色变绿 */p[id^="p"] {color: green;}</style>
</head>
<body><p id="p0">p0</p><p id="p1" class="text">p1</p><p id="p2" class="text bold">p2</p><p id="p3" data-type="highlight">p3</p><ul><li><p id="p4" class="list-item">p4</p></li><li><p id="p5" class="list-item active">p5</p></li><li><p id="p6" class="list-item">p6</p></li></ul><h1 id="ppp" data-role="title">ppp</h1></body>
</html>

三、美化网页

<div></div> 是 HTML 中的通用容器标签，全称为 "division"（分割、区块），用于将文档内容划分为独立的逻辑区块，通常配合 CSS 和 JavaScript 实现布局、样式或交互控制。

字体样式（Font Styles）

控制文字的字体家族、大小、粗细、倾斜等。

常用属性：

font-family：字体家族（优先级从前往后）。
font-size：字体大小（单位：px、em、rem）。
font-weight：字体粗细（normal、bold 或 100-900）。
font-style：斜体样式（normal、italic）。

font 属性简写规则：

font: [font-style] [font-weight] [font-size] [font-family];

文本样式（Text Styles）

控制文本的装饰、对齐、间距等。

常用属性：

color：文本颜色。rgb(红0~255，绿0~255，蓝0~255),rgba(红0~255，绿0~255，蓝0~255,透明度0~1)
text-decoration：文本装饰（下划线、删除线等）。场景：去除超链接下划线、删除线(none)
text-align：文本对齐（left、center、right）。
text-indent：段落首行缩进（单位：em）。
letter-spacing：字符间距。
line-height：行高（单位：无单位数值、px）。

注意：行高和块的高度一致就一直上下居中

文本阴影（Text Shadow）

为文字添加阴影效果，增强立体感。

语法：

text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;

超链接伪类（Link Pseudo-classes）

根据用户交互状态为超链接设置不同样式。

常用伪类：

**:link**：未访问的链接。

**:visited**：已访问的链接。

**:hover**：鼠标悬停。

**:active**：点击瞬间。

**:focus**：键盘聚焦时。

列表样式（List Styles）

控制列表项符号类型、位置和自定义图标（如您图中的绿色圆点）。

常用属性：

**list-style**：符号类型（disc、circle、square、none 等）。

**list-style-position**：符号位置（inside、outside）。

**list-style-image**：自定义符号图片。

背景图像应用及渐变

背景图像

核心属性

·background-image

指定图像路径，支持多图叠加（逗号分隔）：

·background-size

控制图像尺寸：

background-size: cover;    /* 覆盖容器，可能裁剪 */
background-size: contain;  /* 完整显示，不裁剪 */
background-size: 100px 50px; /* 固定尺寸 */

·background-position

定位图像起始点：

background-position: center;  /* 居中 */
background-position: 20% 80%; /* 自定义坐标 */

·background-repeat

控制平铺方式：

background-repeat: no-repeat;       /* 不平铺 */
background-repeat: repeat-x;        /* 水平平铺 */

渐变

·线性渐变（Linear Gradient）

沿直线方向颜色过渡：

div {background: linear-gradient(45deg, red, yellow 30%, blue);
}

·径向渐变（Radial Gradient）

从中心向外扩散：

div {background: radial-gradient(circle at 50% 50%, white, #f39c12);
}

示例：

<!DOCTYPE html>
<head><style>/* 字体样式 */body {font:italic bold 12px "楷体"}/* 文本样式 */.title {text-align: center;letter-spacing: 2px;}/* 文本阴影 */h1 {text-shadow: 2px 2px 4px rgba(0,0,0,0.3);}/* 超链接伪类 */a {text-decoration: none;color: black;}/* 鼠标悬停*/a:hover {color: red; }/* 鼠标点击*/a:active {color: yellow; }/* 列表样式 */ul {list-style: none;text-indent：1em;color: green;}</style>
</head>
<body><h1 class="title">示例列表</h1><p>p0</p><p>p1</p><p>p2</p><p>p3</p><ul><li>p4</li><li>p5</li><li>p6</li></ul><a href="#">示例链接</a>
</body>
</html>

四、块级元素与行内元素

块级元素（Block-level Elements）

·特性：

独占一行：元素前后会自动换行。
可设置宽高：通过 width、height 直接控制尺寸。
支持边距：可以设置 margin和padding，且上下边距会生效。
默认宽度：占满父容器的 100%（除非手动限制宽度）。
嵌套规则：可以包含其他块级元素和行内元素。

·常见块级元素：

<div>：通用容器
<p>：段落
<h1>-<h6>：标题
<ul>、<ol>、<li>：列表
<table>：表格
<form>：表单
<section>、<article>、<header>、<footer>（HTML5 语义化标签）

行内元素（Inline Elements）

·特性：

不换行：元素在同一行内显示，直到空间不足才会换行。
尺寸由内容决定：无法直接设置 width 和 height。
边距限制：margin 和 padding 的上下边距不生效，左右边距生效。
默认宽度：由内容撑开。
嵌套规则：通常只能包含文本或其他行内元素。

·常见行内元素：

<span>：通用行内器
<a>：超链接
<strong>、<em>：强调文本
<img>：图片（虽然是行内元素，但可设置宽高）
<input>：输入框
<label>：表单标签
<br>：换行

五、盒子模型

·边框（Border）

控制元素边框的样式、颜色和宽度，支持独立设置各方向边框。

border: 2px solid #3498db; /* 统一设置：宽度样式颜色 */
border-top: 1px dashed red; /* 单边设置 */
border-radius: 8px; /* 圆角边框 */

样式类型：

·内边距（Padding）

控制内容与边框之间的空间，背景色/图会覆盖内边距区域。

padding: 20px;           /* 四个方向相同 */
padding: 10px 20px;      /* 上下左右 */
padding: 10px 20px 30px 40px; /* 上右下左 */
padding-top: 15px;       /* 单边设置 */

·外边距（Margin）

控制元素与其他元素之间的空间，透明且不影响背景。

margin: 20px auto; /* 上下20px，左右居中 */
margin-left: -10px; /* 负外边距（特殊布局） */

·盒模型计算模式

通过 box-sizing 属性控制盒子尺寸的计算方式：

实例：

<!DOCTYPE html>
<html>
<head><style>/* 全局重置盒模型计算方式 */* {box-sizing: border-box;margin: 0;padding: 0;}body {background-color: white;padding: 100px; /* 页面整体内边距 */}/* 卡片容器 */.card {width: 400px;background-color: white;border: 1px dashed white; /* 边框 */border-radius: 12px;       /* 圆角 */padding: 24px;             /* 内边距 */margin: 20px auto;         /* 外边距（上下20px，左右居中） */box-shadow: 0 4px 6px rgba(0,0,0,0.1);}/* 标题区域 */.card-header {border-bottom: 2px solid red; /* 下边框 */padding-bottom: 16px;margin-bottom: 16px;}/* 按钮组 */.button-group {display: flex;gap: 12px; /* 按钮间距 */margin-top: 20px;}/* 基础按钮样式 */.button {padding: 8px 16px;       /* 内边距 */border: none;border-radius: 6px;       /* 圆角 */cursor: pointer;}/* 主按钮 */.primary-btn {background: linear-gradient(#3b82f6, #2563eb);color: white;border: 1px solid #1d4ed8; /* 边框 */}/* 次按钮 */.secondary-btn {background-color: #e5e7eb;color: #374151;border: 1px solid #d1d5db;}/* 圆形头像 */.avatar {width: 60px;height: 60px;border: 2px solid white;   /* 边框 */border-radius: 50%;        /* 圆形 */margin-right: 16px;       /* 右侧外边距 */}</style>
</head>
<body><div class="card"><div class="card-header"><h2>用户信息</h2><img src="‪C:\Users\Administrator\Desktop\eye.jpeg" class="avatar" alt="头像"></div><p>这是一个包含盒子模型核心属性的示例卡片，展示边框、内外边距和圆角的实际应用。</p><div class="button-group"><button class="button primary-btn">确认修改</button><button class="button secondary-btn">取消</button></div></div>
</body>
</html>

六、浮动

Display

利用display（inline-block），行内元素与块级元素共占一行或者块级元素与块级元素共占一行

常用值：

block 独占一行，可设置宽高

inline 行内显示，不可设置宽高

inline-block 行内显示，可设置宽高

none 消失

与 Float 的关系：

互斥性：float 会使元素变为 block（即使原为 inline）。

替代方案：display: inline-block 可实现类似浮动布局，但元素间会有空隙。

浮动（Float）

核心作用：

最初用于文本环绕图片，后发展为布局工具（如多栏布局）。
脱离文档流：浮动元素会脱离普通流，后续元素会围绕其排列。

特性：

浮动元素并排显示：多个浮动元素会横向排列。
宽度自适应：未设置宽度时，浮动元素宽度由内容撑开。
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。

示例：

<!DOCTYPE html>
<head><style>dev{margin:10px;padding:5px;}#parent{border: 1px black solid;}.float-left {float: left;width: 100px;height: 100px;border: 1px black dashed;display: inline-block;background: #ff6b6b;}.float-right {float: right;width: 100px;height: 100px;border: 1px black dashed;display: inline-block;background: #4ecdc4;}</style>
</head>
<body><div id="parent"><div class="float-left">左浮动元素</div><div class="float-right">右浮动元素</div><p>普通文本会环绕浮动元素。普通文本会环绕浮动元素。普通文本会环绕浮动元素。普通文本会环绕浮动元素。普通文本会环绕浮动元素。</p></div>
</body>
</html>

父级边框塌陷问题：

小结：

1.浮动元素后面增加空div
简单，代码中尽量避免空div
2.设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
3. overflow
简单，下拉的一些场景避免使用
4.父类添加一个伪类：after（推荐）
写法稍微复杂一点，但是没有副作用，推荐使用

实例：

<!DOCTYPE html>
<html>
<head><style>/* 基础样式 */body {margin: 0;padding: 20px;}/* 父容器（未清除塌陷时高度为0） */.parent {border: 3px solid #3498db;}/* 子元素浮动 */.left {float: left;width: 200px;height: 150px;background: #ff6b6b;}.right {float: right;width: 200px;height: 150px;background: #4ecdc4;}/* 对比提示文本样式 */.note {color: #e74c3c;margin: 10px 0;float: right;}</style>
</head>
<body><!-- 未处理塌陷的父容器 --><div class="parent"><div class="left">左浮动元素</div><div class="right">右浮动元素</div><div class="note">父级未清除浮动：边框塌陷（高度为0）</div></div></body>
</html>

方案1：使用 overflow 清除塌陷

<!DOCTYPE html>
<html>
<head><style>/* 基础样式 */body {margin: 0;padding: 20px;}/* 父容器（未清除塌陷时高度为0） *//* 方案1：使用 overflow 触发 BFC 清除塌陷 */.parent {border: 3px solid #3498db;overflow: hidden; /* 触发 BFC */}/* 子元素浮动 */.left {float: left;width: 200px;height: 150px;background: #ff6b6b;}.right {float: right;width: 200px;height: 150px;background: #4ecdc4;}/* 对比提示文本样式 */.note {color: #e74c3c;margin: 10px 0;float: right;}</style>
</head>
<body><!-- 方案1：使用 overflow 清除塌陷 --><div class="parent "><div class="left">左浮动元素</div><div class="right">右浮动元素</div><div class="note">方案1：父级使用 overflow: hidden</div></div></body>
</html>

方案2：父级使用 clearfix 伪类

<!DOCTYPE html>
<html>
<head><style>/* 基础样式 */body {margin: 0;padding: 20px;}/* 父容器（未清除塌陷时高度为0） */.parent {border: 3px solid #3498db;}/* 子元素浮动 */.left {float: left;width: 200px;height: 150px;background: #ff6b6b;}.right {float: right;width: 200px;height: 150px;background: #4ecdc4;}/* 对比提示文本样式 */.note {color: #e74c3c;margin: 10px 0;float: right;}/* 方案2：使用伪元素清除浮动（推荐） */.clearfix::after {content: "";display: block;clear: both;}</style>
</head>
<body><!-- 方案2：使用 clearfix 清除塌陷 --><div class="parent clearfix"><div class="left">左浮动元素</div><div class="right">右浮动元素</div><div class="note">方案2：父级使用 clearfix 伪类</div></div></body>
</html>

七、定位

相对定位

相对定位：position: relative;

·行为：相对于元素原本的位置进行偏移，使用 top、left、right、bottom 调整位置。

·特点：相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留；用于微调位置或作为绝对定位的参考容器。

示例：

绝对定位

position: absolute

定位：基于xxx定位，上下左右~

1、没有父级元素定位的前提下，相对于浏览器定位

2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3、在父级元素范围内移动

·特点：相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留。

固定定位

position: fixed

·特点：脱离文档流，相对于浏览器定位，滚动页面时位置不变。

示例：

输出：

z-index 以及透明

z-index 控制元素的垂直堆叠顺序（沿 Z 轴方向），值越大越靠近用户视线。

注意：仅对定位元素（position 非 static）有效。示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {box-sizing: border-box;padding: 0;margin: 0;}#content {width: 100px;border: 1px red solid;font-size: 8px;line-height: 16px;}ul {list-style: none;padding: 0;margin: 0;position: relative;}.tipText {position: absolute;width: 100px;height: 16px;top: 80px;color: white;z-index: 666; /* 文字在上层 */}.tipBg {position: absolute;width: 100px;height: 16px;top: 80px;z-index: 555;background: rgba(0,0,0,0.7); /* 背景层 */}</style>
</head>
<body><div id="content"><ul><li><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛"  width="100" height="100"></li><li class="tipText">恐怖之眼</li><li class="tipBg"></li><li>时间：2099-01-01</li><li>地点：月球一号基地</li></ul></div>
</body>
</html>

八、完整实例

<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>桌面屏幕设置</title><style>* {margin: 0;padding: 0;font: normal bold  12px "楷体";}body {background-color: rgb(235, 235, 235);}/* WIFI密码配置 */form {width: 400px;/* 表单宽度固定为400像素 */height: 200px;/* 表单高度固定为200像素 */background: linear-gradient(to top, #f7797d, #FBD786, #C6FFDD);/*渐变*/padding: 10px;/* 内容与边框的距离 */box-sizing: border-box;/* 确保 400px 包含内边距 */position: absolute;/* 脱离文档流，以浏览器作为参考点 */left: 50%;/* 将元素左边缘对齐父容器中点 */top: 1%;/* 让元素靠近浏览器顶部 */transform: translateX(-50%);/* 向左回退自身宽度的一半，实现水平居中 */}form input {width: 100%;/* 边框宽度占满父容器（400px） */height: 30px;/* 边框高度 */border:1px solid black;/* 边框粗细、颜色 */display: block;/* 块级元素（独占一行） */margin-bottom: 10px;/* 下方外边距8像素（与下一个元素的间距） */padding-left: 10px; /* 左侧内边距10像素（文本离边框的距离） */box-sizing: border-box;/* 确保输入框总宽度不超出父容器 */}form button {width: 100%;height: 30px;border:1px solid black;display: block;margin-bottom: 10px;padding-left: 10px;box-sizing: border-box;}#wifitext{margin-bottom: 10px;text-align: center;font: normal bold  20px "楷体";}/* 番茄时钟设置 */form_tomato {width: 400px;/* 表单宽度固定为400像素 */height: 230px;/* 表单高度固定为240像素 */border:1px solid black;/* 边框粗细、颜色 */background: linear-gradient(to top, #f7797d, #FBD786, #C6FFDD);/*渐变*/padding: 10px;box-sizing: border-box;position: absolute;left: 50%;top: 32%;transform: translateX(-50%);/* transform: translate(-50%, -50%); *//* 相对于现在所处位置的位移变化，x便偏移自己宽度的50%，y偏移自己高度的50% */}form_tomato select {width: 100%;height: 30px;border:1px solid black;/* 边框粗细、颜色 */display: block;margin-bottom: 8px;padding-left: 10px;box-sizing: border-box;}form_tomato button {width: 100%;height: 30px;border:1px solid black;/* 边框粗细、颜色 */display: block;margin-bottom: 8px;padding-left: 10px;box-sizing: border-box;}#tomato_text{margin-bottom: 10px;text-align: center;font: normal bold  20px "楷体";}/* 天气城市设置 */form_weather {width: 400px;/* 表单宽度固定为400像素 */height: 160px;/* 表单高度固定为160像素 */background: linear-gradient(to top, #f7797d, #FBD786, #C6FFDD);/*渐变*/padding: 10px;box-sizing: border-box;position: absolute;left: 50%;top: 67%;transform: translateX(-50%);/* transform: translate(-50%, -50%); *//* 相对于现在所处位置的位移变化，x便偏移自己宽度的50%，y偏移自己高度的50% */}form_weather select {width: 100%;height: 30px;border:1px solid black;/* 边框粗细、颜色 */display: block;margin-bottom: 8px;padding-left: 10px;box-sizing: border-box;}form_weather button {width: 100%;height: 30px;border:1px solid black;/* 边框粗细、颜色 */display: block;margin-bottom: 8px;padding-left: 10px;box-sizing: border-box;}#weather_text{margin-bottom: 10px;text-align: center;font: normal bold  20px "楷体";}.mya {width: 100%;        /* 容器宽度占满父容器 */height: 30px;       /* 固定高度30px */margin-bottom: 20x; }.mya a:nth-child(1) {float: left; /* 第一个链接左浮动 */}.mya a:nth-child(2) {float: right; /* 第二个链接右浮动 */}button {width: 100%;height: 40px;background-color: rgb(235, 235, 235);border: none;}/*点击*/button:active {box-shadow: 0 0 3px rgb(173, 172, 172); /* 点击时添加阴影效果 *//* x偏移  y偏移  模糊值 颜色 */}/* 悬停时添加交互效果 */button:hover {color: green; background-color: #e0e0e0;}</style>
</head><body><form action=""><h2 id="wifitext">WiFi 密码配置</h2><input id="wifi" type="text" placeholder="请输入WiFi账号"><input id="code" type="text" placeholder="请输入WiFi密码"><button id="set_wifi" type="button" onclick="send_wifi()">提交</button></form><form_tomato action=""><h2 id="tomato_text">番茄时钟设置</h2><select id="work_time"><option value="5">工作5分钟</option><option value="10">工作10分钟</option><option value="15">工作15分钟</option><option value="20">工作20分钟</option><option value="30">工作30分钟</option><option value="40" selected="selected">工作40分钟</option></select><select id="rest_time"><option value="5" selected="selected">休息5分钟</option><option value="10">休息10分钟</option><option value="15">休息15分钟</option><option value="20">休息20分钟</option></select><select id="time_count"><option value="1">重复1轮</option><option value="2">重复2轮</option><option value="3" selected="selected">重复3轮</option><option value="4">重复4轮</option></select><button id="set_tomato" type="button" onclick="send_tomato()">提交</button></form_tomato><form_weather action=""><h2 id="weather_text">天气城市设置</h2><select id="city"><option value="guangzhou">广州</option><option value="shenzhen">深圳</option><option value="shanghai">上海</option><option value="chongqing">重庆</option><option value="zhanjiang">湛江</option><option value="maoming">茂名</option><option value="beijing" selected="selected">北京</option></select><button id="set_city" type="button" onclick="send_city()">提交</button><button id="back" type="button" onclick="send_back()">退出</button></form_weather></body>