一、简介
前端： html5+css+javaScript(js+jq+bs)
h5 不擅长 应用程序
小程序是基于h5的封装产物
html(html有三个载体：pc端浏览器，移动端浏览器，移动端app)
*** 标签
*** 层级关系
css
*** 样式
*** 选择器 (通过css来控制html，就是用选择器来建立这个控制的桥梁)
*** 布局
二、了解h5
标签：被<>包裹，以字母开头，可以结合合法字符(-、数字)，能被浏览器解析的符号，被称之为标签 指令：<!> => <!doctype>规定文档类型，<!-- 注释 --> 转义字符： 空格转义,基本不用转义字符(http://tool.oschina.net/commons?type=2) 数据：文本、图片、视频。。。
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>
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样式
# 作用域: {}, 写在作用域中的样式块就是控制作用域前名字(选择器)的
# 样式块: 样式语句们
6 css引入
# 1.行间式: 将css样式直接书写在标签style属性中
# 优点: 直观(对样式操作简单粗暴) 缺点: 可读性极差, 复用性差
# 2.内联式: 将css样式书写在style标签中
# 优点: 可读性强, 复用性强 缺点: 延展性(团队开发)
# 3.外联式: 将css样式书写在css文件中, 用html文件中link标签将两个文件建立起联系
# 优点: 适合团队开发
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 {
200px;
height: 200px;
background-color: orange;
/*过度(实现动画): 过度时间 延迟时间(省略) 动画属性(可省略默认all) 过度曲线(可省略)*/
transition: 1s all cubic-bezier(0.38, 1.65, 0, -0.97);
}
.box:hover {
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>
14 盒模型
margin: 外边距,控制居上 margin-top 居左 margin-left 的距离 border: 边框 1px solid black padding: 内边距, 将内容"内挤", 本质在content与border区域之间添加了留白区域 content: width * height
15 浮动
''' <ul> <li></li> <li></li> <li></li> </ul> # 浮动: 让原来一行一行排列显示的标签 同行显示 li { float: left|right; } # 清浮动: 让父级适应子级所需的高度 ul:after { content: ""; display: block; clear: both; } <a></a> # a默认为inline,inline不支持宽高,要设置a的宽高,必须改变a的显示方式为block a { display: block; } '''
16 reset重置css系统默认样式
body, h1, h2, h3, ul {
margin: 0;
padding: 0;
}
ul {
/*列表样式*/
list-style: none;
}
a {
color: black;
/*字体划线*/
text-decoration: none;
}
17 定位布局
'''
# 参照父级定位: 父相子绝
# 注意: 父子都必须设置自身宽高
.sup {
position: relative;
}
.sub {
position: absolute;
/*通过 top|left|right|bottom 四个方位参照父级的四边进行位置调整*/
/*上下取上 左右取左*/
/*通过z-index修改显示层级(图层发生重叠了)*/
}
# 参照窗口定位: 固定定位
.dc {
position: fixed;
/*通过 top|left|right|bottom 四个方位参照父级的窗口进行位置调整*/
/*上下取上 左右取左*/
/*通过z-index修改显示层级(图层发生重叠了)*/
}
'''