前端js，css效果，实用代码

特效效果https://blog.csdn.net/m0_37809478/article/details/76619207

 

阿里云特大优惠活动链接：https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=bsu7swvn

阿里云双十二优惠活动：https://m.aliyun.com/act/team1212?params=N.HnyHpvpyAy

 

前端实用代码：

text-decoration:none;  --超链接字体去掉下划线样式
border-radius：25px; 属性用于创建圆角
font-weight:bold; ----字体加粗
box-shadow: 1px 5px 5px #2d2d2f; ---阴影
border-bottom-style:solid ----底边框为实线
display: inline-block; ------- 不同模块在同一行显示
line-height:52px;  ------- 行高设置
text-align: center; ------ 居中
font-family:”微软雅黑” ---
bootrap -- 栅格布局 -- offse --- 偏移
boostrap -- push -- pull -- 调换
outline: none; ---- 去除轮廓线
text-decoration:none; -----  去掉a标签的下划线
transition: .36s ease; ----- transition效果需要指定多少秒或毫秒才能完成
-webkit-transform: scale(2, 2);
transform: scale(2, 2);----------- 属性 放大 缩小 旋转 2D效果 3D效果等
border-width: 0;-------------------去除input边框
font-weight: normal; ---------------------设置字体的粗细（normal)去除效果
cursor: pointer; --------------------------- 鼠标变成小手
float:left ----------------------------------两个div之间没有间隙使用浮动
position: absolute; --------------------------悬浮-绝对定位---------------------（相对于上级元素的绝对定位）
justify-content:space-between;- ------------------均匀分布---弹性盒
border: 1px solid transparent; ---------------- //自定义边框
outline: none;  ------------------------------  //消除默认点击蓝色边框效果
list-style: none; ------------------------------- 消除li 前面的点
overflow: hidden;------------------------------------ 超出的隐藏
text-align: justify; ------------------------------- 文字超过两行文字的左右对齐
word-break:break-all; ------------------------------- 文字超过两行后可以恰当的换行
overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；


  bootbox.setLocale("zh_CN");设置中文样式
  boostrap.box样式
  .modal-dialog{
    width: 300px;
    position:fixed;
    top:40%;
    left:40%;
    transform:translateX(-50%) translateY(-50%);
}

a:hover, a:visited, a:active{
    text-decoration: none; 
    outline: 0; 
}
a{
    text-decoration: none;
    outline: 0;
}

 

display: block;
list-style-type:none; ------------清除 标记的类型。 （如：ul前面的点）；
text-align: center;   --------------文本居中；
background: url('../image/search_record/logoImg.jpg') no-repeat; ---- --no-repeat:不重复 显示一张背景图片
background-size: 100% 100%;- -------------调整 背景的大小
border-radius: 10px;  ---------------------  radius：半径 的意思；
line-height:2px ---------------------- 2px(number) 设置数字 计算得出的行高；（normal:默认，设置合理的行间距） 具体参考：http://www.w3school.com.cn/cssref/pr_dim_line-height.asp
text-decoration：none-----------------decoration：装饰的意思
font: 20px/104px "微软雅黑";--------------------------（font: bold 40px/50px "微软雅黑";）font：可以设置所有字体属性
outline: 0;------------------------------------------- 元素的外边线
overflow: hidden;------------------------------------- 当元素内的内容 超出时 使用 
display: inline;-------------------------------------- inline内联块 inline-block:为行内块元素（div之间会有间隙） block：解释：块
vertical-align: top;---------------------------------- 垂直对齐（top：把元素的顶端与行中最高元素的顶端对齐）
-webkit-border-radius: 5px; ========（-webkit-：兼容chrome 和safari）
    -moz-border-radius: 5px; ========（-moz-：兼容火狐）
    -ms-border-radius: 5px;
background: -webkit-linear-gradient(left, #ff9916, #ff6600);-------- 渐变色
white-space: nowrap;---------------------------------- 规定段落中的文本不进行换行：
text-overflow: ellipsis;------------------------------ ellipsis：显示省略号   clip:当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。 
position: relative;----------------------------------- 绝对定位  （对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置）
box-shadow: darkgrey 0px 0px 27px -3px;--------------- shadow：阴影
transform: translate(-50%,-50%);---------------------- 会有3D/2D 转换效果  translate 翻转