第1章 前端之HTML介绍

1.1 课堂笔记总览

day12前端内容：1. HTML2. CSS3. JavaScript学习计划：1. HTML + CSS2. JavaScript3. jQuery和Bootstrap(Vue)1. 今日内容1. HTMLC/S -->  B/S (基于浏览器做业务)FTP:  "PUT|sexart.avi|2014"   ---> 同理浏览器作为一个客户端和服务端通信也要遵循一个协议（HTTP）HTML本质上就是一个规则。学习HTML主要学习标签。HTML标签的分类：1. 块儿级标签  默认独占一行（整个浏览器的宽度）   可以设置长和高2. 行内标签（内联标签） 长度由自己的内容来决定的。无法设置长和高HTML嵌套的规则：1. 块儿级标签可以嵌套行内标签 （div标签可以嵌套div标签）2. p标签不能嵌套div标签form表单系列：注意事项：1. form 不是 from2. input标签 必须要带一个name属性3. 如果form里面有文件提交的话 必须加一个属性：enctype="multipart/form-data"， 同时使用post方式提交4. 提交按钮必须是 <input type="submit">input标签1. text2. password3. submit4. radio5. checkbox6. fileselect下拉框1. 普通下拉框2. 多选下拉框    multiple3. 分组的下拉框  optgrouptextarea (大段文本)

View Code

1.2 Web服务本质

import socketsk = socket.socket()sk.bind(("127.0.0.1", 8080))sk.listen(5)while True:conn, addr = sk.accept()data = conn.recv(8096)conn.send(b"HTTP/1.1 200 OK\r\n\r\n")conn.secd(b"<h1>Hello world!</h1>")conn.close()

View Code

浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

1.2.1 课堂引入HTML(socket_server)

######################01 socket_server########################import socketsk = socket.socket()sk.bind(("127.0.0.1", 8000))sk.listen(5)while 1:conn, addr = sk.accept()conn.recv(1024)conn.send(b'HTTP/1.1 200 OK\r\n\r\n')# conn.send(b'<h1>hello s20</h1>')
with open("01.html", "rb") as f:data = f.read()conn.send(data)conn.close()

01 socket_server

<h1>hello s20</h1><a href="http://www.sogo.com">sogo</a><img src="http://img01.sogoucdn.com/app/a/100520093/4abb143c81046d05-2ce49f14414deb25-bf71c00025166d42b977adbaad80a5e6.jpg">

1.2.2 HTML是什么？

l  超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。

l  本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）

l  网页文件的扩展名：.html或.htm

1.2.3 HTML不是什么？

HTML是一种标记语言（markup language），它不是一种编程语言。

HTML使用标签来描述网页。

1.3 HTML文档结构

最基本的HTML文档：

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>css样式优先级</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>之间的文本是可见的网页主体内容。

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

1.3.1 我的第一个HTML文件

<!doctype html><html><head><meta charset="utf-8"><title>我的第一个HTML文件</title></head><body><!-- 这里是注释 --><h1>hello s20</h1><a href="http://www.sogo.com">sogo</a><img src="http://img01.sogoucdn.com/app/a/100520093/4abb143c81046d05-2ce49f14414deb25-bf71c00025166d42b977adbaad80a5e6.jpg"></body></html>

View Code

1.3.2 PyCharm模板示例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><!--2秒后跳转到对应的网址，注意引号--><meta http-equiv="refresh" content="2"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>标签介绍</title></head><body><h1 id="i1" name="s20" s20="hao" muitiple>海燕啊</h1><h1 id="i2" name="s20" s20="hao">海燕啊</h1><!-- 顶部导航条 开始--><!-- 顶部导航条 结束--><!-- 搜索框 开始--><!-- 搜索框 结束--></body></html>

View Code

1.4 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样式）

1.5 HTML注释

<!--注释内容-->

注释是代码之母。--摘自哪吒语录

第2章 前端之HTML常用标签

2.1 head内常用标签

标签

意义

<title></title>

定义网页标题

<style></style>

定义内部样式表

<script></script>

定义JS代码或引入外部JS文件

<link/>

引入外部样式表文件

<meta/>

定义网页原信息

2.1.1 Meta标签

Meta标签介绍：

  • <meta>元素可提供有关页面的原信息（mata-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学院">

2.2 body内常用标签

2.2.1 基本标签（块级标签和内联标签）

<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>

View Code

2.2.2 特殊字符

内容

对应代码

空格

&nbsp;

>

&gt;

<

&lt;

&

&amp;

¥

&yen;

版权

&copy;

注册

&reg;

2.2.3 div标签和span标签

div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

块级元素与行内元素的区别：

所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。

这两个元素是专门为定义CSS样式而生的。

注意：

关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含块级标签。

2.2.4 基本标签实例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>基本标签示例</title></head><body>我是一段普通文本<s>我是一个s标签</s><u>我是一个u标签</u><b>我是一个b标签</b><i>我是一个i标签</i><p>海燕，<br>在苍茫的大海上，<br>狂风卷积着乌云，<br>海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云</p><p>海燕，在苍茫的大海上，狂风卷积着乌云，海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云</p><p>海燕，在苍茫的大海上，狂风卷积着乌云，海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云</p><hr>&lt;&gt;&copy;&reg;&yen;<h1>标 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题1</h1><h2>标  题2</h2><h3>标   题3</h3><h4>标    题4</h4><h5>标题5</h5><h6>标题6</h6><hr><div>div</div><div>div</div><span>span我很长</span><span>span</span><p>我是一个p标签</p><p>我是一个p标签</p><!--标签的嵌套--><div><span>我是嵌套在div中的span标签</span></div><div><div>我是嵌套在div中的div</div></div><p><div>我是嵌套在p标签中的div</div></p></body></html>

