【两栏布局】

如最常见的后台界面,左边侧面菜单导航,右边是自适应宽度的主界面。

方法1

1
2
<div class="box1"></div>
<div class="box2"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.box1 {
width: 200px;
height: 100%;
background: blue;
floot: left;
}
.box2 {
/*不要设置宽度*/
height: 100%;
background: yellow;
margin-left: 200px;
}

方法2

1
2
<div class="box1"></div>
<div class="box2"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.box1 {
width: 200px;
height: 100%;
background: blue;
floot: left;
}
.box2 {
/* width: 100%-200px; 这种方法无效 */
width: calc(100% - 200px); /* calc()函数 */
height: 100%;
background: yellow;
margin-left: 200px;
floot: left;
}

calc()函数的使用
运用calc()函数,用于动态计算长度值
注意!运算符前后都要保留一个空格,如width: calc(100% - 200px);
任何长度值都可以使用calc()函数进行计算
calc()函数支持“加减乘除”(+ - * /)运算
calc()函数使用标准的数学运算优先级规则


【三栏布局】

方法1

1
2
3
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.left,.right {
width: 200px;
height: 100%;
}
.left {
background: yellow;
floot: left;
}
.right {
background: red;
floot: right;
}
.center {
/*不写宽度,自适应*/
height: 100%;
background: blue;
margin-left: 200px;
margin-right:200px;
}

方法2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.left,.right {
width: 200px;
height: 100%;
}
.left {
background: yellow;
floot: left;
}
.right {
background: red;
floot: right;
}
.center {
width:calc(100% - 400px); /*宽度*/
height: 100%;
background: blue;
/* margin-left: 200px; */
/* margin-right:200px; */
}

【上中下布局】

页首页尾高度固定,中间部分高度自适应。此外中间部分又是左中右三栏布局。

1
2
3
4
5
6
7
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.top,.bottom {
width: 100%;
height: 50px;
}
.middle {
height: calc(100% - 100px);
background: yellow;
}

.left,.right {
width: 100px;
height: 100px;
background: red;
floot: left;
}
.center {
width: calc(100% - 200px);
height: 100%;
background: blue;
floot: left;
}

【表单标签-进阶】

1. 单选框(radio)

相同 name 值的众多单选框中只能选中一个。

  • 你的性别是?
    我是猛男
    我是仙女
  • 你喜欢什么水果?
    当然是苹果
    我选择香蕉
    葡萄也不错
1
2
<input type="radio" name="sex"> 我是猛男
<input type="radio" name="sex"> 我是仙女

但是,上方单选框只有前面的圆圈管用,点文字是无效的,解决办法如下:

1
2
3
4
5
<input type="radio" name="sex" id="man">
<label for="man">我是猛男</label>
<br>
<input type="radio" name="sex" id="woman">
<label for="woman">我是仙女</label>
  • 你的性别是?

加上id<label for="">标签,此时点击文字也可以进行选择

如果设置一个默认选好的选项,可以挑一个input标签,加上checked="checked"属性:

其中可以不写等号和后面的值,直接简写为checked

1
2
<input type="radio" name="sex" checked="checked">我是猛男
<input type="radio" name="sex">我是仙女

2. 复选框(checkbox)

  • 你的爱好有什么?
    抽烟
    喝酒
    烫头
1
<input type="checkbox" name="like">
  • 当然,想让文字点击有效,或设置默认选中值,也可以:


1
2
3
4
5
6
7
8
<input type="checkbox" name="like" id="aaa">
<label for="aaa">吃饭</label>
<br>
<input type="checkbox" name="like" id="bbb" checked="checked">
<label for="bbb">睡觉</label>
<br>
<input type="checkbox" name="like" id="ccc" checked>
<label for="ccc">打豆豆</label>

这里能看出来checked="checked"checked都是一样的

3. 上传文件和隐藏字段(file)



1
<input type="file" name="" id="">

注意<input type="image" src="">是图片代替提交按钮,不是指上传图片

此外页面中还经常会有用户看不到的信息藏在如下标签里:

1
2
<!-- 隐藏按钮 -->
<input type="hidden" name="" id="" value="带给后端的个人信息">

网页中还会经常有一些禁用的按钮样式:


不满意

1
2
3
4
<!-- 禁用,只读 -->
<button disabled="disabled">注册</button>
<br>
<input type="radio" disabled>不满意

他们都是给标签增加了 disabled="disabled"属性(或简写为 disabled)。

除了disabled,只读也可用readonly属性:

disabled
readonly

1
2
<input type="text" disabled value="666666">
<input type="text" readonly value="888888">

4. 下拉菜单(select)

1
2
3
4
5
6
7
<select>
<option>河南</option>
<option>上海</option>
<option>北京</option>
<option>成都</option>
<option>重庆</option>
</select>

size控制显示行数:

1
2
3
4
5
6
7
<select size="3">
<option>河南</option>
<option>上海</option>
<option>北京</option>
<option>成都</option>
<option>重庆</option>
</select>

multiple控制选择个数(按住Ctrl或Shift):

1
2
3
4
5
6
7
<select size="3" multiple>
<option>河南</option>
<option>上海</option>
<option>北京</option>
<option>成都</option>
<option>重庆</option>
</select>

每一个<option></option>选项都需要加value值,提供给后端。

