路飞学城Python-Day49

55-善于使用父亲的padding,而不是margin

56-文本属性和字体属性

div{

width: 300px;

height: 100px;

border: 1px solid red;

/*设置字体的大小,px是像素的意思*/

/*字体的单位还有rem em %*/

/*em主要是用于移动端的字体样式大小的调节*/

/*rem也是移动端的布局使用*/

font-size: 20px;

}

57-单行文本垂直居中

当行文本居中是采用的line-height

58-多行文本垂直居中

多行文本居中采用的是line-height+padding修改外框的格式和大小来限制

修改字体的大小还是会修改格式，所以要先确定字体的大小，并且不再修改

59-font-family介绍

使用font-family的注意点

1.网页中不是所有的字体都能用，因为这个字体要看用户的电脑里装没装，

比如设置的字体为"华文彩云"，但是用户的电脑里没有安装这个字体，那么就会自动变为宋体

页面中，中文我们只使用微软雅黑、宋体、黑体

如果页面中需要其他的字体，那么需要切图，英语：Arial，Times New Roman

2.为了防止用户电脑里面没有微软雅黑，就要用英语的逗号，隔开备选字体，备选字体可以有无数个

3.我们将英语字体放在最前面，这样所有的中文字体就不能匹配英语字体，就会自动变为后面的中文字体

4.所有的中文字体，都有英语别名

5.行高可以用百分比表示字号的百分之多少

60-超链接美化导航案例

a标签有自己的伪类的元素的格式，不继承color属性，需要单独重新设置

61-颜色的使用

color的使用

光学显示器：每个像素都是由三原色的原件组成的靠明亮度的不同来做区分的颜色

62-background-img的使用

div{

width: 1200px;

height: 800px;

/*background-repeat:no-repeat ;*/

background-repeat:repeat-y ;

}

63-background-repeat的使用

div{

width: 1200px;

height: 800px;

/*background-repeat:no-repeat ;*/

background-repeat:repeat-y ;

}

64-background-position使用

background-position是根据参数的设置的不同设置图片的区域

65-css精灵图的介绍和使用

background-position难点在于切图

可以将小图标和背景图合并到一张图片

一个网页的请求越多，那么服务器的请求压力就会越大

66-background-position方向的使用

padding: 0;

margin: 0;

}

div{

width: 1226px;

height: 900px;

border: 1px solid red;

background-repeat: no-repeat;

/*水平方向 left center right*/

/*垂直方向 top center bottom*/

background-position: center center;

}

/*!*水平居中*!*/

/*background-position: center top;*/

67-background-attach的使用

/*固定背景图片*/

background-attachment: fixed;

68-相对定位的介绍

div下css布局：

1.浮动 float

2.标签转换 display

3.定位：相对定位和绝对定位

<!DOCTYPE html>

<head>

<title>相对定位特性</title>

padding: 0;

margin: 0;

}

div{

width: 200px;

height: 200px;

}

.box1{

}

.box2{

position: relative;

top: 50px;

left: 100px;

}

.box3{

}

</style>

</head>

<body>

<!--三大特性

1.不脱标不脱离标准流

2.形影分离和盒子分不开

3.老家留坑保留当前位置

相对定位没有特别大的作用，完全会影响布局的美观-->

</body>

</html>

69-相对定位的特性、位置属性

三大特性

1.不脱标不脱离标准流

2.形影分离和盒子分不开

3.老家留坑保留当前位置

相对定位没有特别大的作用，完全会影响布局的美观

70-相对定位的用途

相对定位的用途

1.微调元素

2.做绝对定位的参照（父相子绝）

<!DOCTYPE html>

<head>

<title>相对定位的用途</title>

padding: 0;

margin: 0;

}

.user{

font-size: 30px;

}

.btn{

position: relative;

top: 0;

left: 0;

font-size: 30px;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

71-绝对定位的介绍、特性

<!DOCTYPE html>

<head>

padding: 0;

margin: 0;

}

div{

width: 200px;

height: 200px;

}

.box1{

position: absolute;

}

.box2{

}

.box3{

}

span{

width: 100px;

height: 100px;

position: absolute;

}

</style>

</head>

<body>

<!--绝对定位的盒子会脱离标准流，可以做遮盖效果，提升层级

设置绝对定位之后，不再区分行内元素和块级元素，都能设置宽高-->

</body>

</html>

72-绝对定位参考点

绝对定位参考点是以页面的左上角（和浏览器的左上角做对比）为参考点来调整位置

当使用bottom属性描述的时候，是以首屏页面的左下角为参考点

