HTMl和CSS
1、表格:
<!-- 表格 -->
<!-- -->
<table border="1">
<!-- 表头 -->
<!-- td是单元格,tr是行 -->
<thead>
<td>姓名</td>
<td>id</td>
<td>年龄</td>
</thead>
<!-- 表格主体 -->
<tbody>
<!-- colspan="4"代表左右合并四个单元格 -->
<td colspan="4">表格</td>
<tr>
<!-- rowspan代表上下合并多少行 -->
<td rowspan="3">内容</td>
<td>小明</td>
<td>001</td>
<td>12</td>
</tr>
<tr>
<td>小红</td>
<td>002</td>
<td>15</td>
</tr>
<tr>
<td>小话</td>
<td>003</td>
<td>10</td>
</tr>
</tbody>
</table>
2、表单
**input中的type属性**
- text 内容
- password 密码
- radio 同一name下的radio是单选框
<label for="">男</label>
<input name="sex" type="radio"/>
<label for="">女</label>
<input name="sex" type="radio"/>
- checkout 多选框
- submit 提交按钮
- button 普通按钮,没有任何功能
- select 下拉菜单
3、HTML元素的分类
-
块元素: 可以设置宽度和高度,独立成行。 h1-h6、p、div、ul、li
-
**块内元素(内联元素、行级元素):**不可以设置高度和宽度,不独立成行。a、span
-
**行内块元素:**可以设置宽度和告诉,不独立成行。 img、input、button
display属性:
- :转换为块元素
- inline:转换为行内元素
- inline-block:转换为行内元素
- none:隐藏元素
4、浮动布局
浮动
float:left;
清除浮动
.clear::before,clear::after{
/*前后添加一个空字符*/
content:"";
/*转换成两个div*/
display:block;
/*清除浮动*/
clear:both;
}
在CSS代码中加入这段代码,遇到想要清除浮动元素的时候,后面加入clear就可以了
5、CSS定位(position)
- **绝对定位:**absolute
- **相对定位:**relative
- **固定定位:**fixed
坐标属性(非定位元素不起作用)
- top
- left
- right
- bottom
- z-index
6、HTML5新特性
一、布局元素
布局元素相当于一个有语义的div
- header:网页头部
- nav:导航栏
- aside:侧标栏
- article:显示文章
- section:布局的一部分
- footer:网页页脚
二、媒体元素
1.音频—audio
controls : 控制面板
autoplay :自动播放
muted :静音 //高版本浏览器中必须静音才能自动播放,多数用在视频中
2、视频——video
controls : 控制面板
autoplay :自动播放
muted :静音 //高版本浏览器中必须静音才能自动播放,多数用在视频中
三、画布
四、SVG
五、表单新特性
7、CSS3
CSS3在CSS2版本的基础上,新增了很多特性,例如边框圆角、动画效果等等
overflow属性
- overflow:hidden; //超出部分隐藏
- overflow:auto; //上下标尺,可以滑动显示
一、边框圆角(border-radius)
border-radius: 左上 右上 右下 左下;
例子:
.box{
border-radius:20px;/*幅度为20px*/
border-radius:50%;/*为正圆*/
}
二、阴影(box-shadow)
box-shadow: 10px 20px 30px blue ;
参数分别代表:x轴偏移量,y轴偏移量,模糊半径,阴影颜色(不设置颜色为黑色)
三、形变:旋转、缩放、位移(teansform)
teansform:
- rotate(); //旋转 deg单位表示角度
- origin: //设置旋转原点
- 例子:teansform-origin:0 0; // 左上角为转正中心点
- scale(); //缩放
- translate(); //位移
例子:
teansform:rotate(45deg) ; //旋转45度
teansform:scale(0.5); //**缩小0.5倍
teansform:translate(50px,100px) //向右偏移50px,向下偏移100px
利用定位和位移给div垂直居中
.box{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
四、过渡效果(transition)
transition:
- transition-property //过渡属性(例如transform)
- transition-duration //过渡持续时间(例如1s)
- transition-timing-function //过渡函数
- ease:开始和结束慢,中间块。默认值
- linear:匀速
- ease-in:开始慢
- ease-out:结束慢
- ease-in-out:和ease类似,但比ease幅度大。
- transition-delay //过渡延迟时间
简写:transition:属性 秒数 函数 延迟;
五、动画效果(animation)
1、用keyframs按照百分比指定动画
animation:anim 2s ease 1s infinite;
:动画的名字,几秒执行完,什么方式执行,延迟几秒,执行几次!
**infinite:**代表一直执行
/*定义一个动画*/
@keyframes 动画名字{
在开始的时候{
}
在结束的时候{
}
}
/*例子*/
/*为了让动画看起来平滑,最好百分之0和百分之100的状态一样*/
@keyframes anim{
0%{
transform: rotate(0deg);
}
10%{
}
50%{
}
80%{
}
100%{
transform: rotate(360deg);
}
}
2、用from…to…指定动画0%
/*例子*/
/*当只有0%到100的时候可以用fram...to...*/
@keyframes anim{
fram{
transform: rotate(0deg);
to{
transform: rotate(360deg);
}
}
3、停止动画效果
animation-play-state:paused;
六、媒体查询
七、flex布局
此前我们制作的所有网页都是基于盒子模型和浮动布局完成的,flex布局又叫弹性布局(或者叫弹性盒子布局),这是一种更先进的布局方式,可以 让网页布局更简洁,更易于维护。
1、基本概念
- main axis:主轴
- cross axis:交叉轴
2、flex容器中的默认效果
- flex项目在flex容器中延主轴排列
- flex项目高度适应flex容器高度(同行内元素)
3、设置flex容器
- flex-direction:设置flex项目排列方向
- row(默认值):主轴为水平方向,起点在左端
- row-reverse:主轴为水平方向,起点在右端
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
- justify-content:flex项目主轴排列方式 //水平方向排列方式
- flex-start(默认值):左对齐
- flex-end:右对齐
- center:居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
- align-items:flex项目在交叉轴的排列方式 //垂直方向排列方式
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的重点对齐
- center:交叉轴的重点对齐。
- stretch(延伸)(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
4、flex项目
- flex-grow:属性定义项目的放大比例,默认为0,空间充足,等比例补全。
- flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不租,该项目将缩小
- flex-basis:主轴排列为宽度,交叉轴排列为高度,设置px,默认值是auto。
- flex:综合上面三个样式。
- align-self:flex项目的对齐方式(auto|flex-start|flex-end|center|baseline|stretch)
八、grid布局
8、响应式页面
媒体查询
**通过@media定义样式,浏览器
窗口满足指定条件,才会应用此样式
/*当窗口大小在300px-600px之间时,执行某些样式*/
.box{
width: 300px;
height: 300px;
background-color: blue;
}
@media screen and (min-width:300px) and (max-width:600px){
.box{
background-color: red;
}
}
响应式页面的有点与缺点
- 优点:一套页面适应多端设备,提升开发效率
- 缺点:页面效果不及单独为某一终端定制的页面效果;性能问题;维护成本提升;
总结:大部分项目不会整体采用响应式页面的解决方案
9、使用rem单位设置移动端页面尺寸
- 单位概述
- px:像素
- em:相对于父级的font-size值
- rem:相对于html标签的font-size值