day08-CSS高级
day08-CSS高级
目标：掌握定位的作用及特点；掌握 CSS 高级技巧
01-定位作用：灵活的改变盒子在网页中的位置
实现：
1.定位模式：position
2.边偏移：设置盒子的位置
left
right
top
bottom
相对定位position: relative
特点：
不脱标，占用自己原来位置
显示模式特点保持不变
设置边偏移则相对自己原来位置移动
12345div { position: relative; top: 100px; left: 200px;}
绝对定位position: absolute
使用场景：子级绝对定位，父级相对定位（子绝父相）
特点：
脱标，不占位
显示模式具备行内块特点
设置边偏移则相对最近的已经定位的祖先元素改变位置
如果祖先元素都未定位，则相对浏览器可视区改变位置
123456789.father { position: relative;}.father span { position: absolute; top: 0; right: 0;} ...
day07--学成在线
day07-学成在线01-项目目录网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript等等。
首页引入CSS文件
123<!-- 顺序要求：先清除再设置 --><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/index.css">
02-版心居中
12345678.wrapper { margin: 0 auto; width: 1200px;}body { background-color: #f3f5f7;}
03-布局思路
布局思路：先整体再局部，从外到内，从上到下，从左到右
CSS 实现思路
画盒子，调整盒子范围 → 宽高背景色
调整盒子位置 → flex 布局、内外边距
控制图片、文字内容样式
04-header区域-整体布局 ...
day06-Flex布局
day06-Flex布局
目标：熟练使用 Flex 完成结构化布局
01-标准流标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。
02-浮动基本使用作用：让块元素水平排列。
属性名：float
属性值
left：左对齐
right：右对齐
1234567891011121314151617181920212223<style> /* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */ .one { width: 100px; height: 100px; background-color: brown; float: left; } .two { width: 200px; height: 200px; background-color: orange; /* float: left; */ float: right; }</style><div class="one&qu ...
day05-盒子模型
day05-盒子模型
目标：掌握盒子模型组成部分，使用盒子模型布局网页区域
01-选择器结构伪类选择器基本使用作用：根据元素的结构关系查找元素。
123li:first-child { background-color: green;}
:nth-child(公式)
提示：公式中的n取值从 0 开始。
伪元素选择器作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。
123456div::before { content: "before 伪元素";}div::after { content: "after 伪元素";}
注意点：
必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可
伪元素默认是行内显示模式
权重和标签选择器相同
02-PxCookPxCook（像素大厨） 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。
开发面板（自动智能识别）
设计面板（手动测量尺寸和颜色）
使用方法：创 ...
day04-CSS进阶
day04-CSS进阶
目标：掌握复合选择器作用和写法；使用background属性添加背景效果
01-复合选择器定义：由两个或多个基础选择器，通过不同的方式组合而成。
作用：更准确、更高效的选择目标元素（标签）。
后代选择器后代选择器：选中某元素的后代元素。
选择器写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。
123456789<style> div span { color: red; }</style><span> span 标签</span><div> <span>这是 div 的儿子 span</span ></div>
子代选择器子代选择器：选中某元素的子代元素（最近的子级）。
选择器写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。
12345678910111213<style> div > span { color: red; &# ...
day03-CSS基础
day03-CSS基础
目标：掌握 CSS 属性基本写法，能够使用文字相关属性美化文章页。
01-CSS初体验层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。
书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。
12345678910<title>CSS 初体验</title><style> /* 选择器 { } */ p { /* CSS 属性 */ color: red; }</style><p>体验 CSS</p>
提示：属性名和属性值成对出现 → 键值对。
02-CSS引入方式
内部样式表：学习使用
CSS 代码写在 style 标签里面
外部样式表：开发使用
CSS 代码写在单独的 CSS 文件中（**.css**）
在 HTML 使用 link 标签引入
1<link rel=&q ...
day02-HTML进阶
day02：列表、表格、表单
目标：掌握嵌套关系标签的写法，使用列表标签布局网页
01-列表作用：布局内容排列整齐的区域。
列表分类：无序列表、有序列表、定义列表。
无序列表作用：布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。
123456<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> ……</ul>
注意事项：
ul 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容
有序列表作用：布局排列整齐的需要规定顺序的区域。
标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。
123456<ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> ……</ol>
注意事项：
ol 标签里面只能包裹 li 标签
li 标签里面可以包裹 ...
day01-HTML基础
阶段目标：掌握HTML、CSS常用布局技巧，能够独立制作网页。
day01：HTML 基础
目标：掌握标签基本语法，能够独立布局文章页。
01-今日课程介绍
今日目标：掌握标签基本语法，能够独立布局文章页。
核心技术点
网页组成
排版标签
多媒体标签及属性
综合案例一 - 个人简介
综合案例二 - Vue 简介
02-标签语法HTML 超文本标记语言——HyperText Markup Language。
超文本：链接
标记：标签，带尖括号的文本
标签结构
标签要成对出现，中间包裹内容
<>里面放英文字母（标签名）
结束标签比开始标签多 /
标签分类：双标签和单标签
123<strong>需要加粗的文字<strong><br><hr>
03-HTML骨架
html：整个网页
head：网页头部，用来存放给浏览器看的信息，例如 CSS
title：网页标题
body：网页主体，用来存放给用户看的信息，例如图片、文字
12345678<html> <he ...
常用的网站
蓝奏云 三分机场 腾讯软件管家 alist
常用软件
阿里云盘
https://wwuu.lanzouy.com/iCXmH16uqewf
密码:8zrj
996
https://wwuu.lanzouy.com/i3mX216upsgh
密码:ati5
git
https://wwuu.lanzouy.com/itOZC16uowrg
密码:9jcv
node
https://wwuu.lanzouy.com/iufRa16uh5te
密码:656q
7zip 压缩工具
https://wwuu.lanzouy.com/iylyi16xsc6h
密码:hip3
bilibili下载工具
https://wwuu.lanzouy.com/iIOHk16xshyf
天翼云盘
https://wwuu.lanzouy.com/iMSz016xt56b
密码:6b0p
火绒
https://wwuu.lanzouy.com/iZZgU16xthyb
密码:7036
装机必备
https://wwuu.lanzouy.com/iGiko16xtfvg
vlc播放器
https://wwuu.lanz ...
