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

Python Day29 CSS样式

news 2025/8/16 18:17:11

一、子选择器

语法：selector1 > selector2（选中 selector1 的直接子元素 selector2）

<style>.box>a{/* 和文本 text 相关的 css样式*//*text-decoration : 文本装饰none : 去掉文本下划线underline : 添加下划线overline : 添加上划线line-through : 添加删除线text-decoration-color : 文本装饰颜色text-decoration-style : 设置 装饰线条 样式solid : 直线（默认）dashed : 虚线dotted : 点装线double : 双直线上述三个属性可以简写为 text-decoration*/text-decoration: line-through; /* 去掉文本装饰  */text-decoration-color: red;text-decoration-style: dashed;text-decoration: underline red dashed;/*text-transform 文本转换capitalize : 将每个单词的首字母转大写lowercase : 转全小写uppercase : 转全大写*/text-transform: capitalize;/*text-indent :首行缩进。如果值是负数，代表首行悬挂支持 px 、 em */text-indent: 32px;/*text-align : 文本水平对齐方式 left （默认值）right center */text-align: center;/* 最后一行文本的对齐方式 */text-align-last: center;}
</style>
<div class="box"><a href="">baidu</a><p><a href="">新浪</a> <!-- 该a标签不是.box的直接子元素，不被.box>a选中 --></p>
</div>

二、兄弟（同胞）选择器

selector1 + selector2：获取 selector1 紧邻的下个兄弟元素
selector1 ~ selector2：获取 selector1 后面所有的兄弟元素

<style>/*white-space : 空白符处理方案wrap ： 自动换行 (默认值)nowrap : 强制不换行pre : 使用预设模式*/.fox ~ p {/* 单行文本溢出显示省略号：white-space: nowrap;overflow:hidden;text-overflow: ellipsis; *//* 多行文本溢出显示省略号（仅webkit内核有效） */width: 400px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; /* 显示3行 */line-clamp: 3;overflow: hidden;text-overflow: ellipsis;}
</style><div class="fox"><p>Hello</p>
</div>
<p>近期，随着大模型技术的发展，长文本问题逐渐成为热门且关键的问题，不妨简单梳理一下近期出现的典型的长文本模型：10 月上旬，Moonshot AI 的 Kimi Chat 问世，这是首个支持 20 万汉字输入的智能助手产品；10 月下旬，百川智能发布 Baichuan2-192K 长窗口大模型，相当于一次处理约35 万个汉字；11 月上旬，OpenAI 发布支持 128K 上下文窗口的 GPT-4 Turbo 模型；11 月下旬，Anthropic 发布支持 200K 上下文窗口的 Claude 2.1 模型;12 月上旬，零一万物开源了长文本模型 Yi-6B-200K 和 Yi-34B-200K。实际上，随着文本长度的提高，模型能够处理问题的边界也大大提高，因此研究并解决长文本问题就显得非常必要。本文将从长文本问题的本质出发，逐步分析和研究长文本实现的问题及解决办法。</p>

三、溢出解决方案

内容超出盒子高度（盒子设置了固定高度）
- 高度自适应：height: auto
- 使用overflow：控制溢出内容显示方式
  - visible：正常显示（默认）
  - hidden：隐藏溢出内容
  - scroll：强制显示滚动条
  - auto：溢出时显示滚动条
- 多行文本溢出显示省略号（见上文兄弟选择器示例）

内容超出盒子宽度（默认自动换行，可通过white-space: nowrap强制不换行）

单行文本溢出显示省略号：

css

white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */

四、分组选择器

语法：selector1, selector2（同时选中多个选择器，应用相同样式）

<style>.box1 > p ,.box1 + div{/*  text-shadow 设置文字的阴影 值格式为：x y r color（可多个阴影）x: 水平方向投影偏移距离y: 垂直方向投影偏移距离r: 阴影模糊半径color : 投影颜色*/text-shadow: 3px 2px 2px red;}
</style><div class="box1"><p>在实际中通常 (在长文本情况下，可能会出现 的情况，但影响不是决定性的)，因此该项可近似认为约等于 2。即在一次前向传递中，对于每个token，每个模型参数，需要进行2次浮点数运算(一次乘法法运算和一次加法运算)。考虑到后向传递的计算量是前向传递的2倍。因此一次训练迭代中，对于每个 token，每个模型参数，需要进行次浮点数运算。</p>
</div><div>除了模型参数、梯度、优化器状态外，占用显存的大头就是前向传递过程中计算得到的中间激活值。这里的激活（activations）指的是：前向传递过程中计算得到的，并在后向传递过程中需要用到的所有张量。
先分析 Decoder layer 中 self-attention 的中间激活：
1. 对于 ，需要保存它们共同的输入 ，这就是中间激活。输入 的形状为 ，元素个数为 ，占用显存大小为 。
</div>