View Code

2.2.5 img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

2.2.6 a标签

超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

###################什么是URL？####################

URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。URL举例http://www.sohu.com/stu/intro.htmlhttp://222.172.123.33/stu/intro.htmlURL地址由4部分组成第1部分：为协议：http://、ftp://等第2部分：为站点地址：可以是域名或IP地址第3部分：为页面在站点中的目录：stu第4部分：为页面名称，例如 index.html各部分之间用“/”符号隔开。

什么是URL？

<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表示在当前标签页中打开目标网页

2.2.7 img标签和a标签实例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>img和a</title></head><body><img src="https://mx.360buyimg.com/babel/jfs/t17893/239/637260795/100280/d9fd6379/5a9e1186N3cffb5da.jpg" alt="不要着急，图片马上就好"><img src="04.jpg" alt="" title="这是从jd拿来的一张图片" width="100"><a href="http://www.sogo.com" target="_blank">点我去搜狗</a><a href="#d1">点击跳转到ID值是d1的那个标签</a><div style="height: 1000px;background-color: red"></div><div id="d1">我是id值为d1的div标签</div></body></html>

View Code

2.2.8 列表

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>

2.2.9 列表示例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>列表示例</title></head><body><ul type="none"><li>aaa</li><li>bbb</li><li>ccc</li></ul><ol type="A" start="28"><li>xxx</li><li>yyy</li><li>zzz</li></ol><dl><dt>北京市</dt><dd>朝阳区</dd><dd>海淀区</dd><dd>昌平区</dd><dt>上海市</dt><dd>黄浦区</dd><dd>浦东区</dd><dd>浦东新区</dd></dl></body></html>

View Code

2.2.10 表格

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。

表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

表格的基本结构：

<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>

View Code

属性:

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列（即合并单元格）

2.2.11 表格示例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>表格示例</title></head><body><table border="1" cellpadding="10" cellspacing="10"><thead><tr><th>姓名</th><th>年龄</th><th>爱好</th></tr></thead><tbody><tr><td>Alex</td><td>9000</td><td rowspan="2">吹牛逼</td></tr><tr><td colspan="2">Egon</td><!--<td>18</td>--><!--<td>喊麦</td>--></tr></tbody></table></body></html>

View Code

2.2.12 form

功能：

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

表单属性

属性

描述

accept-charset

规定在被提交表单中使用的字符集（默认：页面字符集）。

action

规定向何处提交表单的地址（URL）（提交页面）。

autocomplete

规定浏览器应该自动完成表单（默认：开启）。

enctype

规定被提交数据的编码（默认：url-encoded）。

method

规定在提交表单时所用的 HTTP 方法（默认：GET）。

name

规定识别表单的名称（对于 DOM 使用：document.forms.name）。

novalidate

规定浏览器不验证表单。

target

规定 action 属性中地址的目标（默认：_self）。

表单元素

基本概念：

HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。

表单一般用来收集用户的输入信息

表单工作原理：

访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。

服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。

#####################Django接收上传文件代码######################from django.conf.urls import urlfrom django.shortcuts import HttpResponsedef upload(request):print("request.GET:", request.GET)print("request.POST:", request.POST)if request.FILES:filename = request.FILES["file"].namewith open(filename, 'wb') as f:for chunk in request.FILES['file'].chunks():f.write(chunk)return HttpResponse('上传成功')return HttpResponse("收到了！")urlpatterns = [url(r'^upload/', upload),]

Django接收上传文件代码

2.2.13 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均适用

2.2.14 select标签

<form action="" method="post"><select name="city" id="city"><option value="1">北京</option><option selected="selected" value="2">上海</option><option value="3">广州</option><option value="4">深圳</option></select></form>

属性说明：

  • multiple：布尔属性，设置后为多选，否则默认单选
  • disabled：禁用
  • selected：默认选中该项
  • value：定义提交时的选项值

2.2.15 label标签

定义：<label> 标签为 input 元素定义标注（标记）。
说明：

  1. label 元素不会向用户呈现任何特殊效果。
  2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action=""><label for="username">用户名</label><input type="text" id="username" name="username"></form>

2.2.16 textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">默认内容</textarea>

属性说明：

  • name：名称
  • rows：行数
  • cols：列数
  • disabled：禁用

