pink老师html5+css3day09

文章目录

• 移动端
• 优衣问诊登录页
• 响应式布局
• 响应式布局项目

移动端

优衣问诊登录页

为什么要用 :root？

它的最大用处是 ------ 定义全局 CSS 变量（自定义属性）。

:root {
  --main-color: #3498db;
  --text-size: 16px;
}

body {
  color: var(--main-color);
  font-size: var(--text-size);
}

在 HTML 中， 标签表示一个表单（Form），用于收集用户输入并提交给服务器。它是网页中最基础的交互组件之一。

autocomplete 是一个 HTML 属性，用于控制浏览器是否自动填充（自动补全）用户以前输入过的内容，例如用户名、邮箱、地址、电话号码、密码等

属性	说明	示例
action	表单提交的目标 URL（服务器地址）	action="/login"
method	表单的提交方式：GET（在地址栏显示）或 POST（更安全）	method="post"
target	提交结果在哪打开（如 _blank 新标签页）	target="_blank"
enctype	指定表单数据的编码方式，常见用于文件上传	enctype="multipart/form-data"

控件	标签	示例
文本输入框	<input type="text">	用户名
密码框	<input type="password">	密码
单选框	<input type="radio">	性别选择
复选框	<input type="checkbox">	兴趣爱好
下拉框	<select><option></option></select>	城市选择
文本域	<textarea></textarea>	留言输入
文件上传	<input type="file">	上传图片
提交按钮	<input type="submit"> 或 <button>	提交表单

::before 和 ::after 是 CSS 伪元素（pseudo-elements），用来在一个元素的内容之前或之后插入虚拟的内容，而无需在 HTML 中添加额外标签。

selector::before {
  content: "内容";
}

selector::after {
  content: "内容";
}

z-index 是 CSS 中控制元素堆叠顺序（层叠顺序） 的属性。

简单来说：

它决定了当多个元素重叠时，谁在上面、谁在下面

如果你的顶部是固定定位（position: fixed; top: 0;），而内容被它遮住了，给 body 或主要内容容器加上一个与头部高度相同的上边距或内边距 就能解决。

响应式布局

响应式布局项目

z-index: -1;
position: absolute;
width: 100%;

这段样式一般用于创建一个背景层，放在内容后面：

position: absolute;：让背景层脱离文档流，自由定位。

z-index: -1;：让这个背景层位于其他元素下面（即背景层）。

width: 100%;：背景层宽度占满整个容器。

一般还会配合 height: 100%;。