内容回顾:
一.HTML
语义化标签
目的:
1.认识这些标签含义
2.根据需求来搭建网页的结构
img src
<p>alex</p>
缺点:太丑
二.CSS
作用: 网页的样式,美化页面.
目的: 用户体验
- css的引入方式
1.行内样式
优先级最高
2.内嵌样式
style标签
3.外接样式
link
href属性连接css文件
开发实战项目应用最多
- 选择器
1.基本选择器
标签选择器
div{}
id选择器
#box{}
class选择器
.box{}
2.高级选择器
后代选择器
选中的是儿子,孙子....
div p{}
子代选择器
只选中儿子-
div>p
组合选择器
html,body,p,ul,ol,dl{
padding: 0;
margin: 0;
}
reset.css
交集选择器
div.active{
}
属性选择器
input[type=text]{
}
伪类选择器
a:hover{}
3.继承性和特殊性
继承:
个别的属性: color,line-height,text-xxx,font-xxx
特殊性:
权重
行内样式 > id > class > 标签
1000 100 10 1
数当前选择器的个数: id class 标签
谁的数值大,权重就高,优先级就高
继承来的属性优先级接近0
4.网页常用排版样式
字体的设置
字体颜色:color:单词|rgb(0~255,0~255,0~255)| 十六进制表示法 #ff6700
字体大小: font-size: px(像素:绝对单位),rem,em(相对单位:相对于当前盒子的字体大小),vh,vw
字体粗细:font-weight: normal | bold | 100~900
字体样式: font-style:none | italic
文本的设置
文本修饰:text-decoration:none | underline
文本对齐方式:text-align:left | center | right
文本的行高:line-height
如何让一个盒子中的文本水平垂直居中
text-align:center;
line-height: 盒子模型的内容的高度
5.盒子模型
标准文档流:
一个网页在不受任何布局的影响下,它内部HTML标签的默认排版样式
从左往右,从上往下,这种布局叫流式布局
内容的宽度
height: 内容的高度
padding: 内边距
margin: 外边距
border: 边框
1px solid red;
根据方向划分
border-top: 1px solid red;
border-color: red green blue yellow;
border- 2px;
border-style: solid;
标准文档流下margin垂直方向会出现塌陷问题
浮动的盒子,margin不会出现任何问题
6.浮动
float:left|right
浮动的盒子:
1.脱离标准文档流(脱标)
2.贴边现象
今日内容:
一. 标签分类
默认是在标准文档流
display:inline|block|inline-block|none;
- 标签分类
行内标签
span,a,em,i,strong,b
特点:
1.在一行内显示
2.不能设置宽高,如果不设置宽 默认是字体的大小
一个块级元素转行内 很少使用
行内块标签: display:inline-block;
input,img
块级标签
div p ul ol li dl dt form table h1~h6
特点:
1.独占一行
2.可以设置宽高,如果不设置宽,默认是父元素100%的宽度
********一个行内转行内块和块应用最多********
二. 浮动布局
设计浮动布局的初衷: 文字环绕
float:left|right
浮动的盒子:
现象:
1.脱离标准文档流(脱标)
2.贴边现象
3.文字环绕
4.收缩现象(一旦给元素设置浮动,可以任意设置宽高)
好处:
排版: 在一行上并排显示
问题:
一旦给子元素设置浮动,父元素不设置高度,因为浮动元素脱标了,不在页面上占位置,撑不起父元素的高度
清除浮动的方式:
1.给父盒子设置固定高度
缺点:后期不易维护
2.内墙法(理解)
clear:both; 清除左右两边浮动带来的影响
在最后一个浮动元素的后面加一个空的块级元素(标准文档流),并且设置该元素为
缺点: 代码冗余
3.伪元素清除法
.clearfix::after{
content:'';
display: block;
clear: both;
/*display: none;*/
/*visibility: hidden;*/
/*height: 0;*/
}
3.overflow:hidden;
三. 定位布局
position:static;静态 默认的
position: relative;相对定位
参考点:以原来的位置为参考点
现象:
1.压盖现象(一般不用)
2.微调元素
布局方案:
子绝父相
position: absolute; 绝对定位
参考点:
单独设置绝对定位,以页面左上角为参考点
有子绝父相,以最近的父辈元素的左上角为参考点
现象:
1.脱标
2.压盖现象(常用)
position: fixed; 固定定位
参考点:浏览器的左上角
现象:
0.固定在网页上不变
1.脱标
2.压盖(一般不用)
作用:
固定导航栏,小广告,回到顶部
四.z-index
z-index只应用在定位的元素，默认z-index:auto;
z-index取值为整数，数值越大，它的层级越高
如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。
从父现象。通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。
五. 背景图
background-color:red;
background-image:url(地址)
HTML4.01 css2.1
HTML5 CSS3(了解)
练习:
moment.js
jquery.js
下午: JS
JS基础语法
基本数据类型
number string boolean null undefined
引用数据类型
******流程控制****
if
switch
while
for
常用对象:
********* 函数 *******
******* string *******
******* Array ********
****** Object *******
字符串转数值?
parseInt()
parseFloat()
数值转字符串
小技巧: 一个数字+ ""
toString();