CSS+DIV和HTML等内容的各种遗忘片段,记录一下总忘记的几个代码,若干年后还会用到就从这里记起!

  • A+
所属分类:技术

一、单行文本隐藏显示省略号

.danhang{
    width: 200px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

二、多行文本超出显示省略号(常用)

因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端

.duohang {
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

三、文本禁止选中

/* 禁止选中 */
.txtcopy {-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}

四、transition 过渡

.donghua {-webkit-transition:all .3s ease 0s;-moz-transition:all .3s ease 0s;-o-transition:all .3s ease 0s;transition:all .3s ease 0s;}

参考:https://www.w3school.com.cn/cssref/pr_transition.asp

五、transform 属性

.suofang{transform:scale(1.1);
-ms-transform:scale(1.1); /* Internet Explorer */
-moz-transform:scale(1.1); /* Firefox */
-webkit-transform:scale(1.1); /* Safari 和 Chrome */
-o-transform:scale(1.1); /* Opera */
}

参考:https://www.w3school.com.cn/cssref/pr_transform.asp

六、侧栏滚动条自定义颜色

::-webkit-scrollbar { width: 12px;} /* 这是针对缺省样式 (必须的) */	
::-webkit-scrollbar-track { background-color: #000;} /* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-thumb { background-color: #89000D;} /* 滑块颜色 */
::-webkit-scrollbar-button { background-color: #000; display: none;} /* 滑轨两头的监听按钮颜色 */
::-webkit-scrollbar-corner { background-color: black;} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

七、三角

.s_input:before{float:left;position:absolute;right:5px;top:-8px;z-index:99;content:".";font-size:0;width:0;height:0;border-right:8px solid transparent;border-left:8px solid transparent;border-bottom:8px solid #BBB;}

用div容器的before,绘制向上三角形。

八、渐变彩色背景

以上为效果

body{background-image: linear-gradient(to right,#313c48,#313c48 25%,#b47acc 25%,#b47acc 35%,#48a8f1 35%,#48a8f1 45%,#7dca59 45%,#7dca59 55%,#ffb606 55%,#ffb606 65%,#e67e22 65%,#e67e22 75%,#e74c3c 85%,#e74c3c 85%,#c0392b 85%,#c0392b 100%);}

也可以调试不同宽度的百分比,同时还可以作为顶部导航条背景装饰条。

九、关于align="absmiddle"的说明

 元素名称    说明 
 AbsBottom   图像的下边缘与同一行中最大元素的下边缘对齐。  
 AbsMiddle   图像的中间与同一行中最大元素的中间对齐。  
 Baseline    图像的下边缘与第一行文本的下边缘对齐。  
 Bottom    图像的下边缘与第一行文本的下边缘对齐。  
 Left      图像沿网页的左边缘对齐,文字在图像右边换行。  
 Middle     图像的中间与第一行文本的下边缘对齐。  
 NotSet     未设定对齐方式。  
 Right     图像沿网页的右边缘对齐,文字在图像左边换行。  
 TextTop    图像的上边缘与同一行上最高文本的上边缘对齐。  
 Top      图像的上边缘与同一行上最高元素的上边缘对齐。

 

十、skew的2D倾斜特效

CSS+DIV和HTML等内容的各种遗忘片段,记录一下总忘记的几个代码,若干年后还会用到就从这里记起!如图效果,可参考https://www.runoob.com/cssref/css3-pr-transform.html的transform属性。

.slide{
    display: inline-block;
    box-shadow: 1px 1px 0 #00c0d4;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    transform: skew(-20deg);
    height: 100%;
}

十一、css 属性clip-path之多边形polygon

<polygon> 标签用来创建含有不少于三个边的图形。

属性的用法

polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>) 定义了每一个点的坐标,从上图也能看出,起点是从左上角开始计算的,可以用百分百,也可以用px等单位。

CSS+DIV和HTML等内容的各种遗忘片段,记录一下总忘记的几个代码,若干年后还会用到就从这里记起!

.joined_wrapper {
    background: #0db896;
    clip-path: polygon(0 0, 100% 17%, 100% 100%, 0% 100%);
}

1.以上为核心代码和样例,梯形。

2.三角形代码

clip-path: polygon(50px 100px, 160px 30px, 160px 170px);

3.鱼型代码CSS+DIV和HTML等内容的各种遗忘片段,记录一下总忘记的几个代码,若干年后还会用到就从这里记起!

50px 110px, 50px 90px, 160px 30px, 260px 30px, 400px 90px, 480px 150px, 480px 50px, 400px 110px, 260px 170px, 160px 170px

十二、常用的几种IE9的CSS-hack写法

div {

background-color:red\0;  /* ie 8/9*/

background-color:blue\9\0;  /* ie 9*/

*background-color:green;  /* ie 7*/

_background-color:gray;  /* ie 6*/

}

注意写csshack的顺序,其中:

1.background-color:red\0;IE8和IE9都支持;
2.background-color:blue\9\0; 仅IE9支持;

(1)区别FF(IE8)与IE6 IE7

backgorund:orange; FF和IE8背景色将为橘黄色

*backgorund:red;   IE6和IE7背景色将为红色

(2)区别FF(IE8)与IE6与IE7

background:orange;   FF和IE8背景色将为橘黄色

*background:red !important;  IE7背景色将为红色

*background:blue;     IE6背景色将为蓝色

(3)区别FF(IE8)与IE6与IE7

background:orange;        FF和IE8背景色将为橘黄色

*background:red;          IE7背景色将为红色

_background:blue;         IE6背景色将为蓝色

(4)区别FF与IE6 IE7 IE8 IE9

color:gray;       FF等非IE浏览器字体色将为灰色

color:red\9;     IE8 IE9字体色将为红色

*color:green;     IE7字体色将为绿色

_color:blue;     IE6字体色将为蓝色

提示:CSS HACK书写顺序:先写FF等非IE浏览器所需样式,其次写IE8/9所需样式,接着是IE7的,再接着才是IE6的!

总结:实际运用中我感觉比较少用到!important ,只要你记住”*”和”_”我想就足够区别于FF(IE8)与IE6与IE7了.

 

十三、滚动视差效果...

主要是添加了background-attachment:fixed属性实现。将背景图相对于windows窗口固定,再来回切换,可以实现这种视差效果,很简单的。

十四、Bootstrap4.X开始,导航栏右侧对齐方法

Bootstrap 版本: bootstrap-4.0.0以上

通过Bootstrap4.x 的 Flex 布局可以很容易地将导航栏右侧对齐,只需要在包含导航栏的 <div> 加上 justify-content-end样式即可。以下实例:

<nav class="navbar navbar-expand-lg navbar-light">
       <div class="container">
           <a class="navbar-brand" href="/">穿墙书店</a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
               <span class="navbar-toggler-icon"></span>
           </button>
           <!-- 这个下边的 div 加上 justify-content-end 样式即可 -->
           <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
               <ul class="navbar-nav">
                   <li class="nav-item" id=""><a class="nav-link active" href="/"> 主页 </a></li>
                   <li class="nav-item" id=""><a class="nav-link" href="/"> 菜单</a></li>
                   ...
               </ul>
           </div>
       </div>
   </nav>

 

十五、css3特效-keyframes放射性圆形

.spinner {
  width: 400px;
  height: 400px;
  background-color: #0cf;
 
  border-radius: 100%; 
  -webkit-animation: scaleout 1.0s infinite ease-in-out;
}
 
@-webkit-keyframes scaleout {
  0% {
     -webkit-transform: rotateX(45deg) scale(0.0);
  }
  100% {
    -webkit-transform: rotateX(45deg) scale(1.0);
    opacity: 0;
  }
}

html部分

<div class="spinner"></div>

 

十六、等待更新...

macyoyo

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: