1、怎样让 p 占据整个页面高度而没有滑条
给 body 设置属性 overflow:hidden;
2、鼠标变小手
cursor:pointer;
3、文本框提示信息 (placeholder) 修改样式
兼容主流 浏览器
input::-webkit-input-placeholder{
color:white;
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:white;
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:white;
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:white;
}
4、让动画只播放一次,并且停留在最后一帧
#box:focus{
animation: mymove 1s ease-in-out 1 forwards;
}
/*:focus 伪类表示获得焦点的元素 */
/*mymove 动画名称; ease-in-out 缓慢开始和结束; 1 表示播放一次; forwards 表示停留在最后一帧 */
@keyframes mymove {
from {width:260px;}
to{width:320px;}
}
5、点击文本框或按钮会出现蓝色框,怎样去掉
input{
border:0;
online:none; /*online 就是一个提醒选中的效果 */
}
6、关于设置 z-index 没有作用,或者 input 文本框无法获取焦点
在 CSS 中,元素的 position 属性必须是 relative,absolute 或者 fixed,才能通过 z-index 改变层级;
关于 z-index 无论设置多高都不起作用的原因和解决方案:
一、
父标签 position 属性为 relative; // 改为 position:absolute;
问题标签无 position 属性 // 添加 position 属性 (relative、absolute 等)
问题标签含有浮动 (float) 属性; // 去除浮动即可
二、IE6 下,层级表现有时候不是看子标签的 z-index 多高,而要看整个 DOM tree(节点树) 的第一个 relative 属性标签的父级标签的层级。
虽然问题标签的层级很高,但是由于第一个 relative 属性的父级标签不给力,所以自身强大也没用。
input 文本框无法获取焦点,可能是 z-index 层级低,被其他层级高的元素所覆盖了。
7、css3 动画 animation 的播放、暂停和重新开始
/*css 部分 */
@keyframes mymove{
0%{
margin-left:0px;
}
50%{
margin-left:300px;
}
100%{
margin-left:600px;
}
}
.box{
margin:50px 0;
width:100px;
height:100px;
background:black;
animation: mymove 5s linear 2s infinite normal;
}
/* 属性值说明:动画名 播放总时长 播放速度 延迟时间 播放次数 是否轮流反向播放动画 */
/*
播放速度:linear 匀速 ease 低速 - 加快 - 变慢 ease-in 低速开始 ease-out 低速结束 ease-in-out 低速开始和结束
播放次数: n 播放 n 次 infinite 无限循环播放
是否轮流播放: normal 正常播放,默认值 alternate 轮流反向播放
*/
.box:hover {
animation-play-state:paused; /* 鼠标移动上去暂停动画;*/
/* paused 暂停动画
running 继续播放动画
*/
}
8、怎样在新的窗口打开页面链接
target 属性规定在何处打开页面上的所有链接
语法:
属性值:_blank 在新窗口打开被链接文档
_self 默认。在相同的框架中打开被链接文档
_parent 在父框架集中打开被链接文档
_top 在整个窗口中打开被链接文档
framename 在指定的框架中打开被链接文档
// 直接在开头就设定,所有的链接都会以_blank 方式打开
来源: https://www.2cto.com/kf/201712/705105.html