若给某一个加上selected属性,指默认选中的选项。

5. 文本域(textarea)

1
<textarea></textarea>

常用属性/样式:

  1. cols="10"显示列数(不常用,一般用CSS)
  2. rows="20"显示行数(不常用,一般用CSS)
  3. placeholder="预置提示文字"
  4. value="提前已输入的文字"
  5. CSS样式:resize: ;重新设置大小。vertical(竖直可调节)、horizontal(水平可调节),both(默认),none(常用)

6. 字段集(fieldset)

性别 我是猛男
我是仙女

1
2
3
4
5
6
<fieldset>
<legend>性别</legend>
<input type="radio" name="sex" checked="checked"> 我是猛男
<br />
<input type="radio" name="sex"> 我是仙女
</fieldset>

其中<legend>性别</legend>标题可以通过CSS的text-align:left/center/right;属性改变位置。

其他标签<fieldset><legend><input>的样式也能通过CSS改变。


【HTML5】

1. 基础和语法

简述:

  1. 一些标签不用写结束标记(br,hr,img,link,meta
  2. 一些标签可省略结束标记(li,dt,dd,p,option
  3. 一些标签可省略全部标记(html,head,body,colgroup,tbody
  4. 属性值可使用双引号,也能使用单引号。

2. 新增语义化标签

section元素,表示页面中的一个内容区块
article元素,表示一块与上下文无关的独立的内容
aside元素,在article之外的,与article内容相关的辅助信息
header元素,表示页面中一个内容区块或整个页面的标题
footer元素,表示页面中一个内容区块或整个页面的脚注
nav元素,表示页面中导航链接部分
figure元素,表示一段独立的流内容,使用figcation元素为其添加标题(第一个或最后一个子元素的位置)
main元素,表示页面的主要内容(IE不兼容)
hgroup标题的一个分组

H06WHP.png
H0ckHx.gif

3. 新增音频标签

1
<audio src="" controls></audio>
  1. 控制栏:controlscontrols="controls"
  2. 循环:loop
  3. 自动播放:autoplay
  4. 静音播放:muted

4. 新增视频标签

1
<video src="" controls></video>
  1. 控制栏:controlscontrols="controls"
  2. 循环:loop
  3. 自动播放:autoplay
  4. 静音播放:muted
  5. 海报(视频封面):poster=""
  6. CSS样式:宽和高

5. 增强表单

(1)input新增type属性

颜色选择

唤起拨号盘

滑动条

数值

URL类型

日期

月份类型

周类型

时间类型

选取时间

type="color" 生成一个颜色选择的表单
type="tel" 唤起拨号盘表单
type="search" 产生一个搜索意义的表单
type="range" 产生一个滑动条表单(min=”100” max=”200” value=”100” step=”10”)
type="number" 产生一个数值表单(min=”0” max=”10” value=”5” step=”2”)
type="email" 限制用户必须输入Email类型
type="url" 限制用户必须输入URL类型
type="date" 限制用户必须输入日期
type="month" 限制用户必须输入月份类型
type="week" 限制用户必须输入周类型
type="time" 限制用户必须输入时间类型
type="datetime-local" 选取本地时间

在页面中要放在form表单中,并且每个input标签都要有name值

1
2
3
><form action="">
<input type="" name="">
></form>

(2)datalist选项列表

也叫数据列表,类似于下拉列表:



其实输入“帅”的话会筛选出“帅爸比”和“小帅哥”这两个选项,类似于“模糊搜索”的查询功能,可以配合后端使用。

1
2
3
4
5
6
7
8
<input id="myName" list="names" placeholder="大家经常叫我啥名?" />
<datalist id="names">
<option value="百里飞洋">
<option value="帅爸比">
<option value="靓仔">
<option value="小帅哥">
<option value="小张">
</datalist>

提示:option元素永远都要设置value属性

(3)新增属性

  • autofocus属性:
    给文本框、选择框、或者按钮控件加上该属性,当页面打开时,该控件自动获得国标焦点,一个页面只能有一个。

  • required属性:
    验证输入不能为空,必填项,否则会阻断提交。

  • multiple属性:
    可以输入一个或多个值,每个值之间用逗号分开。
    例如:<input type="email" multiple>,还可以用于file(多文件上传)。

  • pattern属性:
    将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。
    例如:<input pattern="[0-9][A-Z]{3}" title="输入内容" placehoder="输入一个数和三个大写字母">

更多新增属性请查看相应教学网站。


【CSS3】

  • 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能。然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

  • 优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

【区别】:
1. “优雅降级”从复杂的现状开始,并试图减少用户体验的供给。
2. “渐进增强”是从一个非常基础的、能够起作用的版本开始。并不断扩充,以适应未来环境的需求。

1. 选择器

本文未完成,剩余视频课程请见:
https://www.bilibili.com/video/BV17z4y1D7Yj?p=109

2. 文本/盒子阴影

3. 边框样式

4. 字体引入

5. 怪异盒

6. 弹性盒

7. 折行与行间距


【弹性盒布局】

【移动端布局】

【多列布局】

【响应式布局】

【单位转换】

em 和 rem

vw 和 vh

【渐变】

【动画过渡】

【平移/缩放/旋转/倾斜】

【关键帧动画】

【3D平移/旋转/缩放】

【网格布局】


特别感谢: