日常用的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 ...
随机推荐
- ThinkPHP5 隐藏index.php问题
隐藏index.php 可以去掉URL地址里面的入口文件index.php,但是需要额外配置WEB服务器的重写规则. 以Apache为例,需要在入口文件的同级添加.htaccess文件(官方默认自带了 ...
- [CF1091D]New Year and the Permutation Concatenation
link 题目大意 给$n!$个$n$的排列,按字典序从小到大连成一条序列,例如$3$的情况为:$[1,2,3, 1,3,2, 2,1,3 ,2,3,1 ,3,1,2 ,3,2,1]$,问其中长度为$ ...
- hiho一下 第144周(机会渺茫)解题报告及拓展
题目1 : 机会渺茫 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi最近在追求一名学数学的女生小Z.小Z其实是想拒绝他的,但是找不到好的说辞,于是提出了这样的要求: ...
- Solr各个版本重大变化之安装方式【请别违背规律】
这里主要讲安装方式的变化 4.x~5.x的变化 这是4.x的安装方式,大家都熟知,在我看来未免繁琐了一点. 或许官方也感觉繁琐了,于是5.x有个最大的改变.↓ 现在Solr是一个独立的服务器 什么叫S ...
- http原理详解
http原理详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.OSI和TCP/IP协议. 我们知道在我们计算机中的网络通信有两个模型,一个是ISO组织的OSI模型,另一个是T ...
- 函数和常用模块【day05】:文件目录开发规范(七)
本节内容 1.背景 2.设计目录结构的好处 3.关于readme的内容 4.关于requirements.txt和setup.py 5.关于配置文件的使用方法 一.背景 "设计项目目录结构& ...
- 解决vue <router-link>在IE与火狐上点击失效(路由不跳转)问题
<router-link to="/GoAbroad"> </router-link> vue中的<router-link>这种声明式的路由方式 ...
- 原生js轮播图实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Gym - 100085G - GCD Guessing Game
原题链接 题意一个数字x在1-n之间,现在猜数字,每次猜一个数字a,告知gcd(x, a)的答案,问最坏情况下需要猜几次 分析 考虑素数.当猜的数为一组素数的乘积时,就可以把这些素数都猜出来.那么答案 ...
- bzoj千题计划302:bzoj3160: 万径人踪灭
https://www.lydsy.com/JudgeOnline/problem.php?id=3160 不连续的回文串数量=所有的回文序列数量-连续的回文子串 连续的回文子串: manacher ...