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-image: url("mind3.png");
/*background-repeat:no-repeat ;*/
background-repeat:repeat-y ;
}
63-background-repeat的使用
div{
width: 1200px;
height: 800px;
background-image: url("mind3.png");
/*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-image: url("timg.jpg");
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位特性</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
}
.box2{
position: relative;
top: 50px;
left: 100px;
}
.box3{
}
</style>
</head>
<body>
<!--三大特性
1.不脱标 不脱离标准流
2.形影分离 和盒子分不开
3.老家留坑 保留当前位置
相对定位没有特别大的作用，完全会影响布局的美观-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
69-相对定位的特性、位置属性
三大特性
1.不脱标 不脱离标准流
2.形影分离 和盒子分不开
3.老家留坑 保留当前位置
相对定位没有特别大的作用，完全会影响布局的美观
70-相对定位的用途
相对定位的用途
1.微调元素
2.做绝对定位的参照（父相子绝）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位的用途</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.user{
font-size: 30px;
}
.btn{
position: relative;
top: 0;
left: 0;
font-size: 30px;
}
</style>
</head>
<body>
<!--相对定位的用途-->
<!--1.微调元素-->
<!--2.做绝对定位的参照（父相子绝）-->
<div>
<input type="text" name="username" value="输入" class="user"/>
<input type="button" name="" value="please hold on" class="btn"/>
</div>
</body>
</html>
71-绝对定位的介绍、特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
position: absolute;
}
.box2{
}
.box3{
}
span{
width: 100px;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<!--绝对定位的盒子会脱离标准流，可以做遮盖效果，提升层级
设置绝对定位之后，不再区分行内元素和块级元素，都能设置宽高-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>文字</span>
</body>
</html>
72-绝对定位参考点
绝对定位参考点是以页面的左上角（和浏览器的左上角做对比）为参考点来调整位置
当使用bottom属性描述的时候，是以首屏页面的左下角为参考点
73-绝对定位以父辈元素作参考点
父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角作为参考点
父辈元素不一定是直接的父标签，只要是父标签的相对定位去找位置
74-父绝子绝、父相子绝、父固子绝
不仅仅是父相子绝，父绝子绝，父固子绝都是以父辈标签为依据
父绝子绝没有实际意义，做站的时候不能出现父绝子绝，因为绝对定位脱离标准流，影响页面布局，相反，父相子绝在页面布局中，最常用的布局方案是父相子绝，原理是子元素是基于父标签的基础上调整位置
75-绝对定位的盒子无视父辈的padding
还是以父辈的标签的总和为主，和padding无关
76-绝对定位盒子居中
设置left：50% magrin-left:宽度的一般，使得子盒子居中
设置绝对定位以后，margin：0 auto不起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位盒子居中</title>
<style type="text/css">
*{
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 class="box">
<div class="c"></div>
</div>
</body>
</html>
77-固定定位介绍和特性
/*固定定位会在整个页面上，不会随页面滚动而滚动*/
/*特性：1.脱标 2.提升层次 3.固定不变 不会随页面的滚动而滚动*/
/*参考点：设置固定定位，用top描述 那么是以浏览器的左上角为参考点*/
/*如果用bottom描述，那么是以浏览器的左下角作为参考点*/
/*用途：1.返回顶部栏 2.固定导航条 3.小广告*/
78-固定定位案例_返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
p{
bottom: 20px;
right: 20px;
position: fixed;
color: white;
}
</style>
</head>
<body>
<div>
<p>
返回顶部
</p>
<img src="timg.jpg">
<img src="timg.jpg">
<img src="timg.jpg">
<img src="timg.jpg">
<img src="timg.jpg">
</div>
<!--要用jQuery不会，可以尝试用a标签-->
</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？
javascript是一种直译式脚本语言，是一种动态类型，弱类型，基于原型的语言，内置支持类型。
最开始他的诞生是因为需要处理服务器的一些表单验证，比如说在以前的时候注册的时候并不会像现在一样，以前不会提示你用户名已被注册。所以以前苦逼的填了满满的信息，点一个提交要等个十几分钟，最后弹出个窗口告诉你用户名被注册了，然后一刷新，你之前填的东西全没了。哇，心态真的炸的天崩地裂啊。
02-js的引入方式和输出
JS的引入方式
1.行内式
将JavaScript代码块直接镶嵌在标签内
2.内部式
3.外部式
引入外部一个JS文件
1.JS引入的时候一般是放在HTML的所有内容之后
2.外部元素内写代码块不会生效
内部式建议引入的时候要在body之后，我们要等待dom元素全部加载完成之后再去执行相应的JS操作
.png)
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 |
|
|
<script type="text/javascript">
// 变量的声明
// 先声明在定义
// JS中的代码是自上往下的顺序执行
var dog;
dog = '小白';
// 也可以在声明的时候直接定义
var cat = '小黄';
alert(cat)
</script>
04-五种基本数据类型
数字 number
字符串 string
布尔 boolean
数组 [ ]
对象{}
空值 Null
空值 Undefined
-基本数据类型 数字number 字符串 String 布尔 boolean null undefined
-引用数据类型 包括对象数据类型和函数数据类型
-对象数据类型 数组 array 对象 object 正则REGEXP
-函数数据类型 funcation
- 路飞学城—Python爬虫实战密训班 第三章
路飞学城—Python爬虫实战密训班 第三章 一.scrapy-redis插件实现简单分布式爬虫 scrapy-redis插件用于将scrapy和redis结合实现简单分布式爬虫: - 定义调度器 - ...
- 路飞学城—Python爬虫实战密训班 第二章
路飞学城—Python爬虫实战密训班 第二章 一.Selenium基础 Selenium是一个第三方模块,可以完全模拟用户在浏览器上操作(相当于在浏览器上点点点). 1.安装 - pip instal ...
- 路飞学城Python爬虫课第一章笔记
前言 原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 之前看阮一峰的博客文章,介绍到路飞学城爬虫课程限免,看了眼内容还不错,就兴冲冲报了名,99块钱满足以下条件会返还并送书送视频. 缴 ...
- 路飞学城-Python开发集训-第3章
学习心得: 通过这一章的作业,使我对正则表达式的使用直接提升了一个level,虽然作业完成的不怎么样,重复代码有点多,但是收获还是非常大的,有点找到写代码的感觉了,遗憾的是,这次作业交过,这次集训就结 ...
- 路飞学城-Python开发集训-第1章
学习体会: 在参加这次集训之前我自己学过一段时间的Python,看过老男孩的免费视频,自我感觉还行,老师写的代码基本上都能看懂,但是实际呢?....今天是集训第一次交作业的时间,突然发现看似简单升级需 ...
- 路飞学城-Python开发集训-第4章
学习心得: 学习笔记: 在python中一个py文件就是一个模块 模块好处: 1.提高可维护性 2.可重用 3.避免函数名和变量名冲突 模块分为三种: 1.内置标准模块(标准库),查看所有自带和第三方 ...
- 路飞学城-Python开发集训-第2章
学习心得: 这章对编码的讲解超级赞,现在对于编码终于有一点认知了,但还没有大彻大悟,还需要更加细心的琢磨一下Alex博客和视频,以前真的是被编码折磨死了,因为编码的问题而浪费的时间很多很多,现在终于感 ...
- 路飞学城-Python开发-第二章
''' 数据结构: menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'google':{} }, '中关村':{ '爱奇艺':{}, '汽车之家' ...
- 路飞学城-Python开发-第三章
# 数据结构: # goods = [ # {"name": "电脑", "price": 1999}, # {"name&quo ...
- 路飞学城-Python开发-第一章
# 基础需求: # 让用户输入用户名密码 # 认证成功后显示欢迎信息 # 输错三次后退出程序 username = 'pandaboy' password = ' def Login(username ...
随机推荐
- 【转】DBSCAN密度聚类算法
DBSCAN(Density-Based Spatial Clustering of Applications with Noise,具有噪声的基于密度的聚类方法)是一种很典型的密度聚类算法,和K-M ...
- 【转】VGG网络结构及参数
VGG网络 VGG16输入224*224*3的图片,经过的卷积核大小为3x3x3,stride=1,padding=1,pooling为采用2x2的max pooling方式: 1.输入224x2 ...
- windows mongodb启动
D:\MongoDB\bin\mongod.exe --service --dbpath D:\MongoDB\data --logpath=D:\MongoDB\logs\mongodb.log - ...
- Shader渲染动画
一.概述 先看一下Shader类的介绍: /** * Shader is the based class for objects that return horizontal spans of col ...
- 两个sed小技巧:sed "/变量/变量/"
两个sed小技巧 在写shell时使用sed处理一些输出,遇到两个问题,在网上找到了相应的解决办法,在此处备份一下. [ sed处理空字符 ] 空字符,它的ASCII码值为0.在sed中如何标识空字符 ...
- 【BZOJ3600】没有人的算术 - 替罪羊树+线段树
题意: 题解: Orz vfleaking……真·神题 做法大概是先把题意中定义的“数”都赋一个实数权值,用平衡树来维护整个从大到小排序过的序列,再用线段树查询最值: 这样做为什么是对的?考虑插入一个 ...
- IOS让自定义类是用下标
在ios中,有个非常有用的特性,就是可以为自己写的类增加下标访问功能. 如果我们自己的类中有个数组items,我们想直接给类加下标的方式来访问这个数组的元素,就像访问系统的数组一样,其实只要增加一个方 ...
- 在小程序中实现全局混入，以混入的形式扩展小程序的api
GitHub: https://github.com/WozHuang/mp-extend 相关文章: 小程序全局状态管理,在页面中获取globalData和使用globalSetData 通过页面预 ...
- apache https部署
1.生成证书,直接在阿里云或腾讯云中生成此处不再介绍 2.在httpd.conf中取消#LoadModule ssl_module modules/mod_ssl.so的注释 3.开启httpd-ss ...
- python 多线程处理框架
多线程处理框架 python2.7 python3.5 多线程通用任务处理型驱动框架 probe_type 探测类型rtsp或者http task_queue 任务队列 task_handler 任务 ...