2.2.17 form表单系列示例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>form表单系列</title></head><body><form novalidate autocomplete="off" action="http://127.0.0.1:8000/upload/" method="post" enctype="multipart/form-data"><p><label for="i1">用户名：</label><input id="i1" disabled name="username" type="text"></p><p>密码：<input name="password" type="password"></p><p>邮箱：<input name="email" type="email"></p><p>日期：<input name="join_date" type="date"></p><p><label for="r1">男</label><input id="r1" name="gender" type="radio" value="1"><label>女<input name="gender" type="radio" value="0"></label><input checked name="gender" type="radio" value="2">保密</p><p>爱好：<input name="hobby" type="checkbox" value="basketball">篮球<input name="hobby" type="checkbox" value="football">足球<input checked name="hobby" type="checkbox" value="doublecolorball">双色球</p><p>从哪儿来：<select name="addr" multiple><option value="010">北京</option><option value="021">上海</option><option selected value="0631">威海</option></select><select name="addr2"><!--select分组形式--><optgroup label="北京市"><option value="">朝阳区</option><option value="">海淀区</option><option value="">昌平区</option></optgroup><option value="021">上海</option><option value="0631">威海</option></select></p><p>上传头像：<input name="head_img" type="file"></p><p>个人简介：<textarea name="memo" cols="30" rows="10"></textarea></p><p><input type="submit" value="提交"><input type="reset" value="清空"><input type="hidden" value="隐藏的按钮"><input type="button" value="普通按钮"><button>普通按钮</button></p><!--{"username": "alex", "password": "alexdasgabi", "gender": 1, "hobby": ["basketball", "football"]}--></form></body></html>

View Code

第3章 前端之CSS介绍

3.1 课堂笔记总览

2. CSS（改变网页的外观效果）0. 前提如何在HTML文件中使用（引入）CSS？三种方式1. 直接在标签里通过style属性来定义CSS样式2. 在head标签中通过 style来定义3. 把样式（CSS）文件单独写在一个.css文件中，然后通过 link标签来与HTML文件建立联系CSS语法：选择器 {样式1：值1;样式2：值2;...}1. 找标签CSS选择器1. 基本查找1. 标签选择器   （改所有/设置默认样式）2. ID选择器     （针对某一个特定的标签修改样式）3. 类选择器     (根据需求修改某一类标签的样式)2. 通用（全选）1. *3. 组合选择器(HTML标签的层级关系)1. 后代选择器 （从x的子子孙孙找y标签）-->   x y2. 儿子选择器  (x的儿子y标签)         -->   x>y3. 毗邻选择器  (紧挨在x下面的y标签)   -->   x+y4. 弟弟选择器  (下面所有的xx标签)     -->   x~y↑上面常用4. 属性选择器更多用于找input[type="text"]5. 分组和嵌套1. 分组 （减少重复的CSS样式代码） 逗号分隔的两个选择器2. 上面的选择器都支持混搭使用6. 伪类选择器1. div:hover { color: red;}7. 伪元素选择器1. p:before {}  在内容前面加2. p:after {}   在内容后面加CSS选择器的优先级：0. 继承的优先级最低1. 当选择器相同的时候，谁靠近标签谁样式生效2. 当选择器不同的时候，我们按照权重计算公式来判断哪个样式生效（内联样式1000>ID选择器100>类选择器10>元素选择器1）不常用也不推荐使用的 !import2. 改样式(CSS属性)1. 字体相关1. color  修改字体颜色2. font-size 字体大小2. 文本1. color           字体颜色2. text-align      对齐方式3. text-decoration 文字装饰 (去掉a标签的下划线 text-decoration: none;)3. 背景相关属性1. background-color2. bakground-image1. 把很多小图片合并成一张大图片2. 鼠标滚动 背景不动（姑娘一直在看着你）4. 边框1. border: 1px solid red;2. 画圆：border-radius=宽/高的一半5. display1. block   显示成块级标签2. inline  显示成行内标签3. inline-block 既有块儿标签右有行内标签的特点4. none    隐藏6. CSS盒子模型由内到外：1. content    内容2. padding    内填充  （用于调整内容和边框之间的距离，撑大标签）3. border     边框4. margin     外边距  （用于调整标签和标签之间的距离）7. float 浮动（失去原来的位置）1. left   往左浮 2. right  往右浮3. none   不浮（默认值）浮动的规则：1. 无论什么标签 一旦浮动就变成了块儿级标签（可以设置宽高）2. 浮动的标签总是浮向前一个浮动的标签，如果摆不下就挪到下一行开始8. 清除浮动 clear --> 指的是清除浮动带来的负面效果 1. left   我的左边不能有浮动元素2. right  我的右边不能有浮动元素3. both   我的两边不能有浮动元素最常见应用：.clearfix {content: "";display: "block";clear："both"}9. 定位1. 相对定位 relative （相当于标签原来所在的位置来定位）2. 绝对定位 absolute  (相对于已经定位过的祖先标签来定位)  失去原来的位置3. 固定定位 fixed    （固定在屏幕的某个位置)              失去原来的位置本周作业：1. 把上课的Blog的页面自己独立写一遍2. 尝试把小米商城的页面写完图片生成的网站：https://dummyimage.com/1200x500/F00/fff.png写作业注意：1. 把HTMl文件的结构先写出来，分成很多小块。（很重要，帮助理解HTML的结构）2. 用CSS依次调整每一块的样式3. 不知道用什么标签的时候，块儿级就用div，行内就用span

View Code

3.2 CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

3.3 CSS语法

3.3.1 CSS实例

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

3.3.2 CSS注释

/*这是注释*/

注释是代码之母。--摘自哪吒语录

3.4 CSS的几种引入方式

3.4.1 行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

3.4.2 内部样式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head><meta charset="UTF-8"><title>Title</title><style>p{background-color: #2b99ff;
}</style></head>

3.4.3 外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

第4章 前端之CSS选择器

4.1 基本选择器

4.1.1 元素选择器

p {color: "red";}

4.1.2 ID选择器

#i1 {background-color: red;}

4.1.3 类选择器

