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

  • A+
所属分类：技术

系统字体引用（含预加载..）

A、前端页面可以使用（自定义名称fontabcd样例）
<link rel="preload" as="font" crossorigin href="static/fonts/fontabcd.woff2">
B、css样式表内使用（两者可重复备用）
@font-face {
    font-family: "fontabcd";
    src: url('../fonts/fontabcd.eot');
    src: url('../fonts/fontabcd.eot') format('embedded-opentype'),
        url('../fonts/fontabcd.woff2') format('woff2'),
        url('../fonts/fontabcd.woff') format('woff'),
        url('../fonts/fontabcd.ttf') format('truetype'),
        url('../fonts/fontabcd.svg') format('svg');
}

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

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

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

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

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

三、表格中单行超出隐藏显示省略号（常用)

table{width:100%;table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */}
td{
  width: 100%;
  word-break: keep-all;   // 不换行
  white-space: nowrap;   // 不换行
  overflow: hidden;
  text-overflow: ellipsis;
}

四、文本禁止选中

4.1、triangle up 上三角形

#triangle-up{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid black;
}

4.2、triangle down 下三角形

#triangle-down{
width：0；
height：0；
border-left：50px solid transparent；
border-right:50px solid transparent;
border-top:100px solid black;
}

4.3、triangle left 左三角形

#triangle-left{
width：0；
height：0；
border-top：50px solid transparent；
border-bottom:50px solid transparent;
border-right:100px solid black;
}

4.4、triangle right 右三角形

#triangle-right{
width：0；
height：0；
border-top：50px solid transparent；
border-bottom:50px solid transparent;
border-left:100px solid black;
}

4.5、triangle top left 左上三角形

#triangle-topleft{
width：0；
height：0；
border-top：100px solid black；
border-right:100px solid transparent;
}

4.6、triangle top right 右上三角形

#triangle-topright{
width：0；
height：0；
border-top：100px solid black；
border-left：100px solid transparent；
}

4.7、triangle bottom left 左下三角形

#triangle-bottomleft{
width：0；
height：0；
border-bottom：100px solid black；
border-right：100px solid transparent；
}

4.8、triangle bottom right 右下三角形

#triangle-bottomright{
width：0；
height：0；
border-bottom：100px solid black；
border-left：100px solid transparent；
}

五、文本禁止选中 & 图片img禁止拖拽的CSS用法

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

/* 禁止拖拽图片 */
img{-webkit-user-drag:none;user-drag:none;}

六、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>

 

十八、背景渐变（遮罩颜色）+图片

background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.6)), url(../images/bg-01.jpg) no-repeat center top;

 

十九、仅背景模糊，不影响其他的文字，区别于filter滤镜

-webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

二十、等待更新...

发表评论

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