日常用的css基础和自己常用的js封装
css基础:base
/*
* 初始化
*/
*::after, *::before {
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB', \5b8b\4f53, sans-serif;
background: #fff;
}
html{
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: 62.5%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td,
s,a,div {
margin: 0;
padding: 0;
} li {
list-style: none;
} img {
display: inline-block;
} em {
font-style: normal;
}
/* a */
.trans{
transiton:all 0.3s;
-moz-transition:all 0.3s;
-webkit-transition:all 0.3s;
-ms-transition:all 0.3s;
}
a:focus {
outline: none;
}
a,
a:hover {
text-decoration: none;
} a:visited,
a:link {
text-decoration: none;
} /* 元素i、select、input、textarea、button */
i {
vertical-align: middle;
} i,
label,
input[type='checkbox'] {
vertical-align: middle;
} select {
line-height: 24px !important;
height: 30px !important;
padding: 4px 2px !important;
} input {
font-size: 14px;
display: inline-block;
overflow: hidden;
height: 30px !important;
line-height: 28px !important;
padding-left: 5px;
vertical-align: middle;
color: #333;
border: 1px solid #dcdcdc;
border-radius: 0;
background-color: #fff;
} input[type='button'] {
height: auto !important;
padding: 4px 24px !important;
} input[type='checkbox'],
input[type='radio'] {
height: auto !important;
padding: 0 !important;
border: none;
} .form-control[readonly] {
opacity: 1;
background-color: #f5f5f5;
} textarea {
overflow-y: auto;
padding: 4px 6px !important;
resize: none;
transition: border .2s linear 0s, box-shadow .2s linear 0s;
color: #333;
border: 1px solid #dcdcdc;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset;
} textarea:focus {
outline: 0 none;
}
/*浮动*/
.pull-left{
float: left;
}
.pull-right{
float: right;
} /*清除浮动*/
.clearfix::after,
.clearfix::before,
.form-group::after,
.form-group::before {
content: " ";
display: table;
}
.clearfix,.clearfix::after,
.form-group,.form-group::after{
clear: both;
} /* 公用样式
*==================================================================
*/
.width1200 {
width: 1200px !important;
}
/* 居中 */ .m-c {
margin: 0 auto;
} /* 对齐方式 */
.t-c-f {
text-align: center !important;
} .t-l-f {
text-align: left !important;
} .t-r-f {
text-align: right !important;
}
/* 省略 */
.el-sl {
display: inline-block;
overflow: hidden;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
} /* 文字大小 */
.f12 {
font-size: 12px;
} .f14 {
font-size: 14px;
} .f16 {
font-size: 16px;
} .f18 {
font-size: 18px;
}
.f22{
font-size:22px;
}
.f24{
font-size:24px;
}
.f28{
font-size:28px;
} .b {
font-weight: bold;
} .b-n {
font-weight: normal;
} /* 颜色值
* ===============
*/ .white {
color: #fff;
}
.white-bg {
background: #fff;
}
.dark {
color: #000;
} .gray333 {
color: #333;
} .gray333-bg {
background: #333;
} .gray999 {
color: #999;
} .gray999-bg {
background: #999;
} .gray666 {
color: #666;
} .gray666-bg {
background: #666;
} /* 图标大全
*====================================
*/
.i-all {
display: inline-block;
background: url(../../img/icon/i_all.png) no-repeat;
} /*删除*/
.i-del {
width: 13px;
height: 15px;
background-position: -61px -17px;
}
.i-del:hover,
.i-del.active,
.i-del-h {
width: 13px;
height: 15px;
background-position: -55px -33px;
}
/*
*弹窗
*/
.c-modalBg {
position: fixed;
z-index: 10;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
} .c-modalBox {
position: fixed;
z-index: 12;
top: 50%;
left: 50%;
display: none;
/* margin-top: 150px;*/
margin-left: -250px;
border-radius: 5px;
background: #fff;
} .c-modalBox .c-modalBox-title {
font-weight: bold;
line-height: 48px;
width: 100%;
height: 48px;
color: #333;
border-bottom: 1px solid #e8e8e8;
border-radius: 5px 5px 0 0;
background: #fafafa;
}
.c-modalBox .c-modalBox-title .i-close {
font-size: 36px;
font-style: normal;
font-weight: lighter;
}
/*
*
*tipsBox 提示框
*/
.tipsBox{
width:200px;
position:fixed;
top:25%;
left:50%;
margin-left:-90px;
z-index:999999;
}
.tipub{
padding: 10px;
border-radius:4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow:0 0 3px #ddd inset;
-webkit-box-shadow: 0 0 3px #ddd inset;
}
.tipsBox .bgcolok{
background-color:#4AAF33;
}
.tipsBox .bgcolerror{
background-color:#EB6B62;
}
.tipsBox .bgcolwarn{
background-color:#F7BA86;
}
.tipsBox img{
vertical-align: middle;
margin-right:5px;
margin-top: -4px !important;
}
JS基础:
(function($){
//$.fn.extend({}) 对象实例来调用此方法 $("").方法名()
$.fn.extend({
/*
剩余输入字数
num:要输入的字数总个数
* eg:$(".length100").getTextLen(100)
* $(".length100").getTextLen(1000)
* */
getTextLen: function(num) {
var _num = num;
var timer = null;
$(this).on('mouseover', function() {
clearInterval(timer);
$(this).attr('maxLength', _num);
var _this = $(this);
timer = setInterval(function() {
var thisVal = _this.val();
if (thisVal.length > _num) {
thisVal = thisVal.substring(0, _num);
_this.val(thisVal);
}
_this.parent().find('.leng').text(thisVal.length);
}, 30);
});
$(this).mouseover();
}, }); //$.extend({}) 直接用jQuery类即可引用 $.方法名()
$.extend({
/*
*
*提示框,
*目前三个参数 txt:要显示的文本;times:自动关闭的时间(不设置的话默认1500毫秒) status:状态,
*eg: $.showTips('请输入文本提示'); $.showTips('提交成功~ 即将进入下一步',1500,1);
*
*/
showTips:function(txt,times,status){
var showHtml = "";
if(txt != ""){
if(status == 1 && status !=undefined){
console.info("1111");
showHtml = '<div class="tipsBox t-c-f white">'+
'<div class="bgcolok tipub"><img src="data:images/ok.png" alt="OK" />'+txt+'</div>'+
'</div>';
}else if(status == 2){
showHtml = '<div class="tipsBox t-c-f white">'+
'<div class="bgcolerror tipub"><img src="data:images/error.png" alt="error" />'+txt+'</div>'+
'</div>';
console.info("222");
}else{
showHtml = '<div class="tipsBox t-c-f white">'+
'<div class="bgcolwarn tipub"><img src="data:images/warn.png" alt="warn" />'+txt+'</div>'+
'</div>';
console.info("other");
}
}
$("body").prepend(showHtml);
if(times == "" || times == undefined){
//默认消失时间 1.5s
times = 1500;
}
setTimeout(function(){
$(".tipsBox").remove();
},times)
},
/* * 常用正则
* eg: $.方法名()
* */
//手机号
isPhone:function(p){
var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
return isMobile.test(p) ? true : false;
},
//邮箱
isEmail:function(e){
var isEmail=/^([a-zA-Z1-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return isEmail.test(e) ? true : false;
}
//身份证
})
})(jQuery); /*
* Img:要放图片的img元素,onload时传参可用this
* maxHeight :img元素的高度,像素(图片框 最大高度)
* maxWidth:img元素的宽度,像素(图片框 最大宽度)
* eg: <img src="" onload="AutoResizeImage(this,250,300)"/>
* */
function AutoResizeImage(Img, maxWidth, maxHeight) {
var image = new Image();
//原图片原始地址(用于获取原图片的真实宽高,当<img>标签指定了宽、高时不受影响)
image.src = Img.src;
// 当图片比图片框小时不做任何改变
if (image.width < maxWidth&& image.height < maxHeight) {
Img.width = image.width;
Img.height = image.height;
}
else{
//原图片宽高比例 大于 图片框宽高比例,则以框的宽为标准缩放,反之以框的高为标准缩放
if (maxWidth/ maxHeight <= image.width / image.height) {
//原图片宽高比例 大于 图片框宽高比例
Img.width = maxWidth; //以框的宽度为标准
Img.height = maxWidth* (image.height / image.width);
}
else {
//原图片宽高比例 小于 图片框宽高比例
Img.width = maxHeight * (image.width / image.height);
Img.height = maxHeight ; //以框的高度为标准
}
}
}
/*
* 图片比例缩放
* eg: <img src="" onload="scalingImg(this)"/>
* */
/*function scalingImg(obj){
var $this = $(obj); var imgWidth=$this.width();
var imgHeight=$this.height(); var parent = $this.parent();
var containerWidth = parent.width();
var containerHeight=parent.height(); var containerRatio = containerWidth / containerHeight;
var imgRatio = imgWidth / imgHeight; if (imgRatio > containerRatio) {
imgWidth = containerWidth;
imgHeight = containerWidth / imgRatio;
} else if (imgRatio < containerRatio) {
imgHeight = containerHeight;
imgWidth = containerHeight * imgRatio;
} else {
imgWidth = containerWidth;
imgHeight = containerHeight;
} $this.attr('width',imgWidth);
$this.attr('height',imgHeight);
}*/ /* *
* tab切换
* eg:
* */
function setTab(name,cursel,n){
for(i=0;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con"+name+i);
if(menu == null || con == null)continue;
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
用JQuery实现选中select里面的option显示对应的div
HTML:
<select class="span9 m-wrap j-pactchoose" name="pactkind">
<option value="1">标准无价易制毒合同</option>
<option value="2">标准有价易制毒合同</option>
<option value="3">非标准无价易制毒合同</option>
<option value="4"></option>
</select>
<div>
<div id="div1">内容一</div>
<div id="div2 " style="display:none">内容二</div>
<div id="div3" style="display:none">内容三</div>
<div id="div4" style="display:none">Not Thing</div>
</div>
$(".j-pactchoose").on('change',function(){
var i = $(this).find("option:selected").val();
if($("#pressDrug"+i).length == 1){
$("#pressDrug"+i).show().siblings(".opt-lessdrug").hide()
}else{
$(".opt-lessdrug").hide()
}
})
常用的插件:1、弹窗: http://mishengqiang.com/sweetalert/ 、http://layer.layui.com/
2、Infinite-Scroll无限滚动加载数据:http://demo.sucaihuo.com/108/
3、图片上传webuploader: http://fex.baidu.com/webuploader/ 和 http://www.jq22.com/jquery-plugins%E4%B8%8A%E4%BC%A0-1-jq
4、分页layui: http://www.layui.com/demo/laypage.html 和 jQuery Pagination分页插件(ZXX): https://www.zhangxinxu.com/jq/pagination_zh/
5、图片延迟加载: http://www.jq22.com/jquery-info390
6、angularjs 链接: https://www.cnblogs.com/ermu-learn/p/5913760.html
7、Vue链接:
8、select多选: http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN#the-position
9、省市联动:http://www.jq22.com/yanshi16612
............等等等 用到在加随时更新
这些都是很常见很常见的,不为了学习,只是找个地方封存起来,直接方便用,要是对你有帮助,也算是尽了一份力
demo:
日常用的css基础和自己常用的js封装的更多相关文章
- sublime Text 3常用Html/Css基础插件安装
前言 sublime以其简洁明了的外观,干脆利落的编辑方式,再加上丰富的功能插件,深受广大开发者的喜爱.今天,我就来介绍几款基于Html/Css开发的sublime插件. 1.Package Cont ...
- 我常用的css基础
mkdir 创建文件夹touch 创建文件mode:'history' ----------------------------------------------------------去除# di ...
- CSS选择器命名及常用命名
CSS选择器命名及常用命名 CSS选择器命名及常用命名 规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个 id 命名为“div1”, ...
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- css基础--常用css属性02
上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1 浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...
- HTML常用标签与CSS基础知识
一.HTML页面结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- HTML&CSS基础-html常用的标签
HTML&CSS基础-html常用的标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
- HTML&CSS基础-常用选择器
HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- DIV+CSS网页布局常用的一些基础知识
CSS命名规范 一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/I ...
随机推荐
- happens-before
happens-before是JMM最核心的概念.对应Java程序员来说,理解happens-before是理解JMM的关键. JMM的设计 首先,让我们来看JMM的设计意图.从JMM设计者的角度,在 ...
- php关于Session和cookie总结
什么是 Cookie? cookie 常用于识别用户.cookie 是服务器留在用户计算机中的小文件.每当相同的计算机通过浏览器请求页面时,它同时会发送 cookie.通过 PHP,能够创建并取回 c ...
- VirtualBox中slitaz系统不能联网
首先,关于VirtualBox虚拟机中安装slitaz操作系统中,先不讲,现在假设电脑中已经装好了VirtualBox,并且已经装好了slitaz操作系统,一个轻量版的linux发行版本. 右上角我画 ...
- easyui-treegrid的案例
1.前台html <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- 选择监听事件ItemListener(是否被选择)
[界面说明] 下拉列表框,选谁谁显示.复选框与单选按钮,输出被选与否的状态.知识点主要代码为: int state = e.getStateChange(); ItemEvent.SELECTED I ...
- Mysql跨表更新
Mysql跨表更新一直是大家所关心的话题,本文介绍mysql多表 update在实践中几种不同的写法,需要的朋友可以参考下 假定我们有两张表,一张表为Product表存放产品信息,其中有产品价格列Pr ...
- PowerDesigner使用(设置继承,实现)
1.File—New Mode 2添加4个class,1个接口(基本的添加工具都在这里面) 3.class1的设置名字,设置方法 3.设置继承,实现 4.编辑class2,class3继承父类的属性. ...
- promise用法详解
es6的promise可谓是异步书写的一大福音,过去异步js书写是函数嵌套函数的方式,promise出现后书写异步js代码就变得美观得多了 以前的写法:回调函数不停嵌套 ajax('/banners' ...
- 在tomcat集群下利用redis实现单点登陆
场景:比如说我们要实现一个集群环境,无非是把多个项目部署到多个tomcat下,然后按照一定的算法,轮询什么的随机访问多个tomcat服务器,但是问题也会有许多,比如说,我们最开始是把登陆人的信息存放到 ...
- DOM-Element对象
一. 整体介绍 这里介绍DOM对象中Element对象. 那么何为Element对象呢?Element对象就是HTML元素,Element对象包括:元素节点.文本节点.属性节点. 下面利用一张图来总 ...