.c1 {font-size: 14px;}p.c1 {color: red;}

注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

4.1.4 通用选择器

* {color: white;}

4.1.5 CSS选择器示例

###########################08.css########################/*p {*//*color: green;*//*}*//*标签选择器*//*div {color: blue;font-size: 24px}*//*ID选择器*//*#d2 {*//*color: yellow;*//*}*//*类选择器*//*.c1 {*//*color: blue;*//*}*//*通用（全选）*/* {color: deeppink;}

08.css

###########################CSS选择器示例.html######################<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>选择器示例</title><!--<style>--><!--p {--><!--color: red;--><!--}--><!--</style>--><link rel="stylesheet" href="./08.css"></head><body><div>div标签1</div><div id="d2">div标签2</div><p class="c1">p标签</p><span class="c1">我是span标签</span><span>我是span2号</span></body></html>

CSS选择器示例.html

4.2 组合选择器

4.2.1 后代选择器

/*li内部的a标签设置字体颜色*/li a {color: green;}

4.2.2 儿子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/div>p {font-family: "Arial Black", arial-black, cursive;}

4.2.3 毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/div+p {margin: 5px;}

4.2.4 弟弟选择器

/*i1后面所有的兄弟p标签*/#i1~p {border: 2px solid royalblue;}

4.2.5 组合选择器示例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>组合选择器示例</title><style>/*后代选择器*//*div a {*//*color: red;*//*}*//*儿子选择器*//*div>a {*//*color: green;*//*}*//*毗邻选择器*//*a+span {*//*color: blue;*//*}*//*弟弟选择器*/a~span {color: chocolate;}.c1 a {}</style></head><body><div id="d1" class="c1"><p><a>我是孙子a标签</a></p><span>我是a前面的span标签</span><a>我是儿子a标签</a><span>我是span标签1号</span><span>我是span标签2号</span></div></body></html>

View Code

4.3 属性选择器

/*用于选取带有指定属性的元素。*/p[title] {color: red;}/*用于选取带有指定属性和值的元素。*/p[title="213"] {color: green;}

#######################不怎么常用的属性选择器##########################/*找到所有title属性以hello开头的元素*/[title^="hello"] {color: red;}/*找到所有title属性以hello结尾的元素*/[title$="hello"] {color: yellow;}/*找到所有title属性中包含（字符串包含）hello的元素*/[title*="hello"] {color: red;}/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/[title~="hello"] {color: green;}

不怎么常用的属性选择器

4.3.1 属性选择器示例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>属性选择器</title><style>/*[s20] {*//*color: red;*//*}*//*[s20="hao"] {*//*color: red;*//*}*/#d3,
p {color: red;}/*p {*//*color: red;*//*}*/</style></head><body><div s20>111</div><div s20="hao">222</div><div id="d3">333</div><p>第1个p标签</p><p>第2个p标签</p></body></html>

View Code

4.4 分组和嵌套

4.4.1 分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：

div, p {color: red;}

上面的代码为div标签和p标签统一设置字体为红色。

通常，我们会分两行来写，更清晰:

div,p {color: red;}

4.4.2 嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {color: red;}

4.5 伪类选择器

