中html倒入css那么套路,CSS常用套路

a标签去除原颜色(改为白色)和下划线

text-decoration: none;

color: #ffffff;

列表标签去除默认小点:

list-style-type:none;

设置元素透明度:

opacity:0.5;

页面中文字无法被选中:

user-select: none;

鼠标悬停,样式变化的方法:

a:hover {

opacity: 1;

}

设置字体行高(如果只有一行文字可以达到居中的效果):

line-height: 45px;

设置字体样式:

font-family: DFKai-SB;

改变鼠标的样式:

cursor : pointer;  (变成小手)

cursor : default; (变成默认鼠标样式)

设置元素边框:

border: 1px solid #ffffff;

设置元素圆角:

border-radius: 5px;

设置元素为圆形(元素本身为正方形,即宽高一样):

border-radius: 50%;

更改精灵图定位:

background-position: -20px -20px;

内容未显示完,有滚动条显示剩下区域:

overflow: auto;

改变盒模型元素宽度计算模型为 IE模型(宽度包括了边框和内边距的长度):

box-sizing: border-box;

inline-block元素、inline元素、文本、img图片,垂直居中显示,需要设置他们父元素的vertical-align属性(只要元素已设置高度即可让文字内容居中):

vertical-align:middle;

inline-block元素、inline元素、文本、img图片,水平居中显示,需要设置他们父元素的text-align属性(只要元素能设置宽度即可让文字内容居中):

text-align: center;

元素根据父元素宽度进行居中显示 block 元素(前提条件,该block元素需要设置有宽度的值):

margin: 0 auto;

文字加粗:

font-weight: bold;

消除input输入框,点击后轮廓的光圈:

input:focus{

outline: 0px;

}

盒模型整体向XYZ某个方向移动(相比使用外边距移动,性能更优):

transform: translate3d(200px, 0px, 0px)

布局:

设置子元素左右距离父元素边框百分之5的边距,有如下两种方法,其中第二种方案不脱离文档流:

1、子绝父相,父元素:position: relative;  子元素:position: absolute; left:5%; right:5%;

2、 外边距,子元素(不设置宽度):   height: 100%;   margin: 0 5%;

设置绝对定位(设置后可以根据相对定位的父元素,进行位置的定位):

position: absolute;

设置图层前后顺序(只有脱离文档流的属性可以使用,值越大在的位置越前面):

z-index: -1;

设置背景图片(平铺)等比拉升,覆盖整个元素:

background-size: cover ;

背景图片上下左右(水平垂直)居中:

background-position: center center;

设置分隔线,可以使用加号选择器(表示当前class为a的元素前一个class也是a,选中当前class为a的元素)保证css代码的一致性:

li .a + .a{

border-right: 1px solid #ffffff;

}

去除a标签的点击跳转的效果:

阴影设置:

box-shadow: 0px 4px 13px 0px rgba(0,0,0,0.2) ;

清楚浮动最优套路,给浮动元素的父元素添加如下CSS样式(::after是伪元素,作用是在该元素的最前面增加一个元素,但在html中并不存在该元素,主要作用是布局页面):

.a::after {

content:"";

display:block;

clear:both

}

使用自定义动画:

先定义动画效果

@keyframes submenuSlide {

0%{

opacity: 0;

margin-right: 100%;

}

100%{

opacity: 1;

margin-right: 0%;

}

}

再使用动画(执行动画submenuSlide,整个过程1.5s执行完毕,匀速执行,重复执行)

.loading::after{

content: '';

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

animation:submenuSlide 1.5s linear infinite ;

animation-delay: 0.75s; #延迟0.75s执行

}

过度动画(所有变更过度,在0.2s内完成动画效果):

transition: all 0.2s;

行内元素,常见套路(设置完行内后,需要vat才能让行内元素正常显示)

nav{

display: inline-block;

vertical-align: top;

}

居中套路:

1、行内元素居中

2、块级元素居中

直角三角形套路:

.userCard .welcome .triangle{

/* 将span变成块级元素 */

display: block;

/* 将边框粗细设置为10px 颜色设置为透明*/

border: 10px solid transparent;

/* 如果不设置宽度,有可能会随父元素自适应,最好设置为0 */

width:0px;

/* 将左边边框,单独设置颜色(会覆盖原来设置的透明色) */

border-left-color: #E6686A;

/* 将顶部边框的宽度设置为0(就是让顶部边框隐藏,这样左右两边就是直角三角形了) */

border-top-width: 0px;

/* 子绝父相 */

position: absolute;

top: 100%;

left: 4px;

}

CSS兼容性写法;

CSS3动画效果生成器:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值