[CSS+]HTML Learn Data Day 2

总有人说前端会被ai替代，这确实是这样，我更应该学习这些东西，这个时代应该做一个全能的人？应该说是T型人才

学习这个是为了成为更好ai驾驶员

css这东西不算很复杂，但是特别繁多，这也成为了最高的学习门槛

欢迎来我的网站观赏听歌：铃仙酱

建议用电脑打开，手机不会适配。

一、CSS 基础与选择器

1. CSS 的引入方式

在 HTML 中引入 CSS 主要有三种方式，我这次主要使用了外链式，配合少量的行内式。

引入方式	语法示例	特点	适用场景
外链式	<link rel="stylesheet" href="css/index.css">	结构与样式分离，代码清晰，可复用	正式项目开发
行内式	<div style="color: red;">	权重高，但代码混乱，难以维护	临时测试或极少量的样式修正 (如 Footer)
内嵌式	<style> ... </style>	写在 head 中，不推荐用于大项目	单页面练习

2. 选择器 (Selectors)

为了精准地控制页面上的元素，需要用到选择器。

选择器类型	符号	示例	说明	权重 (优先级)
标签选择器	无	body {}, img {}	选中页面所有同名标签	低 (1)
类选择器	.	.theInf {}	选中所有 class="theInf" 的元素 (最常用)	中 (10)
ID 选择器	#	#ND {}	选中唯一 id="ND" 的元素 (如那张特写的图)	高 (100)
后代选择器	空格	.theInf img {}	选中 .theInf 内部所有的 img	叠加计算
伪类选择器	:	:hover	鼠标悬停时的状态	-

二、布局

这是今天最大的收获。以前排版可能需要用 float 清除浮动，现在用 Flex 可以轻松实现从左到右、从上到下的排列。

1. 开启 Flex 布局

只要给父盒子加上 display: flex;，它就变成了“弹性容器”。

2. 关键属性详解

我在 .theInf (个人信息区) 和 .theMusic (音乐区) 中使用了不同的排列方式。

属性名	作用	常用值	我的代码应用
flex-direction	决定主轴方向 (排列方向)	row (默认，横向) column (纵向) row-reverse (反向)	.theInf: 默认 row (左图右字) .theMusic: column (垂直居中)
justify-content	主轴上的对齐方式	flex-start (靠左/上) center (居中) space-between (两端对齐)	.theInf: center (整体居中)
align-items	侧轴上的对齐方式	center (垂直居中) stretch (拉伸)	.theMusic: center (防止子元素宽度占满)

代码实战分析：

/* 音乐区：垂直排列，所有内容居中 */
.theMusic {
    display: flex;           /* 开启弹性布局 */
    flex-direction: column;  /* 变成竖着排 */
    align-items: center;     /* 左右居中 */
}

---

三、视觉美化

为了让网页不只是“能看”，而是“好看”，我使用了以下高级属性。

1. 盒子阴影 (Box-Shadow)

给图片添加发光效果（如代码中的 #ND 诺登图），我使用了多层阴影叠加技术。

语法： box-shadow: h-shadow v-shadow blur spread color;

参数位置	参数含义	作用
第 1 个	水平偏移	正数向右，负数向左
第 2 个	垂直偏移	正数向下，负数向上
第 3 个	模糊半径	值越大，边缘越模糊 (羽化)
第 4 个	扩展半径	值越大，阴影面积越大
第 5 个	颜色	支持 rgba(r, g, b, alpha) 透明度

实战代码 (霓虹灯发光效果)：

#ND {
    box-shadow: 
        0 0 10px 2px rgba(0, 255, 127, 0.8),   /* 第一层：高亮核心 */
        0 0 30px 10px rgba(0, 255, 127, 0.5),  /* 第二层：中间光晕 */
        0 0 60px 20px rgba(0, 255, 127, 0.2);  /* 第三层：外部氛围 */
}

2. 背景渐变 (Gradient)

不再使用单一的 background-color，而是使用 linear-gradient。

• 语法：background: linear-gradient(方向, 颜色1, 颜色2);
• 应用：
  • body: to right bottom (右下角方向) 的粉色渐变。
  • .theMusic: 使用了 rgba(255,255,255,0) 实现了半透明渐变背景。

3. 过渡与动画 (Transition & Transform)

给 .theInf img 添加了鼠标悬停互动的效果。

• Transition (过渡)：transition: all 0.3s; (让变化过程持续 0.3秒，而不是瞬间完成)。
• Transform (变换)：
  • translateY(-5px): 向上位移 5 像素。
  • 配合 box-shadow 变化，产生“浮起”的立体感。

---

四、进阶难点：CSS 遮罩与负边距

这是本次代码中最复杂的部分，用于实现音乐歌词的“文字重叠与渐变消失”效果。

1. CSS Mask (遮罩)

利用 -webkit-mask-image 实现文字“渐隐”。

属性	说明	原理
-webkit-mask-image	设置遮罩图片或渐变	遮罩层中：黑色/不透明 = 显示内容 透明 = 隐藏内容

实战逻辑：

• .txt-up: 遮罩从黑色到透明 (to bottom) -> 下半部分消失。
• .txt-down: 遮罩从透明到黑色 (to bottom) -> 上半部分消失。

2. 负边距 (Negative Margin)

为了让两行文字看上去像是一个整体被切开了，需要让它们重叠。

• 技巧：margin-top: -35px;
• 作用：强行将下方的元素向上拉动，覆盖在上方元素的区域内。
• 注意：使用负边距时，通常需要配合 position: relative 和 z-index 来确保层级正确，防止被覆盖无法显示。

---

五、常用样式属性速查表

在今天的代码中，我还使用了大量的排版属性，整理如下：

类别	属性名	含义	示例值
字体	font-family	字体族	'Courier New', monospace
	font-weight	粗细	bold (粗), 100 (极细)
	letter-spacing	字间距	10px (拉开字母距离)
	line-height	行高	1.5 (倍数), 50px (垂直居中常用)
图片	object-fit	图片填充模式	cover (裁剪铺满), contain (完整显示)
	border-radius	圆角	50% (正圆形), 20px (圆角矩形)
盒模型	padding	内边距	内容与边框的距离
	margin	外边距	盒子与其他盒子的距离
	width / height	宽/高	100%, 300px, 100vh (视口高度)

---

学习心得

​ html是一个复杂的东西，虽然有ai在，但是如果不彻底学习的话，是永远做不出我想象的东西

​ 作为一名开发者，创造即是核心，如果全部丢给ai，终归是泯然众人

​ css学习才刚入门，还有更多的东西等待我去发掘，理想中的东西就是难做啊