前端
1、前端是做什么的
2、我们为什么要学前端？
3、前端都有哪些内容？
1、HTML
2、CSS
3、JavaScript
4、jQuery和Bootstrap
Web开发本质：
1、浏览器输入网址回车都发生了什么？
1、浏览器给服务端发送了一个消息
2、服务端拿到消息
3、服务端返回消息
4、浏览器展示页面
import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(1024)
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"<h1>Hello world!</h1>")
conn.close()
HTML是什么
超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个
标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm
最基本的HTML文档：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1、<!DOCTYPE html>声明为HTML5文档
2、<html>、</html>是文档的开始标志和结束标志。是HTML页面的根元素，在他们之间是文档的头部（head）和主体（body）。
3、<head>、</head>定义了HTML文档的开头部分。他们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
4、<title>、</title>定义了网页标题，在浏览器标题栏显示。
5、<body>、<、body>之间的文本是可见的网页主体内容。
HTML标签格式
HTML标签是由尖括号包围的关键字，如<html>，<div>等
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg"/>等。
标签里面可以有若干属性，也可以不带属性。
标签的语法：
<标签名 属性1="属性值1" 属性2="属性值2" ......>内容部分</标签名>
<标签名 属性1="属性值1" 属性2="属性值2" ...... />
几个很重要的属性：
id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）（CSS样式类名）
style：规定元素的行内样式（CSS样式）
HTML常用标签
head常用标签
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息
meta标签
meta标签介绍：
<meta>元素可提供有关页面的元信息（meta-information）,针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包括任何内容。
<meta>提供的信息是用户不可见的。
meta标签的组成：meta共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1、http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确得显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2、name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">
body内常用标签
基本标签（块级标签和内联标签）
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--水平线--><hr>
特殊字符
| 内容 | 对应代码 |
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
div标签和span标签
div标签用来定义一个块级元素，并无实际意义。主要是通过CSS样式为其赋予不同的表现。
span标签用来定义内联（行内）元素，并无实际意义。主要通过CSS样式为其赋予不同表现。
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需要另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
注意：
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包括块级元素，它只能包括其它内联元素。
p标签不能包含块级标签，p标签也不能包含p标签。
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a标签：超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
href属性指定目标网页地址。该地址可以有几种类型：
绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）
target：
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页
列表
1、无序列表
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
2、有序列表
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
3、标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格
表格是一个二维数据空间，一个表格由若干行组成，一个行又由若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的穆大叔显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
form
前后端有数据交互的时候用form表单
form表单提交数据的几个注意事项：
1、所有获取用户输入的标签都必须放在form表单里面。
2、action控制着往哪提交。
3、input、select、textarea 都需要有name属性
4、提交按钮<input type='submit'>
表单属性：
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
表单元素
基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
from django.conf.urls import url from django.shortcuts import HttpResponse def upload(request): print("request.GET:", request.GET) print("request.POST:", request.POST) if request.FILES: filename = request.FILES["file"].name with open(filename, 'wb') as f: for chunk in request.FILES['file'].chunks(): f.write(chunk) return HttpResponse('上传成功') return HttpResponse("收到了！") urlpatterns = [ url(r'^upload/', upload), ]
input
<input> 元素会根据不同的 type 属性，变化为多种形态。
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" /> |
| radio | 单选框 | <input type="radio" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
属性说明：
name：表单提交时的“键”，注意和id的区别。
value：表单提交时对应项的值。
type=“button”，“reset”，“submit”时，为按钮上显示的文本内容。
type=“text”，“password”，“hidden”时，为输入框的初始值。
type=“checkbox”，“radio”，“file”，为输入相关联的值。
checked：radio和checkbox默认被选中的项。
readonly：text和password设置只读。
disabled：所有input均适用。
select标
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>form表单示例</title>
</head>
<body>
<!--<注册示例>-->
<form action="">
<p>用户名：
<input name="name" type="text" value="小强">
<input name="name" type="text" placeholder="小强" disabled>
</p>
<!--disabled：表示不能修改，禁用-->
<!--placeholder：占位符，可以直接输入-->
<!--正规写法-->
<p>
<label for="i1">用户名：</label>
<input id=i1 name="name" type="text" value="小强">
<input name="name" type="text" placeholder="小强" disabled>
</p>
<!--定义：<label>标签为input元素定义标注（标记）-->
<!--说明：-->
<!--1、label元素不会向用户呈现任何特殊效果。-->
<!--2、<label>标签的for属性值应当与相关元素的id属性值相同。-->
<p>密码：
<input name="password" type="password">
</p>
<!--password：表示隐藏输入的内容。-->
<p>邮箱：
<input name="email" type="email">
</p>
<!--email：表示要按照email的格式输入，否则不能提交-->
<p>隐藏输入框：
<input type="hidden" value="hidden">
</p>
<p>性别：
<input name="gender" type="radio" value="1"> 男
<input name="gender" type="radio" value="0"> 女
<input checked name="gender" type="radio" value="2"> 保密
</p>
<!--radio：表示只能选一个。-->
<!--checked：表示默认。-->
<p>性别2：
<label for="r1">男</label>
<input name="gender" id="r1" type="radio" value="1">
<label>男
<input name="gender" type="radio" value="1">
</label>
<label for="r2">女</label>
<input name="gender" id="r2" type="radio" value="0">
<label for="r3">保密</label>
<input checked name="gender" id="r3" type="radio" value="2">
</p>
<p>爱好：
<input checked name="hobby" type="checkbox" value="basketball">篮球
<input checked name="hobby" type="checkbox" value="football">足球
<input name="hobby" type="checkbox" value="doublecolorball">双色球
</p>
<!--checkbox：表示可以选多个。-->
<p>生日：
<input name="birthday" type="date">
</p>
<!--data：日历格式。-->
<select name="from1" id="s1">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="sc">四川</option>
</select>
<!--selected：默认选中该项。-->
<select name="from1" id="s11">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sc">四川</option>
</select>
<select name="from2" id="s2">
<optgroup label="北京">
<option value="cp">昌平</option>
<option value="cy">朝阳</option>
<option value="hd">海定</option>
<option value="ft">丰台</option>
</optgroup>
<optgroup label="上海">
<option value="pdxq">浦东新区</option>
<option value="mhq">闵行区</option>
<option value="hpq">黄浦区</option>
</optgroup>
<optgroup label="四川">
<option value="pzh">攀枝花</option>
<option value="zg">自贡</option>
<option value="my">绵阳</option>
</optgroup>
</select>
<p>
<textarea name="info" id="t1" cols="30" rows="10"></textarea>
</p>
<!--textarea：多行文本。-->
<p>头像：
<input name="p1" type="file">
</p>
<!--file：表示上传文件。-->
<input type="submit" value="点我提交">
<!--submit：提交-->
<input type="button" value="button">
<!--button：普通按钮,多用JS给它绑定事件-->
<input type="reset" value="reset">
<!--reset：重置-->
</form>
</body>
</html>
textarea：多行文本。
属性说明：
name：名称
rows：行数
cols：列数
disabled：禁用
CSS介绍
CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
CSS如何引入？
1、直接写在标签里面 style=“样式1；样式2；”
2、在head中通过style标签定义。
3、把样式单独写在css文件中，然后在html文件中通过link标签导入。
CSS语法：
选择器{样式1；样式2}
CSS查找标签的方式（选择器）
1、基本选择器
1、标签选择器 适用于批量的、统一、默认的样式
2、ID选择器 适用于给特定标签设置特定样式
3、类选择器 适用于给某一些标签设置相同的样式
2、通用选择器
1、*
3、组合选择器
1、后代选择器
2、儿子选择器
3、毗邻选择器
4、弟弟选择器
4、属性选择器
1、[s9]
2、[s9="hao"]
5、分组和嵌套
1、div,p
2、#d1>p
样式文件优先级
1、内联样式（直接在标签里面写style）优先级最高
2、选择器都一样的情况下，谁靠近标签谁就生效
3、选择器不同时，计算权重来判断
CSS引入
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>引入示例</title> <link rel="stylesheet" href="index.css"> </head> <body> <p id="p1">海燕</p> <p id="p2">这是个黑色的海燕</p> <p class="c1">这是个黑色的海燕</p> <p class="c2">这是个黑色的海燕</p> <p class="c3">这是个黑色的海燕</p> <p class="c4">这是个黑色的海燕</p> <h1>海燕</h1> </body> </html>
/*解释性的信息*/
/*全局通用的信息*/
/*导航条的样式*/
/*商品列表样式*/
p{
color:red;
font-size: 28px;
}
/*标签选择器*/
h1{
color:green;
}
/*ID选择器*/
#p2{
color: blue;
}
/*类选择器*/
.c1,.c2{
color:yellow;
}
组合选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>组合选择器示例</title>
<link rel="stylesheet" href="index2.css">
</head>
<body>
<div id="d1">
<p>我是嵌套在div里的p标签</p>
<span>我是嵌套在div里的span标签</span>
<div>
<p>我是嵌套在div里的div里的p标签</p>
<span>我是嵌套在div里的div里的span标签</span>
</div>
</div>
<p>000</p>
<div>111</div>
<p>222</p>
<p>333</p>
</body>
</html>
/*组合选择器示例的CSS文件*/
/*后代选择器*/
/*#d1 p{*/
/*color:red;*/
/*}*/
/*!*儿子选择器*!*/
/*#d1>div {*/
/*color: blue;*/
/*}*/
/*毗邻选择器*/
/*div+p{*/
/*color: yellow;*/
/*}*/
/*弟弟选择器*/
div~p{
color:red;
}
属性选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性选择器示例</title>
<link rel="stylesheet" href="index3.css">
</head>
<body>
<p s9="好">我是一个p标签</p>
<p s9="good">我也是一个p标签</p>
<p>我还是一个p标签</p>
</body>
</html>
/*属性选择器相关样式*/
[s9]{
color: red;
}
[s9="good"]{
color: blue;
}
分组和嵌套
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>分组和嵌套示例</title>
<link rel="stylesheet" href="index4.css">
<link rel="stylesheet" href="index44.css">
</head>
<body>
<div id="p1">我是一个div标签</div>
<p id="p2">我是一个p标签</p>
</body>
</html>
/*分组和嵌套示例*/
/*当样式有重复的时候*/
/*推荐分行写选择器,但是要注意一定要加逗号*/
#p1,
p{
color: red;
}
/*嵌套使用选择器*/
/*#d1+p{*/
/*color: blue;*/
/*}*/
/*权重就是2*/
/*div+p{*/
/*color:red;*/
/*}*/
/*权重101*/
/*p1+p{*/
/*color:red;*/
/*}*/
/*分组和嵌套示例*/
/*当样式有重复的时候*/
/*推荐分行写选择器,但是要注意一定要加逗号*/
#p1,
p {
color: blue;
}
/*嵌套使用选择器*/
/*#d1+p {*/
/*color: blue;*/
/*}*/
选择器的优先级
CSS继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。
body {
color: red;
}
此时页面上所有的标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0.
我们只要给对应的标签设置字体颜色就可以覆盖掉它继承的样式。
p {
color: green;
}
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border，margin，padding，background等。
选择器的优先级
内联样式的权重为1000
id选择器的权重为100
类选择器的权重为10
元素选择器的权重为1
权重计算永不进位
除此之外还可以通过添加 !important 方式来强制让样式生效，但并不推荐使用。因为如果过多的使用 !important 会使样式文件混乱不易维护。
万不得已可以使用 !important
CSS属性
1 1、内容回顾 2 1、昨日内容 3 1、form表单（一般method="post"） 4 1、input系列 5 type 6 1、text 7 2、password 8 3、radio 9 4、checkbox 10 5、date（datetime） 11 6、submit 12 7、button 13 8、reset 14 9、hidden 15 10、file(enctype="multipart/from-data") 16 2、select 17 1、select>option（分组下的下拉框 select>optgroup>option） 18 3、textarea 19 2、form表单提交 三要素： 20 1、input、select、textarea要有一个name属性 21 2、提交按钮必须要是type="submit" 22 3、form不是from；获取用户输入的标签都要放在form标签里面（仅限于form提交数据） 23 3、CSS选择器 24 1、基本选择器 25 1、标签选择器 26 2、ID选择器 27 3、类选择器（class="c1,c2,...."） 28 2、通用选择器（*） 29 3、组合选择器 30 1、后代选择器（空格） 31 2、儿子选择器（>） 32 3、毗邻选择器（div+p） 33 4、弟弟选择器（~） 34 4、属性选择器 35 1、[s9] 36 2、[s9="hao"] 37 3、其他不常用的（有印象即可） 38 5、分组和嵌套 39 1、分组（用逗号分隔的多个选择器条件） 40 2、嵌套（选择器都可以组合起来用） 41 6、选择器的优先级 42 1、越靠近标签的优先级越高（就近原则） 43 2、权重的计算 44 1、内联样式1000 45 2、ID选择器100 46 3、类选择器10 47 4、元素选择器1 48 div#d1(101)/div.c1(11)/dic.c1 49 2、之前内容复习 50 1、Python语法基础 51 2、数据类型和内置方法 52 3、函数 53 1、参数 54 2、装饰器 55 3、迭代器和生成器 56 4、匿名函数 57 5、递归 58 6、内置函数 59 7、三元运算和列表推导式 60 4、文件操作 61 5、面向对象（CRM项目会有大量的应用） 62 6、常用的模块和包 63 7、网络编程和并发编程（优先级低） 64 8、数据库（建库、建表、基本查询） 65 2、CSS选择器补充 66 67 3、CSS属性 68 1、文学属性 69 1、font-family 70 2、font-size 71 3、font-weight 72 4、color 73 1、rgb（255,255,255） 74 2、#f00 75 3、red 76 4、rgba() 77 2、文本属性 78 1、text-align 79 2、text-decoration 80 3、背景属性 81 1、background-color 82 2、background-image 83 4、边框属性 84 1、border 85 2、border-radius --> 变圆 86 5、display属性 87 1、inline 88 2、block 89 3、inline-block 90 4、none（隐藏） 91 6、CSS盒子类型（从外到内） 92 1、margin：边框之外的距离（多用来调整标签和标签之间的距离） 93 2、border边框 94 3、padding：内容区和边框之间的距离（内填充/内边距） 95 4、condent：内容 96 7、浮动 97 div配合float来做页面的布局 98 任何元素浮动之后都会变成块元素 99 100 float： 101 1、left 102 2、right 103 3、none 104 8、清除浮动（清除的是浮动带来的负面效果-->父标签塌陷（撑不起来）） 105 1、clear 106 1、left 107 2、right 108 3、both 109 最常和伪元素结合起来应用： 110 .clearfix:after{ 111 content:""; 112 display:block; 113 clear:both 114 } 115 9、定位 116 1、static --> 默认的 117 2、relative --> 相对定位（相对于原来的位置来说） 118 3、absolute --> 绝对定位（相对于最近的一个被定位过的祖宗标签）（完全脱离文档流） 119 4、fixed --> 固定在某个位置（返回顶部按钮） 120 left right top bottom 121 10、z-index（明天讲） 122 4、页面练习 123 博客页面 124 1、先排HTML文档结构，同时定义好类名（类名最好有意义） 125 2、从左往右，从上到下依次写样式
不怎么常用的属性选择器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>属性选择器补充示例</title> <style> /*找到所有title属性以hao开头的元素*/ [s9^="hao"] { color: red; } /*找到所有title属性以d结尾的元素*/ [s9$="d"] { color: red; } /*找到所有title属性中包含ao的元素*/ [s9*="ao"] { color: red; } /*找到所有title属性中（有多个值或以空格分割）中有一个值为hao的元素*/ [s9~="hao"] { color: red; } </style> </head> <body> <p s9="hao">我是一个p标签</p> <p s9="haomad">我是一个p标签</p> <p s9="hao mad">我是一个p标签</p> <p s9="goog">我也是一个p标签</p> <p class="c1 c2">我是还是一个p标签</p> </body> </html>
伪类选择器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器示例</title> <style> /*链接没有被点击过*/ a:link { color: yellow; } /*链接被点击过*/ a:visited { color:red; } /*鼠标移上去*/ a:hover { color: blue; } /*被选定*/ a:active { color: black; } #d1 { color: aqua; } #d1:hover { color: antiquewhite; } /*input获取光标时*/ input:focus { outline: 0; background-color:green; } </style> </head> <body> <a href="http://www.sogo.com">搜狗</a> <a href="http://www.sogo.com">搜狗</a> <div id="d1">我是div标签</div> <input type="text"> </body> </html>
伪元素选择器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪元素选择器示例</title> <style> /*常用的给首字母设置特殊样式*/ p:first-letter{ font-size: 50px; color: red; } /*在每个c1类元素之前插入内容*/ .c1:before { content: "*"; color: red; } /*在每个c1类元素之后插入内容*/ .c1:after { content: "[$$$]"; color: #ffff77; } /*改变p标签内容的字体大小*/ p { font-size: 30px; } </style> </head> <body> <p>在苍茫的大海上，狂风卷积着乌云。</p> <p>在苍茫的大海上，狂风卷积着乌云。</p> <p class="c1">在苍茫的大海上</p> <p class="c1">在苍茫的大海上</p> <p class="c1">在苍茫的大海上</p> </body> </html>
字体属性测试
font-weight用来设置字体的字重（粗细）
文字对齐：text-align属性规定元素中的文本的水平对齐方式。
值 描述
left 左边对齐，默认值
right 右对齐
center 居中对齐
justify 两端对齐
文字装饰：text-decoration属性用来给文字添加特殊效果
值 描述
none 默认，定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-thourgh 定义穿过文本的一条线
inherit 继承父元素的text-decoration属性的值
/*我这个文件是干啥的*/<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体属性测试</title> <link rel="stylesheet" href="text.css"> </head> <body> <h1>海燕</h1> <p>你可长点心吧</p> <p class="c1">默认的</p> <p class="c2">100 c1</p> <p class="c3">900 c2</p> <p class="c4"> 他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。 </p> <a href="http://www.sogo.com">sogo</a> </body> </html>
/*2018-11-10*/ /*全局的样式*/ * { font-family: ".PingFang SC","微软雅黑","Microsoft YaHei UI","Arial"; font-size: 14px; } /*字体的粗细*/ .c2 { font-weight: 100; } .c3 { font-weight: 900; /*color: rgb(0,255,0);*/ /*颜色加透明度*/ color:rgba(255,0,0,0.5); } /*文字对齐方式*/ .c4 { /*text-align: center;*/ /*text-align: right;*/ /*text-align: left;*/ text-align: justify; /*加下划线*/ text-decoration: underline; text-indent: 28px; } /*去掉a标签的下划线*/ a { text-decoration: none; }
背景相关属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>背景相关属性示例</title> <style> .c1 { width: 600px; height: 600px; border: 1px solid black; /*background-image: url("头像.jpg");*/ /*background-repeat: repeat-x;*/ /*background-repeat: repeat-y;*/ /*background-position: center;*/ /*background-position: 50% 50%;*/ /*background-position: 200px 200px;*/ background: url("头像.jpg") no-repeat 50% 50%; } </style> </head> <body> <div class="c1">我是div</div> </body> </html>
背景不动效果示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>背景不动效果示例</title> <style> .c1 { height: 500px; background: silver; } .c2 { height: 500px; background: url("p1.jpg"); background-attachment: fixed;/*把背景图固定*/ /*background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center;*/ /*background-attachment: fixed; !*把背景图固定*!*/ } .c3 { height: 500px; background-color: greenyellow; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
边框
边框样式
值 描述
none 无边框
detted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
将border-radius设置为长或高的一半即可得到一个圆形
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>边框示例</title> <style> div { height: 200px; width: 300px; background-color: red; border-width: 10px; border-color: green; border-style: solid; /*简写*/ /*border: 10px solid green;*/ } </style> </head> <body> <div></div> </body> </html>
display属性
值 意义
display:"none" HTML文档中元素存在，但在浏览器中不显示。一般用于配合JavaScript代码使用
display:"block" 默认占满整个页面宽度，如果设定了指定宽度，则会用margin填充剩下的部分
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和
float属性都不会有什么影响
dispaly:"inline-block" 使元素同时具有行内元素和块级元素的特点
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>display属性</title> <style> .cl { background-color: red; /*display: none;*/ visibility: hidden; height: 100px; } .c2 { background-color: green; /*display: block;*/ width: 1000px; } ul { list-style-type: none; } li { display: inline; /*padding: 20px;*/ /*border-right: 1px solid green;*/ } li.last { border-right: none; } li>a { border-right: 1px solid red; padding: 0 15px; } </style> </head> <body> <div class="c1">div</div> <span class="c2">span</span> <span class="c3">span</span> <ul> <li><a href="">玉米商城</a></li> <li><a href="">电脑</a></li> <li><a href="">手机</a></li> <li class="last"><a href="">爆米花</a></li> </ul> </body> </html>
盒子模型
margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding：用于控制内容与边框之间的距离。
border（边框）：围绕在内边框与内容外的边框。
content（内容）：盒子的内容，显示文本和图像。
顺序：
提供一个，用于四边
提供两个，第一个用于上下，第二个用于左右
提供三个，第一个用于上，第二个用于左右，第三个用于下
提供四个，上右下左（顺时针）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>盒子模型示例</title> <style> * { margin: 0; padding: 0; } .c1 { height: 200px; width: 300px; border: 5px solid green; /*margin-top: 5px;*/ /*margin-right: 10px;*/ /*margin-bottom: 15px;*/ /*margin-left: 20px;*/ /*上右下左*/ /*margin: 5px 10px 15px 20px;*/ /*上下 左右*/ /*margin: 20px 30px;*/ /*padding: 20px 30px;*/ padding: 10px 20px 30px; margin: 0 auto; margin-bottom: 50px; } .c2 { height: 100px; width: 100%; background-color: red; margin-top: 100px; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> </body> </html>
float页面布局
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>float页面布局示例</title> <style> * { height: 0; padding: 0; } .c1 { height: 100px; width: 20%; background-color: red; float:left } .c2 { height: 100px; width: 80%; background-color: green; float: left; } a { float:left; width:100px; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <a href="">我是a标签</a> </body> </html>
清除浮动
clear属性规定元素的哪一侧不允许其他浮动元素
值 描述
left 在左侧不允许浮动元素
right 在右侧不允许浮动模块
both 在左右两侧均不允许浮动元素
none 默认值。允许浮动元素出现在两侧
inherit 规定应该从父元素继承clear属性的值
注意：clear属性只会对自身起作用，而不会影响其它元素
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>清除浮动示例</title> <style> #d1 { border:1px solid black; } .c1, .c2 { float: left; height: 100px; width: 100px; } .c3 { /*height:100px;*/ } #d1:after { content:""; clear:left; display:block; } </style> </head> <body> <div id="d1"> <div class="c1">c1</div> <div class="c2">c2</div> <!--<div class="c3"></div>--> </div> </body> </html>
overflow溢出属性
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，而且其它内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承overflow属性的值
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>overflow示例</title> <style> .c1 { width: 120px; height: 120px; border:1px solid black; /*overflow:hidden;*/ overflow: auto; } .header-img { width: 120px; height: 120px; border: 2px solid red; border-radius: 100%; overflow:hidden; } img { max-width:100%; } </style> </head> <body> <div class="c1"> 他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。” 我看那边月台的栅栏外有几个卖东西的等着顾客。 走到那边月台，须穿过铁道，须跳下去又爬上去。 父亲是一个胖子，走过去自然要费事些。 我本来要去的，他不肯，只好让他去。 我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍， 蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道， 要爬上那边月台，就不容易了。 他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。 </div> <div class="header-img"> <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt=""> </div> </body> </html>
float补充
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>float下午版</title> <style> #d1 { border:1px solid black; } .c1 { height: 50px; width: 50px; background-color: blue; border:1px solid red; float: right; } .c3 { height: 200px; background-color: red; } /*清除浮动的副作用*/ /*#d1:after {*/ /*content:"";*/ /*clear: both;*/ /*display: block;*/ /*}*/ .clearfix:after { content:""; clear: both; display: block; } </style> </head> <body> <div id="d1" class="clearfix"> <div class="c1"></div> <div class="c1"></div> <div class="c1"></div> <div class="c1"></div> </div> <div class="c3">我是正常的内容块</div> </body> </html>
定位（position）
stiatic
默认值，无定位，不能当做绝对定位的参照物，而且设置标签对象的left、top等值是不起作用的。
relative（相对定位）
相对定位是相对于该元素在文档流中的原始位置，即以自己的原始位置为参照物。即使设定了元素的相对定位1偏移值，元素还是占着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute（绝对定位）
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的以定位祖先元素定位，如果元素没有以定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常的文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed（固定）
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>定位示例</title> <style> * { margin: 0; padding: 0; } .c1, .c2, .c3, .c4, .c4-father{ height: 150px; width: 150px; } .c1 { background-color: red; } .c2 { background-color: green; position: relative; left: 400px; top: 150px; } .c3 { background-color: blue; } .c4 { background-color: deeppink; position: absolute; top: 150px; left: 400px; } .c4-father { background-color: grey; position: relative; left: 150px; } .fixed-test { position: fixed; right: 20px; bottom: 20px; background-color: grey; } </style> </head> <body> <div class="c1">c1</div> <div class="c2">c2</div> <!--<div>多哒哒哒哒哒哒多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</div>--> <div class="c3">c3</div> <div class="c4-father"> <div class="c4"></div> </div> <div class="fixed-test">返回顶部</div> </body> </html>
课上笔记
1、内容回顾
1、伪类和伪元素
1、link
2、visited
3、hover（重要）
4、active
5、focus（input标签获取光标时）
2、伪元素
1、first-letter
2、before（重要，在内部前面添加）
3、after（重要，在内部后面添加）
2、CSS属性
1、字体
1、font-family
2、font-size
3、font-weight
2、文本属性
1、text-align 对齐（重要）
2、text-decoration 装饰（去除a标签的下划线（text-decoration:none））
3、text-indent 首行缩进
3、背景属性
1、background-color 背景颜色
2、background-image 背景图片（九宫格葫芦娃）url() no-repeat 50% 50%
4、color
1、red
2、#FFOOOO
3、rgb(255,0,0) --> rgba(155,0,0,0.5)
5、边框属性 border
1、border-width（边框宽度）
2、border-style（边框样式）
3、border-color（边框颜色）
简写：border：1px solid red；
6、CSS盒子模型
1、content（内容）
2、padding（内填充）调整内容和边框之间的距离时使用这个属性
3、border（边框）
4、margin（外边框）多用于调整标签之间的距离（注意两个挨着的标签margin取最大值）
注意：要习惯看浏览器console窗口的那个盒子模型
7、display（标签的展现形式）
1、inline
2、block 菜单里面的a标签可以设置为block
3、inline-block
4、none（不让标签显示，不占位）
8、float（浮动）
1、多用于实现布局效果
1、顶部的导航条
2、页面左右分栏（博客页面：左边20%，右边80%）
2、float
1、任何标签都可以浮动，浮动之后就会变成块级，a标签float之后就可以设置宽和高了
3、float取值
1、left
2、right
3、none
9、clear：清除浮动--> 清除浮动的副作用（内容飞出，父标签撑不起来）
1、结合伪元素来实现
.clearfix:after {
content:"",
display:"block",
clear:both;
}
2、clear取值
1、left
2、right
3、both
10、overflow
1、标签的内容放不下（溢出）
2、取值：
1、hidden --> 隐藏
2、scroll --> 出现滚动条
3、auto
4、scroll-x
5、scroll-y
例子：
圆形头像的例子
1、overflow:hidden
2、border-radius:50% （圆角）
11、定位position
1、static（默认）
2、relative（相对定位-->相对于原来的位置）
3、absolute（绝对定位-->相对于定位过的前辈标签）
4、fixed（固定-->返回顶部按钮）
补充：
脱离文档流的三种方式
float
absolute
fixed
12、opacity（不透明度）
1、取值0-1
2、和rgba()的区别：
1、opacity改变元素、字元素透明度效果
2、rgba()只改变背景颜色的透明度效果
13、z-index
1、数值越大，也靠近你
2、只能作用于定位过的元素
3、自定义的模态框示例
2、CSS补充
3、作业（小米商城）
display补充
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>display补充示例</title> <style> ul>li { /*padding: 15px;*/ border-bottom: 1px solid grey; } li>a { display: block; height: 45px; } </style> </head> <body> <ul> <li><a href="">玉米商城</a></li> <li><a href="">大米</a></li> <li><a href="">小米</a></li> </ul> </body> </html>
脱离文档流的情况
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>脱离文档流的情况</title> <style> * { margin: 0; padding: 0; } .c1 { height: 100px; width: 100px; background-color: red; } .c2 { height: 150px; width: 150px; background-color: green; /*float: right;*/ /*position: relative;*/ /*left: 400px;*/ /*position: absolute;*/ /*left: 400px;*/ position: fixed; right: 100px; top: 100px; } .c3 { height: 200px; width: 200px; background-color: blue; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
透明度
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>透明度示例</title> <style> .c1, .c2 { height: 400px; width: 400px; color: red; } .c1 { background-color: black ; opacity: 0.5; } .c2 { background-color: rgba(0,0,0,0.2); } </style> </head> <body> <div class="c1">我是有c1类的div标签</div> <div class="c2">我是有c2类的div标签</div> </body> </html>
z-index
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>z-index示例</title> <style> * { margin:0; padding: 0; } .c1 { height: 150px; width: 150px; background-color: red; position: relative; z-index: 2; } .c2 { height: 200px; width: 200px; background-color: green; position: relative; top: -150px; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> </body> </html>
青春版模态框
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>青春版模态框示例</title> <style> .cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); z-index: 999; } .modal { width: 600px; height: 400px; background-color: white; position: fixed; top: 50%; left: 50%; margin-top: -200px; margin-left: -300px; z-index: 1000; } </style> </head> <body> <div class="cover"></div> <div class="modal"></div> </body> </html>
小米商城导航条
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>小米商城导航条示例</title> <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } /*去除a标签的下划线*/ /*ul a{*/ /*text-decoration: none;*/ } .nav-left li { float: left; padding-right: 20px; } .nav-right { float:right; } .nav { background-color: black; padding: 15px 0; } .clearfix:after { clear:both; content: ""; display:block; } .s9 { width: 80%; margin:0 auto; } </style> </head> <body> <div class="nav"> <div class="s9 clearfix"> <div class="nav-left"> <ul> <li><a href="">玉米商城</a></li> <li><a href="">大米</a></li> <li><a href="">小米</a></li> <li><a href="">黑米</a></li> <li><a href="">小强</a></li> <li><a href="">花生油</a></li> <li><a href="">豆浆汁</a></li> <li><a href="">牛奶</a></li> </ul> </div> <div class="nav-right"> <a href="">登录</a> <a href="">注册</a> <a href="">购物车</a> </div> </div> <!--<div style="clear:both"></div>--> </div> </body> </html>
清除浮动
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style> .c1 { height: 50px; width: 50px; float: left; border: 1px solid black; } .c2 { clear:left; } .c10 { height: 50px; width: 50px; float: right; border:1px solid red; } .c20 { clear:right; } .c3 { height: 200px; width: 200px; background-color: green; float:right; } </style> </head> <body> <div class="c1"></div> <div class="c1"></div> <div class="c1 c2"></div> <div class="c1"></div> <div class="c1"></div> <!--<div class="c3"></div>--> <div class="c10"></div> <div class="c10"></div> <div class="c10 c20"></div> <div class="c10"></div> <div class="c10"></div> </body> </html>
扫一扫
964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
