CSS主要整理

css主要整理

// 右侧悬浮导航
/* 侧栏开始 */
#home { position: relative }
// 悬浮
#home .xf { width: 67.6923076923077px; height: 230.769230769231px; background: rgba(255, 255, 255, 1); box-shadow: 0 0 16px rgba(0, 0, 0, 0.07); border-radius: 4px; padding-left: 5px; padding-right: 5px; box-sizing: border-box; text-align: center; position: fixed; right: 15px; bottom: 40%; z-index: 99; cursor: pointer }
#home .xf { width: 67.69230769px; height: 230.76923077px; background: rgba(255, 255, 255, 1); -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, .07); box-shadow: 0 0 16px rgba(0, 0, 0, 0.07); border-radius: 4px; padding-left: 5px; padding-right: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; position: fixed; right: 15px; bottom: 40%; z-index: 99; cursor: pointer }
#home .xf .wd { height: 33.33%; border-bottom: 1px solid rgba(241, 241, 241, 1); padding-top: 10px }
#home .xf .wd:hover .fontC { color: rgba(255, 148, 10, 1) }
#home .xf .wd:hover .fontW { color: rgba(255, 148, 10, 1) }
#home .xf .wd:hover .big, #home .xf .wd:hover .phone, #home .xf .wd:hover .big1 { display: block }
#home .xf .wd .fontC { font-size: 20px; color: rgba(51, 51, 51, 1) }
#home .xf .wd .fontW { font-size: 12px; font-family: PingFang SC; font-weight: 300; color: rgba(153, 153, 153, 1); line-height: 19.2307692307692px; margin-top: 3px }
#home .xf .big { width: 150px; height: 150px; background: rgba(255, 255, 255, 1); box-shadow: 0 0 16px rgba(0, 0, 0, 0.07); border-radius: 4px; padding-top: 10px; position: absolute; top: 0; right: 75px; display: none }
#home .xf .big:after { position: absolute; content: ""; border-top: 10px solid rgba(0, 0, 0, 0); border-right: 10px solid rgba(0, 0, 0, 0); border-bottom: 10px solid rgba(0, 0, 0, 0); border-left: 10px solid rgba(255, 255, 255, 1); right: -20px; top: 20px }
#home .xf .big1 { width: 150px; height: 150px; background: rgba(255, 255, 255, 1); box-shadow: 0 0 16px rgba(0, 0, 0, 0.07); border-radius: 4px; padding-top: 7px; position: absolute; top: 70px; right: 75px; display: none }
#home .xf .big1:after { position: absolute; content: ""; border-top: 10px solid rgba(0, 0, 0, 0); border-right: 10px solid rgba(0, 0, 0, 0); border-bottom: 10px solid rgba(0, 0, 0, 0); border-left: 10px solid rgba(255, 255, 255, 1); right: -20px; top: 20px }
#home .xf .phone { width: 154px; height: 44px; background: rgba(255, 255, 255, 1); box-shadow: 0 0 16px rgba(0, 0, 0, 0.07); border-radius: 4px; position: absolute; bottom: 15px; right: 75px; font-size: 13.8461538461538px; font-family: PingFang SC; font-weight: 300; color: rgba(51, 51, 51, 1); line-height: 44px; display: none }
#home .xf .phone:after { position: absolute; content: ""; border-top: 10px solid rgba(0, 0, 0, 0); border-right: 10px solid rgba(0, 0, 0, 0); border-bottom: 10px solid rgba(0, 0, 0, 0); border-left: 10px solid rgba(255, 255, 255, 1); right: -15px; top: 5px }
.textRred { color: rgba(255, 0, 0, 1) }
h2 { font-family: "MicrosoftYaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.88rem; font-weight: bold; font-stretch: normal; letter-spacing: 3px; color: rgba(48, 75, 125, 1); position: relative; text-align: left; z-index: 1 }
h2:after { content: "COMPANY PROFILE"; font-family: Arial, "MicrosoftYaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 3rem; font-weight: 600; font-stretch: normal; letter-spacing: 1.8px; color: rgba(48, 75, 125, 1); opacity: 0.1; position: absolute; left: 0; right: 0; text-align: left; bottom: 0; z-index: -1; top: -24px }
.overLine { position: relative; width: 100%; text-align: center; font-size: 20px; font-weight: 500; color: rgba(51, 51, 51, 1); line-height: 15px; margin: 15px 0 }
.tui-title-line { width: 35px; height: 29px; vertical-align: middle; margin-right: 8px }
.overLine .lines { display: inline-block; padding: 0 30px; font-weight: 600; color: rgba(51, 51, 51, 1) }
.overLine:before, .overLine:after { display: inline-block; position: relative; content: ""; height: 2px; width: 66px; top: -5px; background-color: rgba(224, 224, 224, 1); -webkit-transform-origin: 0 0; transform-origin: left top }
.line { width: 100%; height: 15px; margin: 5px }
.public { width: 80px; height: 100%; display: inline-block; text-align: justify; vertical-align: top }
.public::after { content: ""; display: inline-block; width: 100%; overflow: hidden; height: 0 }

小程序

公众号

电话联系

021-64027696

我们的服务

1.字体换行对齐

xxxx：刚刚好，看见你幸福的样子，于是幸福着你的幸福。草在结它的种子，风在摇它的叶子。我们站着，不说话，就十分美好。不管前方的路有多苦，都比站在原地要幸福。小时候，幸福是一件简单的事。长大后，简单是一件幸福的事。人总在接近幸福时倍感幸福，却在幸福进行时患得患失。

2.文字只显示一行，超出用点表示（需要设置宽度，当父级元素使用flex布局时，需要在display：flex；这边设置min-width：0；不然ellipsis会失效！！）

文字只显示一行，超出用点表示。我亦可贪恋烟火，殷实人家，几间瓦房，四方小院，守着流年，幸福安康。你的人生握不住，就任凭日月星辰摆布。三个最重要的人生命题：我是谁，我从哪来，我要到哪去?参差多态，乃是幸福的本源。幸福不是可以套用的公式，幸福来源于世界的百般变化与包容。

3.文字显示两行，超出用点表示。

文字显示两行，超出用点表示文字显示两行。别让那些未说口或者来不及说出口的话变成了永远的遗憾，趁我还爱，趁你还在。对你最后的欺骗，是我最后的尊严。因为我知道路的尽头总有笑容灿烂的你在等我,这让我勇敢.一个人，一场戏，一辈子。 两个人，一台戏，此生唯一。没有不可治愈的伤痛，没有不能结束的沉沦，所有失去的，会以另一种方式归来。你走过的地方，有一树一树的花开，你呢喃的梁间，还留着余温犹存的梦。隔山隔水，隔不断我对你的情意绵绵;说你说我，说不尽我对你的相思连连!对你最后的欺骗，是我最后的尊严。

4.多行文字左右对齐

“轻轻的我走了，正如我轻轻的来，我轻轻的挥手，作别西天的云彩……，众里寻与他千百度，蓦然回首那人却在灯火阑珊处，空山新雨后，天气晚来秋”“去年春恨却来时。落花人独立，微雨燕双飞，想带你去看晴空万里，想大声告诉你我为你着迷！黄昏后偷你的肋骨酿酒，百年后醉的有血有肉！我用时光等你，你不来我不老！"浮烟冷雨，追忆残梦里的一城一池。梦里你一如昔日白衣胜雪，衣袂翩跹，倚剑遥望江山半面。一念繁华一念灰，一念成悦，处处繁华处处锦。一念成执，寸寸相思寸寸灰，一念花开一念花落，这山长水远的人生，终究要自己走下去，宫灯夜明昙华正盛，共饮逍遥一世悠然，一花一世界，一叶一如来，一砂一极乐，一笑一尘埃。

5.实现单行文字两端对齐

姓名

: 林小依

身份证

: 610521202005263542

手机号码

: 18721254215

字体的阴影

字体的阴影

动画属性依次是 ，名称， 持续时间， 速度曲线， 延迟时间， 动画播放计数， 是否反方向播放动画；例如，

123455

文字居中两边带线

猜你喜欢

字体库引入

@font-face { font-family: HYCSJ; src: url(http://resource.diyibox.com/jd/activity/201904/font/汉仪长宋简.ttf), }

6. 页面首页置灰的方法（考虑兼容，一般国家领导去世或者发生大事件会置灰）

webkit内核（chrome和safari浏览器）：

html.o2_gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}

7.如何让隐藏滚动条，但是保留滚动效果？（考虑兼容）

webkit内核（chrome和safari浏览器）：

.oh::-webkit-scrollbar {
    display: none;
}

IE浏览器

.oh {
    -ms-overflow-style: none;
}

FireFox浏览器

.oh {
    scrollbar-width: none;
}