day09-小兔鲜儿01-搭建项目目录
xtx-pc
images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
iconfont 文件夹：字体图标素材
css 文件夹：存放 CSS 文件（link 标签引入）
base.css：基础公共样式
common.css：各个网页相同模块的重复样式，例如：头部、底部
index.css：首页 CSS 样式
index.html：首页 HTML 文件
引入样式表1234<link rel="stylesheet" href="./iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/common.css"><link re ...
一、权重计算规则公式：行内样式 (1,0,0,0) > ID 选择器 (0,1,0,0) > 类选择器 (0,0,1,0) > 标签选择器 (0,0,0,1)每一级之间不存在进位，例如 10 个类选择器的权重仍低于 1 个 ID 选择器。
二、示例：不同选择器组合的优先级比较12345678910111213141516171819202122232425262728<style> /* 选择器1：权重 (0,1,0,0) */ #title { color: red; } /* 选择器2：权重 (0,0,2,0) */ .section .heading { color: blue; } /* 选择器3：权重 (0,0,1,1) */ div.content { color: green; } /* 选择器4：权重 (0,0,0,2) */ div p { color: purple; }</style><di ...
定位作用：灵活改变盒子在网页的位置
实现：
定位模式：position
边偏移：设置盒子的位置
left
right
top
bottom
相对定位 relative123456789div { position: relative; bottom: 100px; left: 100px;}div img { width: 200px; height: 200px;}
！修改位置的参照物是自己原来的位置
不脱标，而且占位，而且不改变原来的显示模式
可以看到div的横方向非常大，导致屏幕最下方出现滑动条
绝对定位 absolute使用场景：子级绝对定位，父级相对定位（子绝父相）（子级的位置无论怎么改变都在父级里面，不超出父级范围）
特点：
脱标，不占位
参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置
显示模式特点改变：宽高生效（具备了行内块的特点）
12345678910111213141516171819202122232425262728293031323334353637383 ...
标准流标准流也叫文档流，指的是标签在页面中默认的排布规则，例如块元素独占一行，行内元素可以一行显示多个。
浮动（了解，看懂就行）一、浮动属性的基本概念1. 浮动的作用
让块级标签在一行显示，实现灵活的页面布局
常见应用场景：横向导航栏、多列布局、图文混排
2. 浮动属性的语法123selector { float: left | right | none;}
left：元素向左浮动，出现在父级左侧
right：元素向右浮动，出现在父级右侧
none：默认值，元素不浮动
二、浮动属性测试演示1. 案例 1：两个 div 左浮动12<div style="float: left; width: 100px; height: 50px; background: red;">1</div><div style="float: left; width: 100px; height: 80px; background: blue;">2</div>
显示效果：两个 div 在一 ...
结构伪类选择器作用：根据元素的结构关系查找元素（序号查找）
E代表某种选择器
选择器
说明
E:first-child
查找第一个 E 元素
E:last-child
查找最后一个 E 元素
E:nth-child(N)
查找第 N 个 E 元素（第一个元素 N 值为 1）
12345678910111213141516171819202122232425262728293031<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> li:first-child { color ...
复合选择器定义：由两个以上的的基础选择器，通过不同的方式组合而成
作用：更准确，高效的选择目标元素（标签）
后代选择器作用：选中某元素的后代元素
写法：父选择器 子选择器 { css选择器 } ，父子选择器之间用空格隔开
123456789101112131415161718192021222324252627 <style> div span { color: red; } div strong { color: blue; } div div { color: green; } </style></head><body> <div> <span>span11111111111111</span> <span>span2222222222222</span> <span>span333333333333333</span> <strong>stron ...
层叠样式表 (Cascading Style Sheets, 缩写为 CSS) ，是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。
书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。
123456789101112131415161718<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>初识CSS</title> <style> /* css代码 */ /* 属性名字和属性值成对出现，键值对 */ p { /* 选择器 */ color: red; /* 颜色 */ font-size: 90px; /* 字体大小 */ } </style></hea ...
列表作用：布局内容排列整齐的区域
分类：无序列表，有序列表，定义列表无序列表作用：布局不需要规定顺序的区域
标签：ul嵌套li，ul是无序列表，li是列表条目
123456<ul> <li>表1</li> <li>表2</li> <li>表3</li> <li>表4</li></ul>
ul;里只能包裹li标签（不能写段落p，标题h），li中可以包括任何内容
有序列表作用：布局需要规定顺序的区域
标签：ol嵌套li，ol是有序列表，li是列表条目
123456<ol> <li>表1</li> <li>表2</li> <li>表3</li> <li>表4</li></ol>
定义列表标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述 / 详情
123456<dl> <dt>我是定 ...
HTML入门1. 保存 HTML 标签的文件扩展名是什么？
扩展名：.html 或 .htm（常用 .html）
2. HTML 标签名要放到什么括号里面？
需放在 尖括号 <> 中，例如：<div>、<p>
3. 结束标签比开始标签多什么？
结束标签比开始标签多一个
斜杠（/）
，例如：
开始标签：<strong>
结束标签：</strong>
4. 标签包裹的内容放在什么位置？
内容需放在开始标签与结束标签之间，例如：
1<strong>文字内容</strong> <!-- 文字内容位于标签中间 -->
HTML 文档结构基础简单理解
结构名称
对应标签
说明
整个网页
<html>
定义 HTML 文档的根元素
网页头部
<head>
包含元数据（如标题、样式）
网页标题
<title>
定义网页在浏览器的标题
网页主体
<body>
包含网页可见内容
标签之间的关系
嵌套（父子）关系
...
