css
文字居中 text-align: center;
盒子居中 margin:auto;
方框弧度 border-radius: 40rpx;
在图片上 position: relative;
宽度 vw
高度 vh
第几个标签 nth-child()
加边框线 border: 1px solid red
solid 直线
dotted 圆点虚线
dashed 直线虚线
这种被挡住的,在导航栏最外层加上
/* position:relative;
z-index:9999; */
可以有效解决
导航栏跟随
position: fixed;
z-index: 999;
a标签去除下划线
text-decoration:none;
盒子里显示符合大小的背景图
background-repeat: no-repeat;
background-size: contain;
盒子里显示符合盒子大小的背景图
background-size:cover;
两个盒子重叠
父元素 position: relative;绝对
子元素 position:absolute;相对
(top、left、bottom、right可以设置位置)
超出盒子部分隐藏
overflow: hidden;
动画
transition: 0.6s;
.choice img{ pointer-events: none; }
加上pointer-events:none不再是鼠标可点击的对象
pointer-events属性值详解
auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。