文章详情

返回首页

html常用代码

分享文章 作者: Ws01 创建时间: 2025-11-25 更新时间: 2025-12-25 📝 字数: 1,074 字 👁️ 阅读: 33 次

原始 Markdown

transform: translateY(12px);  /* 子元素往下移动12px */
transform: translateY(-12px);  /* 子元素往上移动12px */

justify-content: space-between;  /* 子元素分散排列 */
justify-content: flex-start;  /* 子元素从左侧开始排列 */
gap: 20px;  /* 子元素之间的空隙 */

background: url('https://121.freewebhostmost.com/') no-repeat center center fixed;  /* 背景图片 */
background-color: #f4f4f4;  /* 背景色 */

min-height: 60px; /* 最小高度设置为60px */
max-height: 120px; /* 最大高度设置为120px */

font-size: 18px; /* 字号大小*/

border-radius: 5px; /* 四角弧度,一般高为5,50为圆*/

border: 2px solid gray;  /* 添加2px灰色边框 */
border: 1px #aaa;  /* 添加 1px 和 #aaa 色边框 */
--border-color: #aaa;  /* 边框,原#436EEED */

overflow-y: auto; /* 当内容超过最大高度时显示滚动条 */

margin-left: 20px; /* 分类标签右移添加这一行 */
color: green; /* 分类标签字体颜色添加这一行 */
text-align: left; /* 添加左对齐 */

/* 设置文件名的最大宽度,并且超出部分省略显示 */
.file-name {
    max-width: 200px; /* 设置最大宽度,您可以调整为合适的值 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block; /* 确保文件名在一行内显示 */
}

/* 设置图片背景的毛玻璃效果,值越大越模糊 */
    backdrop-filter: blur(2px);

预览

transform: translateY(12px); / 子元素往下移动12px / transform: translateY(-12px); / 子元素往上移动12px /

justify-content: space-between; / 子元素分散排列 / justify-content: flex-start; / 子元素从左侧开始排列 / gap: 20px; / 子元素之间的空隙 /

background: url('https://121.freewebhostmost.com/') no-repeat center center fixed; / 背景图片 / background-color: #f4f4f4; / 背景色 /

min-height: 60px; / 最小高度设置为60px / max-height: 120px; / 最大高度设置为120px /

font-size: 18px; / 字号大小/

border-radius: 5px; / 四角弧度,一般高为5,50为圆/

border: 2px solid gray; / 添加2px灰色边框 / border: 1px #aaa; / 添加 1px 和 #aaa 色边框 / --border-color: #aaa; / 边框,原#436EEED /

overflow-y: auto; / 当内容超过最大高度时显示滚动条 /

margin-left: 20px; / 分类标签右移添加这一行 / color: green; / 分类标签字体颜色添加这一行 / text-align: left; / 添加左对齐 /

/ 设置文件名的最大宽度,并且超出部分省略显示 / .file-name { max-width: 200px; / 设置最大宽度,您可以调整为合适的值 / overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; / 确保文件名在一行内显示 / }

/ 设置图片背景的毛玻璃效果,值越大越模糊 / backdrop-filter: blur(2px);