73-绝对定位以父辈元素作参考点

父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角作为参考点

父辈元素不一定是直接的父标签，只要是父标签的相对定位去找位置

74-父绝子绝、父相子绝、父固子绝

不仅仅是父相子绝，父绝子绝，父固子绝都是以父辈标签为依据

父绝子绝没有实际意义，做站的时候不能出现父绝子绝，因为绝对定位脱离标准流，影响页面布局，相反，父相子绝在页面布局中，最常用的布局方案是父相子绝，原理是子元素是基于父标签的基础上调整位置

75-绝对定位的盒子无视父辈的padding

还是以父辈的标签的总和为主，和padding无关

76-绝对定位盒子居中

设置left：50% magrin-left:宽度的一般，使得子盒子居中

设置绝对定位以后，margin：0 auto不起作用

<!DOCTYPE html>

<head>

<title>绝对定位盒子居中</title>

padding: 0;

margin: 0;

}

.box{

width: 100%;

height: 69px;

}

.box .c{

width: 960px;

height: 69px;

position: absolute;

left:50%;

margin-left: -480px;

}

</style>

</head>

<body>

</div>

</body>

</html>

77-固定定位介绍和特性

/*固定定位会在整个页面上，不会随页面滚动而滚动*/

/*特性：1.脱标 2.提升层次 3.固定不变不会随页面的滚动而滚动*/

/*参考点：设置固定定位，用top描述那么是以浏览器的左上角为参考点*/

/*如果用bottom描述，那么是以浏览器的左下角作为参考点*/

/*用途：1.返回顶部栏 2.固定导航条 3.小广告*/

78-固定定位案例_返回顶部

<!DOCTYPE html>

<head>

padding: 0;

margin: 0;

}

bottom: 20px;

right: 20px;

position: fixed;

color: white;

}

</style>

</head>

<body>

<div>

<p>

返回顶部

</p>

</div>

</body>

</html>

79-固定定位案例_固定导航栏

一定要给body设置导航栏的高度，否则导航条就会遮盖住背景图片

80-z-index的四大特性

表示一个属性，表示谁压着谁，数值大的遮盖数值小的，只有定位了的元素才有z-index

不管是相对定位还是绝对定位，都可以使用z-index，而浮动元素不能使用

z-index没有单位，就是一个正整数，默认的z-index为0

如果都没有z-index值，或者z-index一样，那么谁写在html后面，在上方的元素优先显示，定位的元素优先显示

从父现象，子标签会跟随父标签的原本设置

81-z-index的从父现象

82-z-index的用途

01-JavaScript的历史发展过程

ECMAscript（JS核心语言，只是一个标准的规范）
浏览器对象模型（bom基于浏览器对象的前端开发）
文档对象模型（dom整个标签的所有对象）

为什么学习JavaScript？

表单验证
制作页面特效
动态改变页面内容

参考知乎https://zhuanlan.zhihu.com/p/27985124

javascript是一种直译式脚本语言，是一种动态类型，弱类型，基于原型的语言，内置支持类型。

最开始他的诞生是因为需要处理服务器的一些表单验证，比如说在以前的时候注册的时候并不会像现在一样，以前不会提示你用户名已被注册。所以以前苦逼的填了满满的信息，点一个提交要等个十几分钟，最后弹出个窗口告诉你用户名被注册了，然后一刷新，你之前填的东西全没了。哇，心态真的炸的天崩地裂啊。

02-js的引入方式和输出

JS的引入方式

1.行内式

将JavaScript代码块直接镶嵌在标签内

2.内部式

3.外部式

引入外部一个JS文件

1.JS引入的时候一般是放在HTML的所有内容之后

2.外部元素内写代码块不会生效

内部式建议引入的时候要在body之后，我们要等待dom元素全部加载完成之后再去执行相应的JS操作

JS的输出方式

1.document.write('')向文档输入内容，不会覆盖文档的内容

2.console 控制台输出【开发者工具】

3.console.log()向控制台抛出一条信息

4.console.error()向控制台抛出一个异常

5.console.dir()输入一个对象的全部属性

6.console.clear()清除

每个能独立完成一个功能的代码以分号结束，这就是一个代码块

7.alert()弹出一个带有一条指定信息的消息（警告）

8.innerHTML/innerText获取或者向指定元素添加内容

9.innerHTML获取元素内所有的内容(包括元素)，还可以解析内容的样式

10innerText获取元素内的文本内容

03-命名规范和变量的声明定义

JS的变量

变量是用来存储信息的容器，由于JS是松散数据类型，所以变量中可以防止任何的数据类型

