摘要：文章目录 1. 伪元素2. 常用伪元素2.1 元素第一行（::first-line）2.2 首字母大写 （::first-letter）2.3 元素之前|之后 （::before|after） 1. 伪元素 CSS 伪元素用于设置元素指定部分的样式。它是一个附加至选择器末的关键词，允许你对被选择元素
阅读全文
摘要：文章目录 1. 输入框 input1.1 简易输入框1.2 可用属性选择器1.3 设置边框1.4 聚焦变化1.5 搜索框加图片 2. 文本框示例3. 下拉菜单示例4. 按钮示例5. 表单综合示例5.1 示例 15.2 示例2 1. 输入框 input 1.1 简易输入框 <!DOCTYPE html
阅读全文
摘要：文章目录 1. 简单图片廊2. 响应式图片廊概念完整示例 2. 透明图片语法示例完整示例 1. 简单图片廊 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> <style> /* 打img标
阅读全文
摘要：文章目录 1.基本实现2. 提示框位置2.1 提示框在 [ 左 | 右 ]2.2 提示框在[顶端|底端] 3. 添加箭头3.1 顶部提示 底部箭头3.2 底部提示 顶部箭头3.3 右侧提示框/左侧箭头3.4 左侧提示框/右侧箭头 4. 淡入 1.基本实现 <style> /* Tooltip 容器
阅读全文
摘要：文章目录 1. 基本实现2. 添加一些效果 1. 基本实现 <!DOCTYPE html> <html> <head> <title>玄德公记事</title> <meta charset="utf-8"> <style> .dropdown { position: relative; displa
阅读全文
摘要：文章目录 1. 内联列表实现2. 浮动列表实现3. 添加边框3.1 思路3.2 实际效果 4. 添加分割线5. 固定导航栏 1. 内联列表实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title
阅读全文
摘要：文章目录 前言1. 最简导航栏2 添加鼠标改变背景色3 给首页添加颜色4 加边框4.1 思路4.2 实际代码 5 全屏高度固定导航条5.1 思路5.2 实际代码 前言 一步一步做出一个完整的导航栏 1. 最简导航栏 <!DOCTYPE html> <html> <head> <meta charse
阅读全文
摘要：文章目录 1. 伪类1.1 概念1.2 常见伪类选择器动态伪类选择器UI 元素状态伪类选择器结构伪类选择器 2. anchor伪类2.1 链接样式2.2 下划线2.3 背景颜色 3. first-child 伪类3.1 匹配第一个 p 元素3.2 匹配所有< p > 元素中的第一个 < i > 元素
阅读全文
摘要：文章目录 1. 后代选择器2. 子元素选择器3. 相邻兄弟选择器4. 后续兄弟选择器 选择器分隔示例后代选择器空格div p子元素选择器>div > p相邻兄弟选择器+div + p普通兄弟选择器～div ~ p 1. 后代选择器 表现 本div内，直接或间接下级p都会影响。实现 div p { b
阅读全文
摘要：文章目录 1. 光标2. 元素内容溢出 1. 光标 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>蜀</title> </head> <body> <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p> <span s
阅读全文
摘要：文章目录 1 定位 （position）1.1 static 定位1.2 fixed 定位1.3 relative 定位1.4 absolute 定位1.5 sticky 定位 2. 浮动（float:）2.1 简单使用2.2 相邻元素的浮动2.3 清除浮动 clear2.4 示例-首字浮动2.5
阅读全文
摘要：文章目录 1. 隐藏元素 （display:none）1.1 Display1.2 和 Visibility比较 2. 内联元素→ 块元素 （display:inline）3. 块元素 → 内联元素 （display:block） 1. 隐藏元素 （display:none） 1.1 Display
阅读全文
摘要：文章目录 1. 设置元素尺寸（height/width）语法示例完整示例 2. 最大值、最小值（max-height|width、min-height|width）语法示例完整示例（最大值限制）完整示例（最小值限制） 3. 设置行间距（line-height）语法示例完整示例 1. 设置元素尺寸（h
阅读全文
摘要：文章目录 1. 盒子模型1.1 盒子模型简介1.1.1 概述1.1.2 示例 1.2 margin1.2.1 margin 属性1.2.2 margin相关属性margin-leftmargin-rightmargin-topmargin-bottom 1.3 padding1.3.1 paddin
阅读全文
摘要：文章目录 1. 边框（border）1.1 添加边框语法示例完整示例示例（table 边框）示例（th边框）示例（td 边框） 1.2 折叠边框（border-collapse）语法示例完整示例 2. 高度和宽度（width/height）语法示例完整示例示例（表头高度设置为百分比） 3. 对齐3.
阅读全文
摘要：文章目录 1. 有序列表和无序列表（list-style-type）1.1 语法无序列表有序列表 1.2 完整示例 2. 自定义标记（list-style-image）3. 移除默认标记（list-style-type: none） 1. 有序列表和无序列表（list-style-type） 1.1
阅读全文
摘要：文章目录 1.文本1.1 文本颜色 （color:xxx）1.2 文本对齐（text-align）1.3 上/中/下划线（text-decoration）1.4 大小写转换（text-transform）1.5 文本缩进（text-inden） 2. 字体2.1 字体系列（font-family）2
阅读全文
摘要：文章目录 1. 选择器1.1 id 选择器1.2 class 选择器 2. 样式2.1 内联样式2.2 内部样式表2.3 外部样式表2.4 多重样式优先级 1. 选择器 1.1 id 选择器 语法 用 “#标签名” 定义 示例 <!DOCTYPE html> <html> <head> <meta
阅读全文
摘要：文章目录 1. 背景色1.1 语法1.2 示例 2. 背景图1.1 语法使用背景图背景图位置固定背景图（不随页面滚动） 1.2 示例 1. 背景色 1.1 语法 background-color:xxxx 1.2 示例 <!DOCTYPE html> <html> <head> <meta char
阅读全文