/* 未访问的链接 */a:link {color: #FF0000

}/* 已访问的链接 */a:visited {color: #00FF00

}/* 鼠标移动到链接上 */a:hover {color: #FF00FF

}/* 选定的链接 */a:active {color: #0000FF

}/*input输入框获取焦点时样式*/input:focus {outline: none;background-color: #eee;

View Code

4.6 伪元素选择器

4.6.1 first-letter

常用的给首字母设置特殊样式：

p:first-letter {font-size: 48px;color: red;}

4.6.2 before

/*在每个<p>元素之前插入内容*/p:before {content:"*";color:red;}

4.6.3 after

/*在每个<p>元素之后插入内容*/p:after {content:"[?]";color:blue;}

before和after多用于清除浮动。

4.6.4 伪类和伪元素选择器示例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>伪类和伪元素选择器</title><style>a:link {color: green;}a:visited {color: black;}a:active {color: deeppink;}#d1:hover {color: chocolate;}input:focus {outline: none;background-color: red;}p:before {content: "*";  /*使用CSS添加的内容*/color: red;  /*该内容应用的样式*/}p:after {content: "[?]";color: blue;}</style></head><body><a href="http://www.sogo.com">sogo</a><a href="http://www.sogoba.com">sogoba</a><div id="d1">div</div><input type="text"><p>海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间</p><p>海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间</p><p>海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间</p><p>高傲的飞翔。。。</p></body></html>

View Code

4.7 选择器的优先级

4.7.1 CSS继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

body {color: red;}

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p {color: green;}

此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

4.7.2 选择器的优先级

我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

除此之外还可以通过添加 !import方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!import会使样式文件混乱不易维护。

万不得已可以使用!import

4.7.3 选择器的优先级示例

#########################12.css#############################/*权重是10 +１*/div.c1 {color: blue;}

12.css

###########################选择器的优先级.html#######################<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>选择器的优先级</title><style>body {color: chocolate;}/*我的权重是100＋１*/div#d1 {color: green;}</style><link rel="stylesheet" href="12.css"></head><body><div id="d1" class="c1">我是div标签</div><p class="c1">我是p标签</p></body></html>

选择器的优先级.html

第5章 CSS属性相关

5.1 字体属性

5.1.1 文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

简单实例：

body {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}

5.1.2 字体大小

p {font-size: 14px;}

如果设置成inherit表示继承父元素的字体大小值。

5.1.3 字重（粗细）

font-weight用来设置字体的字重（粗细）。

值

描述

normal

默认值，标准粗细

bold

粗体

bolder

更粗

lighter

更细

100~900

设置具体粗细，400等同于normal，而700等同于bold

inherit

继承父元素字体的粗细值

5.1.4 文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

  • 十六进制值 - 如: ＃FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如:  red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

5.2 文字属性

5.2.1 文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

值

描述

left

左边对齐 默认值

right

右对齐

center

居中对齐

justify

两端对齐

5.2.2 文字装饰

text-decoration 属性用来给文字添加特殊效果。

值

描述

none

默认。定义标准的文本。

underline

定义文本下的一条线。

overline

定义文本上的一条线。

line-through

定义穿过文本下的一条线。

inherit

继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线：

a {text-decoration: none;}

5.2.3 首行缩进

将段落的第一行缩进 32像素：

p {text-indent: 32px;}

5.2.4 字体和文本相关属性示例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>字体和文本相关属性</title><style>p {/*font-size: 48px;*//*font-family: "Arial", "Microsoft YaHei", "微软雅黑", "sans serif";*//*color: red;*//*color: #FF0000;*//*color: rgb(0,255,0);*//*color: rgba(0,255,0,0.3);*/}#p1 {/*w文本的居中方式*/text-align: justify;/*给文本加下划线*/text-decoration: underline;text-indent: 28px;}/*去掉a标签默认的下划线*/a {text-decoration: none;}</style></head><body><p style="font-weight: 100">在苍茫的大海上，狂风卷积着乌云。</p><p>在苍茫的大海上，狂风卷积着乌云。</p><p style="font-weight: 900">在苍茫的大海上，狂风卷积着乌云。</p><p id="p1">在苍茫的大海上，狂风卷积着乌云。海上，狂风卷积着乌云。海上，狂风卷积着乌云。海上，狂风卷积着乌云。海上，狂风卷积着乌云。海上，狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。海上，狂风卷积着乌云。海上，狂风卷积着乌云。海上，狂风卷积着乌云。海上，狂风卷积着乌云。海上，狂风卷积着乌云。海上，狂风卷积着乌云。</p><a href="http://www.sogo.com">sogo</a></body></html>

View Code

5.3 背景属性

/*背景颜色*/background-color: red;/*背景图片*/background-image: url('1.jpg');/*背景重复repeat(默认):背景图片平铺排满整个网页repeat-x：背景图片只在水平方向上平铺repeat-y：背景图片只在垂直方向上平铺no-repeat：背景图片不平铺*/background-repeat: no-repeat;/*背景位置*/background-position: right top（20px 20px）;

View Code

支持简写：

background:#ffffff url('1.png') no-repeat right top;

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

一个有趣的例子：

###############################鼠标滚动背景不动############################<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>滚动背景图示例</title><style>* {margin: 0;}.box {width: 100%;height: 500px;background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center;background-attachment: fixed;}.d1 {height: 500px;background-color: tomato;}.d2 {height: 500px;background-color: steelblue;}.d3 {height: 500px;background-color: mediumorchid;}</style></head><body><div class="d1"></div><div class="box"></div><div class="d2"></div><div class="d3"></div></body></html>

鼠标滚动背景不动

5.3.1 背景相关属性示例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>背景相关属性</title><style>div {height: 600px;width: 600px;/*background-color: red;*/background: url("./hulu.png") no-repeat 200px 200px;}.c1 {height: 500px;width: 100%;background-color: red;}.c2 {height: 500px;width: 100%;background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat fixed center center;}.c3 {height: 500px;width: 100%;background-color: blue;}</style></head><body><div></div><div class="c1"></div><div class="c2"></div><div class="c3"></div></body></html>

View Code

5.4 边框

5.4.1 边框介绍

边框属性

  • border-width
  • border-style
  • border-color
#i1 {border-width: 2px;border-style: solid;border-color: red;}

通常使用简写方式：

#i1 {border: 2px solid red;}

边框样式

值

描述

none

无边框。

dotted

点状虚线边框。

dashed

矩形虚线边框。

solid

实线边框。

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

#i1 {border-top-style:dotted;border-top-color: red;border-right-style:solid;border-bottom-style:dotted;border-left-style:none;}

5.4.2 border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

5.4.3 边框相关属性示例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>边框相关属性</title><style>div {width: 200px;height: 200px;background-color: red;/*border-style: solid;*//*border-color: green;*//*border-width: 5px;*//*border: 5px solid green;*//*border-right: 5px solid green;*/border-radius: 100px;}</style></head><body><div></div></body></html>

View Code

5.5 display属性

用于控制HTML元素的显示效果。

值

意义

display:"none"

HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。

display:"block"

默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。

display:"inline"

按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。

display:"inline-block"

使元素同时具有行内元素和块级元素的特点。

5.5.1 display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

5.5.2 display属性

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>display属性</title><style>div {background-color:red;width: 1000px;display: inline;}a {/*display: block;*//*display: none;*/visibility: hidden;width: 1000px;}</style></head><body><div>div</div><a href="">a1</a><a href="">a2</a><div>div2</div></body></html>

View Code

第6章 CSS盒子模型

  • margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
  • padding:           用于控制内容与边框之间的距离；
  • Border(边框):     围绕在内边距和内容外的边框。
  • Content(内容):   盒子的内容，显示文本和图像。

看图吧：

6.1 margin外边距

.margin-test {margin-top:5px;margin-right:10px;margin-bottom:15px;margin-left:20px;}

推荐使用简写：

.margin-test {margin: 5px 10px 15px 20px;}

顺序：上右下左

常见居中：

.mycenter {margin: 0 auto;}

6.2 padding内填充

.padding-test {padding-top: 5px;padding-right: 10px;padding-bottom: 15px;padding-left: 20px;}

推荐使用简写：

.padding-test {padding: 5px 10px 15px 20px;}

顺序：上右下左

补充padding的常用简写方式：

  • 提供一个，用于四边；
  • 提供两个，第一个用于上－下，第二个用于左－右；
  • 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
  • 提供四个参数值，将按上－右－下－左的顺序作用于四边；

6.3 盒子模型示例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>CSS盒子模型</title><style>.c1 {height: 200px;width: 200px;background-color: red;border: 5px solid green;/*padding-top: 5px;*//*padding-right: 10px;*//*padding-bottom: 15px;*//*padding-left: 20px;*//*同时设置多个值 推荐使用简写*//*padding: 5px 10px 15px 20px; !*上 右  下 左*!*//*padding: 5px 10px 20px;  !* 上 左右 下*!*//*padding: 10px 20px; !*上下 左右*!*/padding: 20px;  /*上下左右*//*padding: 20px;*//*margin-top: 100px;*/margin: 5px 10px 15px 20px;}button {padding: 20px;}</style></head><body><div class="c1"></div><div class="c1"></div><button>按钮</button></body></html>

View Code

6.4 float

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

  • 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

6.4.1 三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

6.4.2 clear

clear属性规定元素的哪一侧不允许其他浮动元素。

值

描述

left

在左侧不允许浮动元素。

right

在右侧不允许浮动元素。

both

在左右两侧均不允许浮动元素。

none

默认值。允许浮动元素出现在两侧。

inherit

规定应该从父元素继承 clear 属性的值。

注意：clear属性只会对自身起作用，而不会影响其他元素。

6.4.3 父标签塌陷问题

.clearfix:after {content: "";display: block;clear: both;}

6.4.4 float示例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>float示例</title><style>* {margin: 0;}.nav {background-color: black;/*height: 50px;*/}ul {list-style-type: none;padding: 0;}ul.nav-left>li {float: left;/*width: 100px;*/padding: 15px;}ul.nav-right>li {float: right;/*width: 100px;*/padding: 15px;}ul a {color: #eee;
text-decoration: none;}ul a:hover {color: red;}/*清除浮动的副作用*/.clearfix:after {content: "";display: block;clear: left; /*我这个标签 左边不能有浮动的元素*/}.container {width: 1028px;margin: 0 auto;}</style></head><body><!--顶部导航栏 开始--><div class="nav clearfix"><div class="container clearfix"><ul class="nav-left"><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 class="c2"></div>--><ul class="nav-right"><li><a href="">购物车</a></li><li><a href="">登录</a></li><li><a href="">注册</a></li></ul></div></div><!--顶部导航栏 结束--><div></div></body></html>

View Code

6.5 overflow溢出属性

值

描述

visible

默认值。内容不会被修剪，会呈现在元素框之外。

hidden

内容会被修剪，并且其余内容是不可见的。

scroll

内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit

规定应该从父元素继承 overflow 属性的值。
  • overflow（水平和垂直均设置）
  • overflow-x（设置水平方向）
  • overflow-y（设置垂直方向）

6.5.1 overflow属性示例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>overflow属性</title><style>.c1 {width: 100px;height: 200px;border: 1px solid black;/*overflow: auto;*/overflow-y: scroll;}.head-img {width: 128px;height: 128px;border-radius: 64px;border: 3px solid yellow;overflow: hidden;}.head-img img {max-width: 100%;}</style></head><body><div class="c1">海燕啊，你可长点心吧！海燕啊，你可长点心吧！海燕啊，你可长点心吧！海燕啊，你可长点心吧！海燕啊，你可长点心吧！海燕啊，你可长点心吧！海燕啊，你可长点心吧！</div><div class="head-img"><img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt=""></div></body></html>

View Code

6.6 定位（position）

6.6.1 static

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

6.6.2 relative（相对定位）

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

6.6.3 absolute（绝对定位）

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

6.6.4 fixed（固定）

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

示例代码：

##########################返回顶部按钮样式示例#############################<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>返回顶部示例</title><style>* {margin: 0;}.d1 {height: 1000px;background-color: #eeee;
}.scrollTop {background-color: darkgrey;padding: 10px;text-align: center;position: fixed;right: 10px;bottom: 20px;}</style></head><body><div class="d1">111</div><div class="scrollTop">返回顶部</div></body></html>

