HTML+CSS入门 CSS公共样式
沉沙 2018-09-20 来源 : 阅读 3122 评论 0

摘要:本篇教程介绍了HTML+CSS入门 CSS公共样式,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门 CSS公共样式,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

<

@charset "utf-8";
*{margin: 0px;padding: 0px;}
body {background: #FFFFFF;color: #333;font-family: "微软雅黑";font-size: 14px;font-weight: lighter;}
ul,li,ol,dl,dt,dd {list-style: none;}
a {color: #333;text-decoration: none;cursor: pointer;outline: 0 none;}
a:link,a:visited {text-decoration: none;color: #1F376D;}
a:hover,a:active {text-decoration: none;color: #BD0A01;border: none;}
button,input,select {vertical-align: middle;}
button{cursor: pointer;}
img {border: 0 none;}
table{border-collapse:collapse;}
.fl{float: left;}
.fr{float: right;}
.overflow-h {overflow: hidden;}
.cl {clear: both;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.none {display: none}
.block {display: block}
.inline-block{display: inline-block}
.t-l {text-align: left;}
.t-c {text-align: center;}
.t-r {text-align: right;}
.vm {vertical-align: middle}
.bg-red {background-color: #FB8B76;}
.bg-red:hover{background-color: #FF2525;}
.bg-yellow {background-color: #FCBA50;}
.bg-yellow:hover{background-color: #FF2525;}
.bg-blue {background-color: #3DC5D0;}
.bg-blue:hover{background-color: #FF2525;}
.bg-green{background-color: #82D745;}
.bg-green:hover{background-color: #FF2525;}
.bg-gray {background-color: #FDFDFE;}
.bg-gray:hover{background-color: #FF2525;}
.bg-pink{background-color: #EC6C8D;}
.bg-pink:hover{background-color: #F24874;}
.F12{font-size: 12px;}
.F14{font-size: 14px;}
.F16{font-size: 16px;}
.F18{font-size: 18px;}
.F20{font-size: 20px;}
.color1{color: #333;}
.color2{color: #666;}
.color3{color: #999;}
.FB{font-weight: bold;}
.FN{font-weight: normal;}
.FI{font-style: italic;}
.w{width:100%}
.h{height:100%}
.h30 {height:30px;}
.lh30 {line-height: 30px;}
.btn{display: inline-block;padding:0px 16px;height:100%;border-radius:4px;cursor: pointer;}
/*遮罩层*/
.maskLayer{z-index: 9999;display: none;position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.3);}
/*文字溢出*/
.p-eclipse{
 width: 100%;
    overflow: hidden;
 white-space:nowrap; 
 text-overflow:ellipsis; 
 -o-text-overflow:ellipsis;
 -moz-binding:url(‘ellipsis.xml#ellipsis‘); 
}
.p-eclipse-2{
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-all;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.p-eclipse-3{
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-all;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
/*页面顶部阴影*/
.top-shadow:before {
 z-index: 100;
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);     
}
/***********************设置滚动条样式**************************/
.scroll{overflow: scroll;}
/*滚动条整体部分,
 * 其中的属性有width,height,background,border
 * (就和一个块级元素一样)等。
 * */
.scroll::-webkit-scrollbar{
 width: 12px;
 background-color: #eee;
}
/*外层轨道。
 * 可以用display:none让其不显示,
 * 也可以添加背景图片,颜色改变显示效果。
 * */
.scroll::-webkit-scrollbar-track{
 background-color: #eee;
}
/*滚动条里面可以拖动的那部分*/ 
.scroll::-webkit-scrollbar-thumb{
 border-radius: 10px;
 background: #3DB6A4;
}
/*滚动条两端的按钮。
 * 可以用display:none让其不显示,
 * 也可以添加背景图片,颜色改变显示效果。
 *  */
.scroll::-webkit-scrollbar-button:start {
   background: url(./imgs/up.png) no-repeat; 
   background-size: 12px 12px; 
}
.scroll::-webkit-scrollbar-button:end{
 background: url(./imgs/down.png) no-repeat; 
   background-size: 12px 12px; 
}
/*内层轨道,滚动条中间部分(除去)。*/ 
.scroll::-webkit-scrollbar-track-piece{
 
};
/*边角 */
.scroll::-webkit-scrollbar-corner{
 
};
/*定义右下角拖动块的样式*/
.scroll::-webkit-resizer{
 
};
/*****************************渐变背景颜色*********************/
.bg-lr{
 /*火狐*/
 background:-moz-linear-gradient(left, #F68E06, #F45408);
 /*Safari5.1 Chrome 10+*/
 background:-webkit-linear-gradient(left, #F68E06, #F45408);
 /* Safari 4-5, Chrome 1-9*/
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F68E06), to(#F45408));  
 /*Opera 11.10+*/
 background: -o-linear-gradient(left, #F68E06, #F45408);  
 /* IE 10 */
 background:-ms-linear-gradient(left, #F68E06, #F45408);
 /*IE 6 7 8*/
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#F68E06, endColorstr=#F45408)"; 
 background:linear-gradient(left, #F68E06, #F45408);
 +background:#FA7002;
}
.bg-tb{
 /*火狐*/
 background:-moz-linear-gradient(top, #F68E06, #F45408);
 /*Safari5.1 Chrome 10+*/
 background:-webkit-linear-gradient(top, #F68E06, #F45408);
 /* Safari 4-5, Chrome 1-9*/
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F68E06), to(#F45408));  
 /*Opera 11.10+*/
 background: -o-linear-gradient(top, #F68E06, #F45408);  
 /* IE 10 */
 background:-ms-linear-gradient(top, #F68E06, #F45408);
 /*IE 6 7 8*/
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#F68E06, endColorstr=#F45408)"; 
 background:linear-gradient(top, #F68E06, #F45408);
 +background:#FA7002;
}
/*****************************table表格样式**********************/    

本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程