验证中...
Languages: CSS
Categories: Web开发技术
Latest update 2019-03-26 09:36
gistfile1.txt
Raw Copy
//手机端禁止粘贴复制
*{
-webkit-touch-callout:none; /*系统默认菜单被禁用*/
-webkit-user-select:none; /*webkit浏览器*/
-khtml-user-select:none; /*早期浏览器*/
-moz-user-select:none;/*火狐*/
-ms-user-select:none; /*IE10*/
user-select:none;
}
//在添加完这段代码后,IOS上input框若无法输入内容;就在css中同时设置:
input {
-webkit-user-select:auto; /*webkit浏览器*/
}
//添加自定义字体
@font-face {
font-family: 'airstreamregular';
src: url('fonts/Airstream-webfont.eot');
src: url('fonts/Airstream-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Airstream-webfont.woff') format('woff'),
url('fonts/Airstream-webfont.ttf') format('truetype'),
url('fonts/Airstream-webfont.svg#airstreamregular') format('svg');
font-weight: normal;
font-style: normal;
}
//css3的媒体查询
body{bacround:"red"}
@media screen and(max-width:960px);{
.body{
color:red
}
}
@media screen and (max-width: 768px) {
body {
background-color: orange;
}
}
@media screen and (max-width: 550px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 320px) {
body {
background-color: green;
}
}
//移动端的rem问题
html {
font-size: -webkit-calc(100vw/7.5);
font-size: calc(100vw/7.5);
}
//隐藏滚动条
body::-webkit-scrollbar{
display: none;
}
//滚动条样式
body{
&::-webkit-scrollbar{/*滚动条整体样式*/
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb{/*滚动条里面小方块*/
border-radius: 10px;
background-color: #abcdef;
}
&::-webkit-scrollbar-track{/*滚动条里面轨道*/
border-radius: 10px;
background: #ccc;
}
}
//Css3导航背景 --- 渐变色(上面黑色,下面透明)
.xs-header-bg{
background: -webkit-linear-gradient(top,rgba(0,0,0,0.7),rgba(0,0,0,0));
background: -moz-linear-gradient(top,rgba(0,0,0,0.7),rgba(0,0,0,0));
background: linear-gradient(top,rgba(0,0,0,0.7),rgba(0,0,0,0));
-webkit-transition: background-color .5s linear;
-moz-transition: background-color .5s linear;
-o-transition: background-color .5s linear;
transition: background-color .5s linear;
-webkit-transform: translateZ(0);
}
//DIV高等于宽
.a{
position: relative;
width: 100%;
height: 0;
padding-bottom: 30%;
}
.b{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: red;
}
<div class="a">
<div class="b"></div>
</div>
.a的padding-bottom就是调整宽高比例。例子中的位10:3
//CSS文字溢出隐藏
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
//CSS计算宽
width: calc(100% - 50px);
//输入框input类型为number时,去除上下箭头
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
//多行文本实现省略号
div{
word-break:break-all;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow: hidden;
}
//实现顶部加载进度条
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 3px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB; /*上边框颜色*/
border-left-color: #1E92FB; /*左边框颜色*/
}
</style>
//空心三角箭头
.OrderTitle::after{
content: '';
position: absolute;
top: 0;
right: 30rpx;
width: 8px;
height: 8px;
border-top: 1px solid #656565;
border-right: 1px solid #656565;
transform: rotate(45deg);
}

Comment list( 0 )

You need to Sign in for post a comment

Help Search

Gitee_sixth 5th_float_left_close