一、简介
前端: html5+css+javaScript(js+jq+bs)
h5 不擅长 应用程序
小程序是基于h5的封装产物
html(html有三个载体:pc端浏览器,移动端浏览器,移动端app)
*** 标签
*** 层级关系
css
*** 样式
*** 选择器 (通过css来控制html,就是用选择器来建立这个控制的桥梁)
*** 布局
二、了解h5
标签:被<>包裹,以字母开头,可以结合合法字符(-、数字),能被浏览器解析的符号,被称之为标签
指令:<!> => <!doctype>规定文档类型,<!-- 注释 -->
转义字符: 空格转义,基本不用转义字符()
数据:文本、图片、视频。。。
1 分析第一个h5页面
<!--文档类型的指令:html=》以h5语法来书写的html文件-->
<!DOCTYPE html>
<!--html:页面根标签,他只有一个head 和 一个 body-->
<!--head:头,样式、设置信息、功能(js脚本)-->
<head>
<meta charset="UTF-8">
<title>第一个页面</title>
</head>
<!--自定义创建的abc标签 被强行塞到了body里面-->
<abc>ABC</abc>
<!--body:身体,这个页面中所有要展现的内容,都要写在body里面-->
<body>
</body>
</html>
View Code
2 常用标签
### h1~h6,p、span、i、b 标签建议h1代表页面标题,在同一个页面中只出现一次
### a(herf|targer) img(src|alt|title) hr|br
### ul>li table(了解) form(表单)
常用标签
3 单双标签
有头有尾的就是双标签
img,input等都是单标签
所有的标签 都是有结束标志,
单标签,默认省略了 "/",建议省略
双标签,如果省略了结束标志的话,系统会默认按系统自行判断进行添加,开发过程中不建议省略
单标签:主功能(一般不需要内容)
双标签:主内容(要显示字标签,及内容)
单双标签
4 层级关系
<!--案例一-->
<!--div标签是最常用的标签,用于页面结构搭建-->
<!--在出现class和name 优先选择class-->
<div class="wrapper">
<!--标题与搜索-->
<div class="header"></div>
<!--导航栏-->
<div class="navigation"></div>
<!--内容-->
<div class="body">
<!--.left+center+.right-->
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<!--尾部-->
<div class="foot"></div>
<!--案例二-->
<div class="idea">
<h3></h3>
<p></p>
<p></p>
<p></p>
<p>
<b></b>
</p>
</div>
<!--案例三-->
<div class="left">
<div class="list">
<h3></h3>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="list">
<h3></h3>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="list">
<h3></h3>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
层级关系
5 css
# 选择器: html页面标签的某种名字, 用来将html与css建立起链接, 就可以通过css来控制html样式
# 作用域: {}, 写在作用域中的样式块就是控制作用域前名字(选择器)的
# 样式块: 样式语句们
css
6 css引入
# 1.行间式: 将css样式直接书写在标签style属性中
# 优点: 直观(对样式操作简单粗暴) 缺点: 可读性极差, 复用性差
# 2.内联式: 将css样式书写在style标签中
# 优点: 可读性强, 复用性强 缺点: 延展性(团队开发)
# 3.外联式: 将css样式书写在css文件中, 用html文件中link标签将两个文件建立起联系
# 优点: 适合团队开发
css引入
7 基础选择器
通配: *
标签选择器: 标签名 div
class选择器: .box
id选择器: #box
# 基础选择器优先级: !important > 行间式 > id > class > 标签 > 通配
基础选择器
8 高级选择器
# 群组选择器 ,隔开 控制多个
div, .div , #div{
}
# 后代选择器
.sup .sub{
# sup可以为.sub的父亲 也可以为父辈
}
子代
.sup > ,.sub{
#.sup 只能为.sub的父亲
}
#兄弟选择器
.div1 ~ .div2 {
# .div2 在.div1的兄弟 , .div1是修饰词, 。div1 与.div2之间可以有其他兄弟
}
.div1 + .div2 {
# .div2 在.div1的兄弟 , .div1是修饰词, 。div1 与.div2之间不可以有其他兄弟
}
#交叉选择器
h2.h{
# 是h2标签且有一个class名为h
}
.h1.h2.h3{
# 有一个标签有三个类名
}
<div class="h1 h2 h3"></div>
高级选择器
9 高级选择器优先级
1 高级选择器的优先级由个数决定
2 高级选择器的优先级与类别无关(后代、子代、兄弟、相邻等 同等对待)
3 id无限大于class,id无限大于标签
4 上方结果之后优先级还是一致,则跟顺序有关
10 伪类选择器
:nth-child()
/* 先确定位置, 再匹配类型*/
/*li:nth-child(3), 先将所有结构下的第3个标签找出来, 再匹配选择器的类型*/
/*li:nth-child(2n), 匹配偶数位的li*/
/*li:nth-child(2n - 1), 匹配奇数位的li*/
/*li:nth-child(3n), 匹配3的倍数的li*/
li:nth-child(3) {
color: orange;
}
伪类选择器
.box {
width: 200px;
height: 200px;
background-color: orange;
/*过度(实现动画): 过度时间 延迟时间(省略) 动画属性(可省略默认all) 过度曲线(可省略)*/
transition: 1s all cubic-bezier(0.38, 1.65, 0, -0.97);
}
.box:hover {
width: 400px;
height: 400px;
background-color: red;
}
鼠标悬浮伪类
11 字体操作
.box {
/* 字重 大小/行高 字族 */
font: 900 30px/200px "STSong";
/*字体水平居中方式*/
text-align: center;
/*字体颜色*/
color: red;
}
字体操作
12 背景图片操作
background-color: orange;
/*加载背景图片*/
background-image: url("img/001.png");
/*平铺: repeat | repeat-x | repeat-y | no-repeat*/
background-repeat: no-repeat;
/*背景尺寸: 会缩放背景图*/
background-size: 100px 200px;
/*背景定位: x轴左右偏移 y轴左右偏移*/
background-position: -10px 20px;
background: 颜色 url("图片地址") no-repeat 10px -20px;
精灵图在显示区域向右移动10px向上移动20px
背景图片操作
13 浮动布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
.box {
width: 200px;
height: 80px;
background-color: brown;
border: 1px solid black;
/*浮动布局*/
/*子级一但浮动,就不再撑开父级高度*/
/*浮动的元素会不完全脱离文档流*/
/*脱离文档流:高于原文档流内盒子的显示层次*/
/*不完全:浮动有一个清浮动操作,可以让子级重新撑开父级的高度*/
/*清浮动:可以让子级重新撑开父级高度*/
float: left;
}
/*子浮动,父级清浮动,父的兄弟显示区域正常*/
.sup:after{
content: '';
display: block;
clear: both;
}
.ele {
width: 200px;
height: 80px;
background-color: red;
}
/*border: 1px solid black;*/
</style>
</head>
<body>
<div class="sup">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="ele"></div>
</body>
</html>
浮动布局介绍
1 css:
2 /*reset操作:清楚系统默认样式的操作*/
3
4 body{
5 margin: 0;
6 }
7
8
9 a{
10 /*统一a标签的字体颜色*/
11 color: black;
12 /*清除下划线*/
13 text-decoration: none;
14
15 }
16
17
18
19 ul{
20 list-style: none;
21 margin: 0;
22 padding: 0;
23
24 }
25
26
27
28 #########################
29
30
31 h5:
32 <!DOCTYPE html>
33 <html lang="en">
34 <head>
35 <meta charset="UTF-8">
36 <title>浮动布局案例</title>
37
38 <link rel="stylesheet" href="./css/reset.css">
39 <style>
40 .header {
41 width: 1210px;
42 height: 100px;
43 background-color: orange;
44 /*margin-left: auto;*/
45 /*margin-right: auto;*/
46 /*上下为0 右左为auto*/
47 margin: 0 auto;
48 }
49
50 .nav {
51 /*父级的宽度决定自己一排排列的个数*/
52 width: 1210px;
53 margin: 0 auto;
54
55 }
56
57 /*父标签清浮动:高度需要子级撑开,自己可以设置高度,但不一定准确*/
58 .nav:after {
59 content: '';
60 display: block;
61 clear: both;
62 }
63
64 /*子标签浮动:同行显示*/
65 .nav li {
66 width: 200px;
67 height: 48px;
68 background-color: brown;
69 float: left;
70
71 }
72
73 .body {
74 width: 1210px;
75 margin: 0 auto;
76 background-color: cyan;
77 height: 100px;
78 }
79
80 .nav li:nth-child(1) {
81 width: 155px;
82 background: url("./img/bg.png") no-repeat;
83 }
84
85 .nav li:nth-child(2) {
86 width: 157px;
87 background: url("./img/bg.png") no-repeat -155px 0;
88
89 }
90
91 .nav li:nth-child(3) {
92 width: 167px;
93 background: url("./img/bg.png") no-repeat calc(-155px - 157px) 0;
94
95 }
96
97 .nav li:nth-child(4) {
98 width: 158px;
99 background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px) 0;
100
101 }
102
103 .nav li:nth-child(5) {
104 width: 101px;
105 background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px) 0;
106
107 }
108
109 .nav li:nth-child(6) {
110 width: 185px;
111 background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px - 101px) 0;
112
113 }
114
115 .nav li:nth-child(7) {
116 width: 177px;
117 background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px - 101px - 185px) 0;
118
119 }
120
121 .nav li:hover {
122 background-position-y: -48px;
123 }
124
125
126 </style>
127
128
129 </head>
130 <body>
131
132
133 <div class="header"></div>
134
135
136 <ul class="nav">
137 <li></li>
138 <li></li>
139 <li></li>
140 <li></li>
141 <li></li>
142 <li></li>
143 <li></li>
144 </ul>
145
146 <div class="body"></div>
147
148
149 </body>
150 </html>
浮动布局案例