创建变量->储存值和代表值

var a 声明创建，此时，这个变量中什么都没有，如果要获取变量中的返回值，返回值为undefind

= 在JS中是赋值的意义将等号右侧的值赋值给等号左边的变量

+= 在JS中是保留原来的值上累加

一次声明多个变量，每个变量用逗号隔开，一般会相同的数据类型使用一个声明

var a = [],fn = funcation(){} , num = 5

JS的命名规则

严格区分大小写

命名时名称可以出现字母、数字、下划线、$,但是不能是数字开头，也不能是纯数字

不能包含关键字和保留字

关键字： var number

除了关键字 top name 也尽量不要使用

推荐驼峰命名法，有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母大写

匈牙利命名法：就是根据数据类型的单词的首字符作为前缀

JS保留关键字
abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

// 变量的声明

// 先声明在定义

// JS中的代码是自上往下的顺序执行

var dog;

dog = '小白';

// 也可以在声明的时候直接定义

var cat = '小黄';

alert(cat)

</script>

04-五种基本数据类型

数字 number

字符串 string

布尔 boolean

数组 [ ]

对象{}

空值 Null

空值 Undefined

-基本数据类型数字number 字符串 String 布尔 boolean null undefined

-引用数据类型包括对象数据类型和函数数据类型

-对象数据类型数组 array 对象 object 正则REGEXP

-函数数据类型 funcation

转载于:https://www.cnblogs.com/pandaboy1123/p/9495479.html

路飞学城Python-Day49相关推荐

路飞学城python全栈开发_[Python] 老男孩路飞学城Python全栈开发重点班骑士计划最新100G...
简介老男孩&路飞学城Python全栈开发重点班课程,作为Python全栈教学系列的重头戏,投入了全新的课程研发和教学精力,也是Python骑士计划的核心教学,由ALEX老师开班镇守,一线技术 ...
路飞学城—Python爬虫实战密训班第三章
路飞学城-Python爬虫实战密训班第三章一.scrapy-redis插件实现简单分布式爬虫 scrapy-redis插件用于将scrapy和redis结合实现简单分布式爬虫:- 定义调度器- 定 ...
b站路飞学城python课梨视频项目代码
@b站路飞学城python课梨视频项目代码 # -*- coding:utf-8 -*- import requests from lxml import etree import random im ...
路飞学城python开发入门学习
零基础参加了路飞学城python七天入门集训,由于无相关基础知识,所以笔记简陋,大家将就着看看,欢迎批评指正. 1.第一个程序: print('Hello,World") 2. python ...
路飞学城python电子书_路飞学城-Python开发集训-第一章
路飞学城-Python开发集训-第一章 1.本章学习心得.体会我: 间接性勤奋. 我: 学习方法论:输入--输出---纠正我: 对对对走出舒适区, 换圈子, 转思路,投资自我加筹码. 我: 圈子 ...
路飞学城python全栈开发_python 全栈开发，Day98(路飞学城背景,django ContentType组件,表结构讲解)...
昨日内容回顾 1. 为什么要做前后端分离?-前后端交给不同的人来编写,职责划分明确.-API (IOS,安卓,PC,微信小程序...)-vue.js等框架编写前端时,会比之前写jQuery更简单快捷. ...
路飞学城-python爬虫密训-第三章
(一)学习心得其实在没有正式学习python编程语言中,就知道模块是python最重要部分之一.虽然在前面HTTP协议跟IO多路复用都没有接触学的也是一知半解,scrapy模块比resquests模 ...
路飞学城-Python爬虫实战密训-第1章
正式的开始学习爬虫知识,Python是一门接触就会爱上的语言.路飞的课真的很棒,课程讲解不是告诉你结论,而是在告诉你思考的方法和过程. 第一章,学习了如何爬取汽车之家以及抽屉登录并点赞. 1 impo ...
路飞学城-Python 爬虫实战密训-第 1 章
本节学习体会: 鸡汤心得: 1.时代发展太快,要不断学习新东西,武装自己,才能跟得上时代的潮流,不然就是面临被pass的命运 2.要看清楚趋势,不要闭门造车 3.学习编程语言就跟学英语一样,方法很重要 ...
路飞学城-Python爬虫集训-第一章
自学Python的时候看了不少老男孩的视频,一直欠老男孩一个会员,现在99元爬虫集训果断参与. 非常喜欢Alex和武Sir的课,技术能力超强,当然讲着讲着就开起车来也说明他俩开车的技术也超级强! 以上 ...

路飞学城Python-Day49

路飞学城Python-Day49相关推荐

最新文章

热门文章