五、行内元素垂直对齐

通过vertical-align控制行内（块）元素的垂直对齐方式：

baseline：基线对齐（默认）
top：与容器顶部对齐
middle：垂直居中对齐等

<style>*{padding: 0;margin: 0;}.search{background-color: chartreuse;height: 80px;line-height: 80px; /* 行高等于高度，实现单行文本垂直居中 */text-align: center;}.search [type=text] {width: 500px;height: 60px;border:1px solid rgb(13, 6, 114);outline:none; /* 去掉聚焦时的默认边框 */vertical-align: middle; /* 与按钮垂直居中对齐 */}.search [type=button]{width: 80px;height: 60px;border: 1px;vertical-align: middle; /* 与输入框垂直居中对齐 */}
</style><div class="search"><input type="text"><input type="button" value="搜索">
</div>

六、元素显示与光标样式

display 属性：控制元素显示类型
- block：转为块元素（独占一行）
- inline-block：转为行内块元素（可设置宽高，不独占一行）
- inline：转为行内元素（不可设置宽高）
- none：隐藏元素（不占用空间）
visibility 属性：控制元素显示状态
- visible：显示（默认）
- hidden：隐藏（仍占用空间）
opacity：设置透明度（1 为不透明，0 为完全透明，子元素会继承透明度）
cursor：设置光标形状
- pointer：手指（链接默认）
- help：帮助图标
- move：移动图标

<style>a{display: block; /* 超链接转为块元素，独占一行 */}a:hover{color: aqua;cursor: pointer; /* 鼠标悬停时显示手指光标 */}/* [type=checkbox]:checked{width: 40px;height: 40px;} *//* input:focus{border: 10px solid black;} */
</style><a href="https://www.baidu.com">百度</a>
<a href="https://www.sina.com">新浪</a>
<a href="https://www.yahoo.com">雅虎</a>
<a href="https://www.163.com">网易</a>
<a href="http://www.qikuedu.com">奇酷</a><input type="checkbox" value="1">吃饭
<input type="checkbox" value="2">睡觉
<input type="checkbox" value="3">拉粑粑

七、伪类选择器

选中指定状态或位置的元素，分为以下几类：

1. A 标签特有伪类

:link：未访问过的超链接
:active：鼠标按下未弹起时
:visited：已访问的超链接
:hover：鼠标悬停时

2. 状态相关伪类

:checked：选中的单选框 / 复选框
:selected：选中的下拉列表项
:focus：获取焦点的元素（如输入框）
:disabled：被禁用的元素

3. 位置相关伪类

:first-child：第一个子元素（需满足条件）
:last-child：最后一个子元素（需满足条件）
:nth-child(exp)：指定位置的子元素（exp 为表达式，如 2n 选偶数位，2n+1 选奇数位）
:first-of-type：同类型中第一个元素
:last-of-type：同类型中最后一个元素
:nth-of-type：同类型中指定位置的元素

4. 其他伪类

:not(css-selector)：排除指定元素
:has(css-selector)：包含指定元素的父元素

<style>.dlbox input:not([type=submit]){ /* 排除type=submit的input */width: 300px;height: 30px;}.dlbox:has(a){ /* 包含a标签的.dlbox */background-color: aquamarine;}
</style><div class="dlbox"><input type="text"><br><input type="password"><br><input type="submit" value="登录">
</div><div class="dlbox"><a href="">百度</a>
</div>

八、伪元素选择器

生成并样式化元素的虚拟子元素，语法为::伪元素：

::before：在元素所有子元素前生成虚拟子元素
::after：在元素所有子元素后生成虚拟子元素（需配合content属性设置内容）
::first-letter：选中元素中第一个字符
::first-line：选中元素第一行内容
::selection：选中光标选中的文字
::placeholder：选中输入框的提示文本

<style>.wbox::before{content:":)"; /* 必须设置content，可为空 */}.wbox::after{content: "T T";}
</style><div class="wbox"><a href="">百度</a><a href="">新浪</a>
</div>

九、盒子模型

