2019.4.25 表格表单与HTML5 && CSS3
@
目录
表格
标签
表格 table
行 tr
列 td
表头 th
属性
表格间距离
cellspacing
<table cellspaceing = "10 ">
表格的内边距
cellpadding
<table cellpadding = "20">
表格的边框
border
<table border = "3">
样式
边框合并
border-collapse: collapse;
行合并
<td rowspan = "2">
列合并
<td colspan = "2">
display
table中的display的值和行标签、块标签不同，值是table
表单
标签
<form>
属性
提交的网址
action
<form action = "#">
请求方式
method
<form method = "post">
常用的请求方式：
1.post
2.get
input相关
扩大响应范围
label
<label for = "users">请输入用户名：</label>
<input type = "text" id = "users">
此时点击“请输入用户名：”这几个字时，输入框input同样会获得焦点（被选中）
label中的for后面填的是input的id
字符
text
正常就这么写
<input type="text" >
<input type="text" autofocus="autofocus" id="" value="" />
或
<input type="text" autofocus= id="" value="" />
这样是默认获取焦点
<input type="text" disabled="disabled" id="" value="" />
这样是输入框禁用
<input type="text" placeholder="姓名" value="" />
这么写是有一个姓名的占位符
密码
password
<input type="password" >
单选框
radio
<input type="radio"/>
name
<input type="radio" name="sex" />男
<input type="radio" name="sex" >女
当n个单选框中的name属性相同时，这n个单选框被称为“一组单选框”
在一组单选框中，只能获取到一个值
value
<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="0"/>女
当一组单选框中的一个被选中时，js根据id获取单选框值时获取的是属性value中的值
默认选中
checked
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex" >女
或
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex" >女
当单选框被加checked属性时，加载时默认被选中
多选框
checkbox
<input type="checkbox"/>
属性参照单选框
文件上传
file
<input type="file"/>
下拉列表
select
<select name="">
<option value="">大连</option>
<option value="">沈阳</option>
<option value="">鲅鱼圈</option>
<option value="">朝阳</option>
</select>
如果使用
optgroup
将一组option包起来，相当于是给一组option取分组名字
<select name="">
<optgroup label="辽宁省">
<option value="">大连</option>
<option value="">沈阳</option>
<option value="">鲅鱼圈</option>
<option value="">朝阳</option>
</optgroup>
<optgroup label="黑龙江">
<option value="">哈尔滨</option>
<option value="">齐齐哈尔</option>
<option value="">大庆</option>
<option value="">五大连池阳</option>
</optgroup>
</select>
可拖拽大文本输入框
textarea
<textarea name="" rows="" cols=""></textarea>
表单提交
submit
<input type="submit" />
表单重写
reset
<input type="reset" />
数字
number
<input type="number" min="5" max="100" step= "5"/>
min max可以设置最大最小值
step 设置点一下右侧上下键跳的数字(变化量)
邮箱
email
<input type="email" name="" id="" value="" />
<input type="email" autocomplete="on" id="" value="" />
autocomplete="on"
开启自动补全,如果邮箱少了@符号会提示
链接
url
<input type="url" name="" id="" value="" />
颜色
color
<input type="color" name="" id="" value="" />
时间
date,month,week, datetime-local
<input type="date" name="" id="" value="" />
滑动条
range
<input type="range" name="" id="" value="" min="5" max="100" step= "5"/>
min max可以设置最大最小值
step 设置滑动一下的变化量
搜索框清除
search
就是手机端输账号密码输错了可以按右边一个×直接删除
<input type="search" name="" id="" value="" />
隐藏效果
hidden
管理系统做修改时,根据主键来进行修改(比如我的那个简历修改),把要修改的简历的id隐藏 只是页面上看不到了 不能点击修改
<input type="hidden" name="" id="" value="" />
HTML5 && CSS3
H5中新增的标签
音频标签
audio
<audio src="source/bg.mp3"></audio>
audio支持的文件格式：MP3、WAV、ogg；
audio中可以防止文本在浏览器不支持此标签时显示
autoplay
自动播放
controls
控制条（出现暂停播放进度条，但是进度条不能拉）
<audio src="source/bg.mp3" autoplay controls=""></audio>
视频标签
video
<video src="source/暴走.mp4" ></video>
video支持的文件格式：MP4、Webm、ogv；
autoplay
自动播放
controls
控制条（出现暂停播放进度条，但是进度条不能拉）
poster
添加视频封面（b站那种）
nav
作为导航
header
用于定义文档或文档一部分区域的头部
section
用于划分区域
main
页面主体部分
aside
可用于文章的侧栏
canvas
画布
H5中新增的选择器
属性选择器
a[href] {
color: red;
}
<a href="#">1</a>
<a>2</a>
上述样例是只有1变红
结构选择器
这个是只能选择儿子辈的，不能跨级选择
div>span {
color:pink;
}
这个是只能选择同级标签，还是必须得挨着的
span + a {
color: red;
}
<div>
<span>红姐包子铺</span>
<a href="">蛋黄肉馅</a>
</div>
伪类选择器
- 空元素选择器
指定空的p元素的背景色
p:empty {
width: 200px;
height: 30px;
background-color: pink;
}
<p></p>
<p>米线</p>
- not选择器
.color {
color: blue;
}
选择所有非括号中属性元素
:not(.color) {
color: pink;
}
<div class="color">凉皮</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
这里是只有12345的div会变粉色
- nth-child(n)选择器
规定属于其父元素的第二个子元素的每个 p 的样式
p:nth-child(2) {
color: red;
}
<div>
<p>炒饭</p>
<p>炒饭</p>
<p>炒饭</p>
<p>炒饭</p>
</div>
这里只有第二个炒饭的颜色会变红
- nth-of-type(n)选择器
规定属于其父元素的第二个 p 元素的样式
p:nth-of-type(2) {
color: yellow;
}
<div>
<p>炒饭</p>
<div>dsfdsfasdfa</div>
<p>炒饭</p>
<p>炒饭</p>
</div>
这里第二个炒饭的颜色会变黄
- nth-last-of-type(n)选择器
规定属于其父元素的最后一个 p 元素的样式
p:nth-last-of-type(2) {
color: lightblue;
}
<div>
<p>炒饭</p>
<div>dsfdsfasdfa</div>
<p>炒饭</p>
<p>炒饭</p>
<p>炒饭</p>
<p>炒饭</p>
<p>炒饭</p>
<div>鸡叉骨</div>
</div>
这里最后一个炒饭的颜色会变蓝
- nth-last-of-type(n)选择器
规定属于其父元素的最后一个 div 元素的样式
div:nth-last-child(1) {
color: greenyellow;
}
<div>
<p>炒饭</p>
<div>dsfdsfasdfa</div>
<p>炒饭</p>
<p>炒饭</p>
<p>炒饭</p>
<p>炒饭</p>
<p>炒饭</p>
<div>鸡叉骨</div>
</div>
这里最后一个鸡叉骨的颜色会变黄绿
- first-of-type与last-of-type
第一个p标签
p:first-of-type {
color: red;
}
最后一个p标签
p:last-of-type {
color: greenyellow;
}
不写例子了 自己看w3c
- only-of-type与only-child
选择所有父标签中p标签只有一个的那个p
p:only-of-type {
color: red;
}
选择所有父标签中只有一个子标签并且是p标签的那个p
p:only-child {
color: lavender;
}
不写例子了 自己看w3c
- before与after选择器
div:before {
content: "您好";
width: 100px;
height: 100px;
background-color: #7FFF00;
display: block;
}
div:after {
content: "刘一龙虾";
}
<div>
<p>锦辉鸡公煲</p>
<p>锦辉麻辣香锅</p>
</div>
应用:用于实现小图标,边框,遮罩层；
一个标签只能写一组before和after,而且必须指定content；
默认生成的是行内元素；
低版本的浏览器只识别:(一个冒号)想兼容跟多浏览器尽量写一个冒号；
其他浏览器可能也识别::(两个冒号)；
before和after选择器中可以写各种各样的样式。
过渡
transition
-
css3标准不固定，针对不同的浏览器进行兼容，需要加前缀：
- webkit :safari 谷歌 猎豹
- moz:火狐
- ms:IE
- o: opera
-
直接打transition然后tab出来的是这样的：
- -webkit-transition: all 1s;
- -moz-transition: all 1s;
- -ms-transition: all 1s;
- -o-transition: all 1s;
-
平常写直接写transition: all 1s; 就完事了
-
分开写是这样的：
- 过渡的样式 常用all.可以设置某个css样式：transition-property: all;
- 过渡效果：transition-timing-function: linear;
- 过渡的时间：transition-duration: 1s;
- 过渡延时：transition-delay: 1s;
-
复合样式这么写：transition: width 1s linear 1s,height 5s ease-in-out 2s;
-
过渡效果
- ease-in 规定以慢速开始的过渡效果
- ease-out 规定以慢速结束的过渡效果
- ease-in-out 规定以慢速开始和结束的过渡效果
变换
设置基准点：transform-origin
设置3D效果： transform-style:preserve-3d
设置翻转部分隐藏：backface-visibility: hidden;
设置景深：perspective: 1000px;
平移
translate(m,n)
注意写项目要加前缀
括号中参数是水平方向和垂直方向
复合样式：transform: translate(100px,100px);
X轴方向水平平移：transform: translateX(100px);
Y轴方向竖直平移：transform: translateY(100px);
translate的百分比是相对于自身的
负值是向左或向上移动自身的一半(-50%)
transform: translate(-50%,50%);
缩放
scale(m,n)
复合样式：transform: scale(2,0.5);
X轴方向水平缩放：transform:scaleX(10);
Y轴方向垂直缩放： transform:scaleY(2);
旋转
rotate(n) n指角度
默认样式旋转：transform: rotate(360deg);
X轴旋转：transform: rotateX(180deg);
Y轴旋转：transform: rotateY(180deg);
倾斜
skew(n) n指角度
复合样式:transform: skew(360deg,360deg);
XY和上面一样 不写了
动画
代码
@keyframes move{
from{
transform: translate(0,0);
}
30% {
transform: translate(200px,200px);
background-color: #DAA520;
}
70%{
transform: translate(500px,0);
background-color: #FFC0CB;
}
to{
transform: translate(0,0);
}
}
<body>
<div></div>
</body>
样式
- 平常写的复合样式：animation:move 5s;（这里的move是动画名）
- 分开写的样式：
- 动画名：animation-name: move;
- 动画时长：animation-duration: 5s;
- 动画循环次数：animation-iteration-count: infinite;
- infinite 无限循环
- 动画播放顺序：animation-direction: alternate;
- reverse倒序 alternate 往返运动
- 运动曲线：animation-timing-function: linear;
- ease ease-in ease-out
- 动画延时：animation-delay: 1s;
- 运动状态：animation-play-state: running;（一般在hover效果里）
- pause 暂停（
是可以练跟枪的效果(小声bb)）
- pause 暂停（
动画库的使用
- 先link动画库
- 链接：https://pan.baidu.com/s/1xtTyPSJ-UrFHsV6RuaaVtw 提取码：3tgs
- 然后使用
- 第一种方式：动画名使用动画库中定义好的——animation: bounce 2s;
- 第二种方式：class="animated +动画名"——
阴影
文字阴影
text-shadow(n,m,p,q)
前两个数分别为水平方向和垂直方向,一定要设置,不设置没有阴影效果
第三个数是模糊度
第四个是颜色
text-shadow: 20px 20px 10px yellow;
盒子阴影
box-shadow(n,m,p,q)
四个值分别为:水平偏移 垂直偏移 模糊距离 阴影颜色
box-shadow: 2px 2px 2px rgba(0,0,0,0.6);
inset:设置成内阴影
box-shadow: 0 0 20px red inset;
怪异盒模型
box-sizing: border-box;
别人加内边距是把最大圈往大了顶,怪异盒模型是把内容往小了顶
例如:
设内容200x200 ,加20的内边距
正常盒模型:内容200x200 外框240x240
怪异盒模型:内容160x160 外框200x200
线性渐变
background-image: linear-gradient(to right/bottom/top/left + color)
background-image: linear-gradient(角度 + color)
是对background-image进行的操作
background-image: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);
定个div设宽高自己运行看效果去
径向渐变
background-image: radial-gradient
这个地方就不写注释了 相信可以看懂
background-image: radial-gradient(200px at right top,maroon 60%,chocolate 80%,black 90%);
上面那行例子代码,加个50px圆角 你将会得到一个从望远镜看火星的视角(什么玩意)
