一、 元素分类
元素类型
元素排列
设置模式
默认宽度
包含
块级元素
一行只能放一个
可以设置宽高
容器的 100%
容器级可以包含任何标签
行内元素
一行可以放多个
不能设置宽高
本身内容的宽度
容纳文本或其他行内元素
行内块元素
一行可以放多个
可以设置宽高
本身内容的宽度
1. 块元素常见的块元素有 <h1> ~ <h6>、<p> 、<div>、<ul>、<ol>、<li>等
块元素的特点：
独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器（父级元素）的 100%
可以看做一个容器，可以放其他块元素或行内元素
注意：
文字类元素内不能使用快级元素，如 p 元素 h1 ~ h6 元素
2. 行内元素行内元素 也叫 内联元素，常见的有 <a>、<strong>、<b>、<em>、<span>等
行内元素的特点：
相邻的行内元素在一行上，一行可以显示多个
不能设置宽、高
默认宽度是它本身内容 ...
一、 背景
属性
作用
值
background-color
背景颜色
预定义颜色值、十六进制、RGB 代码
background-image
背景图片
url(图片路径)
background-repeat
是否平铺
repeat、no-repeat、repeat-x、repeat-y
background-position
背景位置
x、y 坐标
background-attachment
背景附着
scroll（滚动）、fixed（固定）
背景属性简写
颜色 url(图片路径) 平铺 固定 位置
背景透明度
背景颜色透明
background: rgba(0,0,0,.3)
1. 背景颜色（background-color）语法格式：
1background-color: 颜色;
一般情况下，元素背景默认颜色为 <mark> transparent（透明） </mark>，也可以手动设置为透明
2. 背景图片 （background-image）background-image 常用于 logo 或者 超大 ...
一、 盒子模型
盒子模型： 就是把 HTML 页面中的布局元素看做一个矩形盒子，也就是能装内容的容器。css 盒子模型本质上时一个盒子，封装周围的 HTML 元素，它包括表框、内边距、外边距 和 实际内容。
去除无序列表前的小圆点：list-style: none;
1. 边框（border）
border ： 可以设置元素的边框。边框的大小会影响到盒子的大小
语法：
1border: border-width | border-style | border-color;
边框参数：| 属性 | 作用 ||———————|—————————————-|| border-width | 定义边框的粗细，单位是 px || border-style | 定义边框的样式 || border-color | 定义边框的颜色 |
样式参数：
参数
效果
none
没有表框
hidden
隐藏边框
solid
实现边框
dashed
虚线边框
dotted
点线边框
groove
3D 沟槽
ridge
3D 凸起
inset
3D 嵌入
o ...
一、浮动1. 浮动网页布局第一准则：多个块级元素纵向排列使用标准流，横向排列使用浮动
浮动：用于创建浮动框，将其移动到一边，直到边缘触及包含另一个浮动框的边缘
语法：
123选择器 { float: 属性值;}
属性值
描述
none
元素不浮动（默认）
left
元素向左浮动
right
元素向右浮动
代码示例
12345678910111213141516171819202122232425262728293031323334<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport ...
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 ...
一、元素定位
定位模式
是否脱标
移动位置
是否常用
static（静态定位）
不脱标
不能使用边偏移
很少
relative（相对定位）
不脱标（占有位置）
相对自身位置移动
常用
absolute（绝对定位）
脱标（不占有位置）
带有定位的父级
常用
fixed（固定定位）
脱标（不占有位置）
浏览器可视区
常用
sticky（粘性定位）
不脱标（占有位置）
浏览器可视区
当前阶段少
1. 定位的组成
定位 ： 将盒子定在某个位置，所以 定位也是在摆放盒子，按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
定位模式：指定一个元素在文档中的定位方式边偏移 ： 决定了该元素的最终位置
语法：
1position: static | relative | absolute | fixed;
定位模式：
参数
含义
static
静态定位
relative
相对定位
absolute
绝对定位
fixed
固定定位
sticky
粘性定位
边偏移：
边偏移属性
示例
描述
top
top: ...
一、精灵图1. 精灵图（sprites）的使用
使用核心：
精灵图主要针对背景图片使用，可以把多个背景图放到一张大图中，减少服务器的请求次数
移动背景图片位置（background-position）
移动距离就是图片的 x 和 y 轴坐标（与网页坐标不同），一般都是往左往上移动，所以数值都是 负值
语法：
12345background-position: x y;或background: url(图片路径) x y；
代码示例
12345678910111213141516171819202122232425262728293031323334<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"& ...
一、选择器1. 属性选择器
属性选择器：可以根据元素特定的属性来选择元素
类选择器、属性选择器、伪类选择器，他们的权重都是 10
语法：
123元素[属性] { 样式}
选择符
说明
E[att]
选择具有 att 属性 的 E 元素
E[att=”val”]
选择具有 att 属性且值等于 val 的 E 元素
E[att^=”val”]
匹配具有 att 属性且值以 val 开头的 E 元素
E[att$=”val”]
匹配具有 att 属性且值以 val 结尾的 E 元素
E[att*=”val”]
匹配具有 att 属性且值以 val 包含的 E 元素
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF ...
一、 2D 转换（transform）
转换（transform）：可以实现元素的位移、旋转、缩放等效果
2D 转换： 改变标签在二维平面上的位置和形状
如果 既有位移，又有旋转、缩放时，需要先写位移 再写其他，否则方向会跑偏
123/* 位移 旋转 缩放 */transform: translate(50% 50%) rotate(180deg) scale(1.2em);
代码示例
1234567891011121314151617181920212223242526272829303132333435363738394041424344<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca ...
一、web 开发1. web 开发框架
底层逻辑 —- 请求与响应
协议 —- 信息交换的标准
传统 MVC 和 Django MTV 的区别
Django 路由示意图
二、 环境搭建Python 环境需要 < Badge text=”v3.6 +” /> 以上版本Django 需要 < Badge text=”v3.1 +” /> 以上版本
1. 创建 虚拟环境12python -m venv 环境名称python -m venv venv
2. 激活虚拟环境1venv\Scripts\activate.bat
3. 安装库1pip install django
4. 创建 Django 项目1234python -m django startproject 项目名称django-admin startproject 项目名称python -m django startproject loginwebsite
5. 创建 APP123456cd loginwebsitedjango-admin startapp 应用名python manage.py sta ...