所有标签均可视为盒子，包含内容、内边距、边框、外边距四部分，分为两种类型：

类型	特点（width/height 含义）	总大小计算方式
标准盒子	仅指内容大小	内容 + 内边距 + 边框 + 外边距
怪异盒子	指内容 + 内边距 + 边框的总大小	width/height + 外边距

通过box-sizing设置：

content-box：标准盒子（默认）
border-box：怪异盒子

十、边框与圆角

1. 边框样式

.ppbox{width: 300px;height: 300px;/* 单边框设置（上、左、下、右） */border-top:5px red solid; /* 宽度 颜色 样式 */border-left:10px gold dashed;border-bottom:15px rebeccapurple dotted;/* border-right: 20px double rosybrown; *//* 统一设置四边边框 */border: 15px solid black;
}/* 利用边框实现三角形（宽高为0，仅设置单边边框颜色，其他边透明） */
.sanjiao{width: 0;height: 0;border: 100px solid transparent; /* 其他三边透明 */border-top: 100px solid green; /* 上边设置颜色 */
}

<div class="ppbox"></div>
<div class="sanjiao"></div>

2. 边框圆角

通过border-radius设置圆角，值可为像素或百分比：

1 个值：四边圆角相同
2 个值：左上 = 右下，右上 = 左下
3 个值：左上，右上 = 左下，右下
4 个值：左上，右上，右下，左下