返回顶部按钮样式示例

6.6.5 定位属性示例

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>定位属性</title><style>* {margin: 0;padding: 0;}.c1,.c2,.c3,.cc{height: 100px;width: 100px;}.c1 {background-color: red;}.c2 {background-color: blue;/*position: relative; !*相对定位*!*/position: absolute;left: 100px;top: 100px;}.c3 {background-color: green;}.cc {position: relative;  /*光写一个relative 不会改变位置 但是它变成了已经定位的标签*/background-color: deeppink;}.sc {position: fixed;right: 20px;bottom: 20px;}</style></head><body><div class="c1"></div><div class="cc"><div class="c2"></div></div><div class="c3"></div><button class="sc">返回顶部</button></body></html>

View Code

6.7 z-index

#i2 {z-index: 999;}

设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。z-index 仅能在定位元素上奏效。

##########################自定义模态框示例#############################<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>自定义模态框</title><style>.cover {background-color: rgba(0,0,0,0.65);position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 998;}.modal {background-color: white;position: fixed;width: 600px;height: 400px;left: 50%;top: 50%;margin: -200px 0 0 -300px;z-index: 1000;}</style></head><body><div class="cover"></div><div class="modal"></div></body></html>

自定义模态框示例

6.8 opacity

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

第7章 综合示例

