前端基础—-三件套
[TOC]
一、前言
Zeal64位下载https://wwr.lanzoui.com/iQhP5urk3gb
Html5文档下载https://wwr.lanzoui.com/iqAiiurklfi
CSS3文档下载https://wwr.lanzoui.com/iA86gurklgj
文档下载完解压,将html.docset和css.docset放到Zeal-x64/docset文件夹下
启动zeal.exe程序就可以直接使用了
1、客户端
2、网页
3、历史
蒂姆·伯纳斯李爵士— 万维网的发明人
1991年8月6日,世界上第一个服务器和第一个网站在欧洲核子研究中心上线。
第一个网站:http://info.cern.ch/hypertext/WWW/TheProject.html
4、浏览器和网页
5、浏览器的问题
不同浏览器可能解析出来的页面不一样
6、W3C的建立
7、网页的结构
1、结构、表现、行为
- 结构
- HTML用于描述页面的结构
- 表现
- CSS用于控制页面中元素的样式
- 行为
- JavaScript用于响应用户操作
二、HTML
HTML:超文本标记语言
负责网页三要素之中的结构
使用标签的形式来标识网页中的不同组成部分
所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另外一个页面
纯文本只能存储数据
1、第一个网页
用记事本编写第一个网页
1 | <html> |
1、根标签<html></html>
2、头部标签<head></head>
3、title标签<title></title>
4、body标签<body></body>
2、第二个网页
用notepad++编写
1 | <html> |
3、第三个网页
1 | <html> |
4、第四个网页
1 |
|
5、第五个网页
1 | <!--文档声明,声明当前网页的版本--> |
6、文档工具
软件:zeal
7、vscode
1 |
|
8、实体
1 |
|
9、meta标签
1 |
|
10、语义化标签1.0
1 |
|
11、语义化标签2.0
1 |
|
12、语义化标签3.0
1 |
|
13、列表
1 |
|
14、超链接
1 |
|
15、相对路径
1 |
|
16、超链接2.0
1 |
|
17、图片标签
1 |
|
18、内联框架
1 |
|
19、音频视频
1 |
|
三、CSS
1、css简介
1 |
|
2、CSS语法
1 |
|
3、CSS常用选择器
1 |
|
4、复合选择器
1 |
|
5、关系选择器
1 |
|
6、属性选择器
1 |
|
7、伪类选择器
1 |
|
8、超链接的伪类
1 |
|
9、伪元素选择器
1 |
|
10、样式的继承
1 |
|
11、选择器的权重
1 |
|
12、单位
1 |
|
13、颜色
1 |
|
三、layout
1、文档流
1 |
|
2、盒模型-简介
1 |
|
3、盒子模型-边框
1 |
|
4、盒子模型-内边距
1 |
|
5、盒子模型-外边距
1 |
|
6、盒子-水平布局
1 |
|
7、盒子-垂直方向布局
1 |
|
8、外边距的折叠
1 |
|
9、行内元素的盒模型
1 |
|
10、浏览器的默认样式
1 |
|
11、盒子的尺寸
1 |
|
12、轮廓阴影和圆角
1 |
|
四、练习
1、图片列表
1 |
|
2、京东的左侧导航
1 |
|
3、网易新闻导航
1 |
|
4、w3school导航条
1 |
|
1 |
|
5、京东轮播图(仅布局)
1 |
|
6、京东顶栏导航条
1 |
|
7、背景练习1—-背景重复
1 |
|
8、按钮练习1.0
1 |
|
9、按钮练习2.0
1 |
|
10、电影卡片
1 |
|
11、米兔的动画
1 |
|
12、奔跑的少年
1 |
|
13、鸭子表
1 |
|
14、复仇者联盟
1 |
|
15、弹性的w3导航条
1 |
|
16、淘宝导航条—-弹性
1 |
|
17、移动端网页
1 |
|
less
1 | *{ |
18、美图
1 |
|
less
1 | a{ |
五、float
1、浮动的简介
1 |
|
2、浮动其他的特点
1 |
|
导航条练习
3、网页的布局
1 |
|
4、高度塌陷问题
1 |
|
5、BFC
1 |
|
6、clear
1 |
|
7、高度塌陷-最终解决方案
1 |
|
8、clearfix
1 |
|
六、position
1、定位的简介-相对定位
1 |
|
2、绝对定位
1 |
|
3、固定定位
1 |
|
4、粘滞定位
1 |
|
5、绝对定位元素的布局
1 |
|
6、元素的层级
1 |
|
七、font&background
1、字体->font-family
1 |
|
2、图标字体1.0
1 |
|
3、图标字体2.0
1 |
|
4、阿里的图标字体库.html
1 |
|
5、行高
1 |
|
6、字体的简写属性
1 |
|
7、文本的样式1.0
1 |
|
8、文本的样式2.0
1 |
|
9、背景1.0
1 |
|
10、背景2.0
1 |
|
11、渐变-线性
1 |
|
12、径向渐变
1 |
|
八、HTML—>补充
1、表格–>简介
1 |
|
2、长表格
1 |
|
3、表格的样式
1 |
|
4、表单
1 |
|
5、表单2.0
1 |
|
九、小米官网项目
1、html
1 |
|
2、base.css
1 | /* 公共样式 */ |
3、index.css
1 | /* 主页index.html的样式表 */ |
4、reset.css
1 | /* v2.0 | 20110126 |
十、animation(动画)
1、过渡
1 |
|
练习
2、动画
1 |
|
3、动画
1 |
|
4、变形—-X、Y轴
1 |
|
5、Z轴平移
1 |
|
6、旋转
1 |
|
7、缩放
1 |
|
十一、less
1、less的简介
1 |
|
2、less的语法
1 | //less中的单行注释,注释内容不会被解析到css中 |
1 | .box1{ |
3、less的补充
1 |
|
在设置的扩展中,修改json文件,添加从插件处复制的一段代码,全部设置为true
方便浏览器查找样式位置
十二、flex
1、弹性盒
1 |
|
2、弹性容器的样式
1 |
|
3、弹性容器的样式
1 |
|
4、弹性元素的样式
1 |
|
5、像素
1 |
|
6、移动端
1 |
|
7、移动端的页面.html
1 |
|
8、视口
1 |
|
9、vw的适配方案
1 |
|
10、响应式布局
1 |
|
11、媒体查询
1 |
|