<style>.box_ll{font-size: 0; /* 解决行内块元素间隙问题 */}.box_ll *{box-sizing: border-box; /* 怪异盒子模型 */height: 36px;vertical-align: middle;}.box_ll input[type=text]{width: 600px;border: 2px solid #ddd;outline: none;border-right: none;border-radius: 12px 0 0 12px; /* 左上、右下圆角12px */}.box_ll input[type=submit]{width: 100px;border: 2px solid #ddd;border-left: none;border-radius: 0 12px 12px 0; /* 右上、左下圆角12px */}
</style><div class="box_ll"><input type="text"><!-- button也可表示按钮，type属性：submit（提交）、button（普通）、reset（重置） --><input type="submit" value="搜索">
</div><div> dadas</div>

一、搜索框样式实现

要求：使用 CSS 样式实现特定搜索框效果（输入框、图标、按钮组合，带圆角）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>搜索框样式</title><style>.box{font-size: 0; /* 消除行内块元素间隙 */}.box *{box-sizing: border-box; /* 怪异盒子模型 */height: 30px;vertical-align: middle; /* 垂直居中对齐 */}.box input[type=text]{width: 300px;outline: none; /* 去掉聚焦边框 */border-radius: 8px 0 0 8px; /* 左圆角 */border: 1px solid #ccc;border-right: none; /* 去掉右侧边框，与图标衔接 */background-color: rgb(249, 247, 247);}.box img{border: 1px solid #ccc;border-left: none;border-right: none; /* 图标左右边框处理 */}.box input[type=submit]{width: 80px;border: 1px solid #ccc;border-left: none; /* 去掉左侧边框，与图标衔接 */border-radius: 0 8px 8px 0; /* 右圆角 */background-color: rgb(56, 56, 212);color: white;}</style>
</head>
<body><div class="box"><input type="text"><img src="../OIP-C.webp" alt=""><input type="submit" value="百度一下"></div>
</body>
</html>

二、超链接 (a 标签) 样式修改

要求：

去掉超链接默认下划线
字体颜色设为 #ddd（灰色）
字体为黑体
鼠标悬停时：字体改为微软雅黑，颜色改为 #ccc

<style>a{text-decoration: none; /* 去掉下划线 */color: #ddd; /* 灰色字体 */font-family: 黑体; /* 黑体字体 */}a:hover{ /* 鼠标悬停伪类 */color: #ccc; /* 颜色变为#ccc */font-family: 微软雅黑; /* 字体改为微软雅黑 */}
</style>

三、边框制作三角形

要求：定义 4 个 div 标签，使用边框样式制作 4 个不同方位的三角形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三角形制作</title><style>/* 下三角形（上边框有颜色，其他边透明） */.s1{width: 0;height: 0;border: 100px solid transparent; /* 四边透明边框 */border-top: 100px solid green; /* 上边框显色，形成下三角 */}/* 右三角形（左边框有颜色，其他边透明） */.s2{width: 0;height: 0;border: 100px solid transparent;border-left: 100px solid green; /* 左边框显色，形成右三角 */}/* 左三角形（右边框有颜色，其他边透明） */.s3{width: 0;height: 0;border: 100px solid transparent;border-right: 100px solid green; /* 右边框显色，形成左三角 */}/* 上三角形（下边框有颜色，其他边透明） */.s4{width: 0;height: 0;border: 100px solid transparent;border-bottom: 100px solid green; /* 下边框显色，形成上三角 */}</style>
</head>
<body><div class="s1"></div> <!-- 下三角形 --><div class="s2"></div> <!-- 右三角形 --><div class="s3"></div> <!-- 左三角形 --><div class="s4"></div> <!-- 上三角形 -->
</body>
</html>

四、b 标签盒子样式设置

要求：

将 b 标签设置为 500×500 的盒子
内容水平居中、垂直居中
内容只允许一行显示
字体大小 80px
内容超出时显示滚动条

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>b标签盒子样式</title><style>b{display: inline-block; /* 转为行内块，可设置宽高 */width: 500px;height: 500px;background-color: black; /* 背景色（示例） */color: white; /* 文字颜色（示例） */font-size: 80px; /* 字体大小 */white-space: nowrap; /* 强制不换行 */overflow-x: scroll; /* 水平溢出显示滚动条 */text-align: center; /* 水平居中 */line-height: 500px; /* 垂直居中（行高=高度） */}</style>
</head>
<body><b>使用 CSS 将 b 标签 设置为 500 * 500 大小的盒子、并设置 内容 水平居中，b标签中的内容 只允许出现一行，且垂直居中在盒子中 字体大小设置为 80px 。如果内容超出了盒子，则自动显示滚动条</b>
</body>
</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>img{width: 300px;height: 300px; /* 图片大小（示例） */}div p{width: 300px; /* 与图片同宽 */display: block;white-space: nowrap; /* 强制不换行 */overflow: hidden; /* 隐藏溢出内容 */text-overflow: ellipsis; /* 溢出显示省略号 */}</style>
</head>
<body><div><img src="http://img11.360buyimg.com/jdcms/s230x230_jfs/t1/107298/1/49481/101814/6600d0a8F1b2bb986/c3f214edeb991002.jpg.avif"/><p>希诺双层玻璃杯2024新款鹅蛋泡茶杯办公室大容量水杯车载杯子 9390珠光本色 280ml</p></div>
</body>
</html>

六、商品信息文本溢出处理（多行）

要求：对商品描述文本实现多行（3 行）溢出显示省略号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>商品文本多行溢出</title><style>img{width: 100px;height: 100px; /* 图片大小（示例） */}div p{width: 100px; /* 固定宽度 */display: -webkit-box; /* webkit内核盒子模型 */-webkit-box-orient: vertical; /* 垂直排列 */-webkit-line-clamp: 3; /* 显示3行 */line-clamp: 3; /* 标准属性（部分浏览器支持） */overflow: hidden; /* 隐藏溢出内容 */text-overflow: ellipsis; /* 溢出显示省略号 */}</style>
</head>
<body><div><img src="http://img11.360buyimg.com/jdcms/s230x230_jfs/t1/107298/1/49481/101814/6600d0a8F1b2bb986/c3f214edeb991002.jpg.avif"/><p>希诺双层玻璃杯2024新款鹅蛋泡茶杯办公室大容量水杯车载杯子 9390珠光本色 280ml</p></div>
</body>
</html>

七、横向一级导航实现

要求：

导航宽度铺满父容器，高度 80px，背景色 #01AAED，字体色 #f0f0f0
文字水平、垂直居中
鼠标悬停时：字体色 #fff，背景色 #1890ec
光标为 “小手” 形状

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>横向导航</title><style>ul{margin: 0;padding: 0; /* 清除默认内外边距 */height: 80px;background-color: #01AAED; /* 导航背景色 */color: #f0f0f0; /* 文字颜色 */text-align: center; /* 子元素水平居中 */list-style: none; /* 去掉列表默认样式 */}li{display: inline-block; /* 转为行内块，实现横向排列 */padding: 0 20px; /* 导航项间距（示例） */cursor: pointer; /* 光标为小手 */line-height: 80px; /* 垂直居中（行高=高度） */}li:hover {color: #fff; /* 悬停文字色 */background-color: #1890ec; /* 悬停背景色 */}</style>
</head>
<body><ul><li>首页</li><li>学生中心</li><li>个人信息</li><li>退出登录</li></ul>
</body>
</html>

查看全文

http://www.dtcms.com/a/329767.html