7.1 顶部导航菜单

###############################顶部导航菜单示例##############################<!DOCTYPE HTML><html><head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>li标签的float示例</title><style>/*清除浏览器默认外边距和内填充*/* {margin: 0;padding: 0;}a {text-decoration: none; /*去除a标签默认的下划线*/}.nav {background-color: black;height: 40px;width: 100%;position: fixed;top: 0;}ul {list-style-type: none; /*删除列表默认的圆点样式*/margin: 0; /*删除列表默认的外边距*/padding: 0; /*删除列表默认的内填充*/}/*li元素向左浮动*/li {float: left;}li > a {display: block; /*让链接显示为块级标签*/padding: 0 15px; /*设置左右各15像素的填充*/color: #b0b0b0; /*设置字体颜色*/
line-height: 40px; /*设置行高*/}/*鼠标移上去颜色变白*/li > a:hover {color: #fff;
}/*清除浮动 解决父级塌陷问题*/.clearfix:after {content: "";display: block;clear: both;}</style></head><body><!-- 顶部导航栏 开始 --><div class="nav"><ul class="clearfix"><li><a href="">玉米商城</a></li><li><a href="">MIUI</a></li><li><a href="">ioT</a></li><li><a href="">云服务</a></li><li><a href="">水滴</a></li><li><a href="">金融</a></li><li><a href="">优品</a></li></ul></div><!-- 顶部导航栏 结束 --></body></html>

顶部导航菜单示例

7.2 圆形头像

###############################圆形头像图示例###############################<!DOCTYPE HTML><html><head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>圆形的头像示例</title><style>* {margin: 0;padding: 0;background-color: #eeeeee;
}.header-img {width: 150px;height: 150px;border: 3px solid white;border-radius: 100%;overflow: hidden;}.header-img>img {max-width: 100%;}</style></head><body><div class="header-img"><img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt=""></div></body></html>

圆形头像图示例

7.3 blog示例

7.3.1 blog.html

##############################blog.html############################<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title</title><link rel="stylesheet" href="blog.css"></head><body><!--左边 开始--><div class="left"><div class="head-img"><img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt=""></div><!--blog标题--><h3 class="blog-name">我的blog</h3><!--介绍信息--><div class="introduce"><p>这个人很懒，什么都没有留下。</p></div><!--博客连接 开始--><ul class="blog-links"><li><a href="">关于我</a></li><li><a href="">微信公众号</a></li><li><a href="">微博</a></li></ul><!--博客连接 结束--><!--博客的标签 开始--><ul class="blog-tags"><li><a href="">HTML</a></li><li><a href="">CSS</a></li><li><a href="">JavaScript</a></li></ul><!--博客的标签 结束--></div><!--左边 结束--><!--右边 开始 --><div class="right"><!--w文章列表 开始--><div class="article-list"><!--文章 开始--><div class="article"><div class="head"><h1 class="article-title">海燕</h1><span class="article-date">2018-03-10</span></div><div class="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><div class="tag-list"><span>HTML</span><span>CSS</span></div></div><!--文章 结束--><!--文章 开始--><div class="article"><div class="head"><h1 class="article-title">海燕</h1><span class="article-date">2018-03-10</span></div><div class="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><div class="tag-list"><span>HTML</span><span>CSS</span></div></div><!--文章 结束--><!--文章 开始--><div class="article"><div class="head"><h1 class="article-title">海燕</h1><span class="article-date">2018-03-10</span></div><div class="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><div class="tag-list"><span>HTML</span><span>CSS</span></div></div><!--文章 结束-->        <!--文章 开始--><div class="article"><div class="head"><h1 class="article-title">海燕</h1><span class="article-date">2018-03-10</span></div><div class="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><div class="tag-list"><span>HTML</span><span>CSS</span></div></div><!--文章 结束-->        <!--文章 开始--><div class="article"><div class="head"><h1 class="article-title">海燕</h1><span class="article-date">2018-03-10</span></div><div class="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><div class="tag-list"><span>HTML</span><span>CSS</span></div></div><!--文章 结束-->        <!--文章 开始--><div class="article"><div class="head"><h1 class="article-title">海燕</h1><span class="article-date">2018-03-10</span></div><div class="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><div class="tag-list"><span>HTML</span><span>CSS</span></div></div><!--文章 结束--><!--文章 开始--><div class="article"><div class="head"><h1 class="article-title">海燕</h1><span class="article-date">2018-03-10</span></div><div class="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><div class="tag-list"><span>HTML</span><span>CSS</span></div></div><!--文章 结束--></div><!--w文章列表 结束--></div><!--右边 结束--></body></html>

blog.html

7.3.2 blog.css

####################blog.css#############################/*这是blog页面的CSS样式文件*//*通用的样式*/* {margin: 0;padding: 0;}a {text-decoration: none;}/*左边 样式*/.left {width: 20%;float: left;background-color: #4d4d4d;
height: 100%;position: fixed;bottom: 0;}/*头像*/.head-img {height: 120px;width: 120px;border-radius: 60px;border: 3px solid white;overflow: hidden;margin: 15px auto;}.head-img img {max-width: 100%;}.blog-name,.introduce,.blog-links,.blog-tags{text-align: center;color: white;}.introduce {margin-top: 20px;}.blog-links a,.blog-tags a{color: black;}.blog-links a:hover,.blog-tags a:hover {color: white;}.blog-links,.blog-tags {margin-top: 25px;}/*右边的样式*/.right {width: 80%;float: right;background-color: #eeeeee;

}.article-list {width: 85%;margin-left: 20px;}.head {border-left: 5px solid red;padding: 15px;}.article-date {float: right;}.article-title {display: inline-block;}.article {background-color: white;margin-bottom: 20px;}.content,.tag-list {margin-top: 20px;}.content {padding: 15px;}.tag-list {margin-left: 15px;padding: 15px 15px 15px 0;border-top: 1px solid #4d4d4d;

}.tag-list span:before {content: "#";}

blog.css

转载于:https://www.cnblogs.com/maojiong/p/8674432.html

day12-HTML、CSS与blog页面讲解相关推荐

  1. 前端实例1——blog页面（css样式）

    效果图 HTML <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset=&quo ...

  2. 制作html表白页面,HTML+CSS入门 表白页面实例讲解

    本篇教程介绍了HTML+CSS入门 表白页面实例讲解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 目录文件结构: index.html + jquery\jquery-1 ...

  3. 利用css对shiny页面优化及利用htmlwidgets包创建HTML控件

    内容来源:2017年5月20日,乐逗游戏高级数据分析师在"第十届中国R会议软件工具专场"进行<HTTPS最佳安全实践>演讲分享.IT大咖说作为独家视频合作方,经主办方和 ...

  4. Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析

    加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景       在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...

  5. HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】

    w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

  6. [小改进]在个人Blog页面显示文章阅读数

    以前查看文章的阅读数只有两个地方:一是在首页.二是在管理页面. 现在改成:在个人Blog页面每个显示文章的地方都会显示文章的阅读数, 显示位置在评论数之前. 转载于:https://www.cnblo ...

  7. [css] 移动端页面不满一屏时如何实现满屏背景？

    [css] 移动端页面不满一屏时如何实现满屏背景? body {min-height: 100vh; } 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨 ...

  8. [css] 如何取消页面中选中的文字？

    [css] 如何取消页面中选中的文字? user-select: none; /* browser-specific values */ -moz-user-select: none; -webkit ...

  9. 在个人Blog页面显示积分与排名

    根据 chenge 的建议, 在个人Blog页面搜索下方增加了积分与排名的显示.积分与排名只用于在首页显示前200名博客.如果你不想显示,可以在"Preferences"中设置为隐 ...

最新文章

  1. c# 监视目录下的文件变化
  2. 【重大更新】DevExpress v17.1新版亮点（DevExtreme HTML5/JS篇）
  3. 通过阿里云容器服务K8S Ingress Controller实现应用服务的灰度发布
  4. java nodelist 快速排序,【Leetcode】Sort List in java，你绝对想不到我是怎么做的^^我写完过了我自己都觉得好jian~...
  5. python自动化运维平台能用php开发吗_关于数据库自动化运维平台的设计及开发实现思路...
  6. 每日Linux命令(1)-date
  7. Requests库实战(二)---破解百度翻译
  8. 各行业大数据可视化界面参考
  9. mimakatz用法_两步完成利用procdump64+mimikatz获取win用户密码
  10. css禁用选中文本_使用CSS禁用文本选择突出显示
  11. 迄今以来在硅谷的最大押注：摩根大通雇超千人专注金融科技
  12. 下载链接｜从CAD2004到CAD2022下载安装软件，提升CAD施工图大师一点儿也不难！
  13. Qt画面切换和刷新延迟的问题
  14. ghostscript的坑
  15. 高通 msm8953 LCD 休眠/唤醒 流程
  16. 第一个用python实现的数据化运营分析实例——销售预测
  17. 英国四高校携手开展智能传感器系统研究
  18. 美国医院权威评估体系
  19. 计算机教师资格证难不难考,教师资格证 信息技术难考吗
  20. 五金冲压模具设计详细解说！

热门文章

  1. 富有哲理的12条大数据金句
  2. PHP 基本语句
  3. 二维灰度地形图山脊线自动提取方法整理（PPA）
  4. 怎么更换驾驶证上面的照片？教你如何更换驾驶证照片
  5. kettle使用 - 关闭Carte服务
  6. 鸣人来教你安装配置JDK
  7. 计算机网络ip地址在哪,w7的ip地址在哪？小编教你怎么查看
  8. php 聚合广告平台,GitHub - mystudytime/easy-amazon-advertising: 基于 amazon advertising v2 接口的 PHP 广告信息组件...
  9. 微信分享带图片，描述（php版）
  10. 宏碁掠夺者Predator首款RGB内存条即将发售，特挑三星B-Die颗粒