日常用的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="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="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="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: $.方法名()
		 * */
		//验证手机号
		/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
	})
})(jQuery);

/*
 * Img:要放图片的img元素，onload时传参可用this
 * maxHeight  :img元素的高度，像素（图片框 最大高度）
 * maxWidth:img元素的宽度，像素（图片框 最大宽度）
 * eg: <img src="" />
 * */
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="" />
 * */
/*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";
  	}
}

常用的插件：1、弹窗sweetAlert：  http://mishengqiang.com/sweetalert/

　　　　　　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链接:

　　　　　　............等等等 用到在加随时更新

这些都是很常见很常见的，不为了学习，只是找个地方封存起来，直接方便用，要是对你有帮助，也算是尽了一份力

demo：

原文地址：https://www.cnblogs.com/wuchuanlong/p/9298228.html

时间： 2024-08-30 02:53:52

日常用的css基础和自己常用的js封装的相关文章

sublime Text 3常用Html/Css基础插件安装

1.Package Contorl 包安装 Package Contorl:由Sublime Text提供的绝对必要的包管理器. 1.按Ctrl+`打开console. 2.粘贴一下代码到底部命令行并回车 import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-packag

0基础学习前段历程2 第一门需要掌握的前端技术HTML5+CSS3 CSS基础知识，常用样式详细解读

#### CSS属性值background背景 -   背景颜色 - background-image:url(  );背景图片 - background-repeat:no-repeat; 设置背景图片是否平铺 - repeat:平铺,默认值 - no-repeat 不平铺 - background-size:100px 60px;设置图片的大小,值X/Y,可用单位百分比像素 - background-position:100px 60px;设置图片的位置,值X/Y,可用单位百分比像素,英文单

CSS选择器命名及常用命名

CSS选择器命名及常用命名 CSS选择器命名及常用命名 规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个 id 命名为"div1",另外一个命名为"News",肯定第二个比较易读,而且搜索引擎抓取率要高,在团队合作中还可以大大提高工作效率.为了达到这种效果我们就要规范化命名(语义化命名)! 说个题外话,规范化命名的代码,会显着你更加专业! 关于CSS命名法,和其他的程序命名差不多,主要有三种:骆驼命

DIV+CSS网页布局常用的一些基础知识整理

CSS命名规范一．文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二．常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer 版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu 标 志:logo标 语:banner标 题:title侧边栏:sidebar 图 标:Icon注 释:note

css基础--常用css属性02

上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. 我的理解是:浮动将元素‘上浮’一层,并保留元素在上层对下层的投影的位置. 请注意: 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动. 一个浮动元素会尽量向

EasyUI常用组件（基础）

---------------------------------------------------------------------------------------------------------------[版权申明:本文系作者原创,转载请注明出处]文章出处:http://blog.csdn.net/sdksdk0/article/details/51914553作者:朱培    ID:sdksdk0----------------------------------------

常用的CSS框架

常用的CSS框架 之前在写自己的个人网站的时候,由于自己Web前端不是特别好,于是就去找相关的CSS框架来搭建页面了. 找到以下这么一篇文章(列出了很多常用的CSS框架): http://w3schools.wang/report/top-UI-open-source-framework-summary.html Bootstrap Semantic-ui Foundation Materialize Material-ui Phantomjs Pure Flat-ui Jquery-ui Re

Linux 系统基础优化和常用命令

目录 Linux 系统基础优化和常用命令 软连接 tar解压命令 gzip命令 netstart命令 ps命令 kill命令 killall命令 SELinux功能 iptables防火墙 Linux中文显示设置(防止中文乱码) df 命令 tree命令 设置主机名 DNS 查看Linux的dns, 唯一配置文件 本地强制dns解析文件 /etc/hosts nslookup命令 计划任务crond服务 软件包管理 windows程序 macos程序 RPM软件包管理器 实例 rpm安装软件 r

Linux基础系统优化及常用命令

# Linux基础系统优化及常用命令 [TOC] ## Linux基础系统优化 Linux的网络功能相当强悍,一时之间我们无法了解所有的网络命令,在配置服务器基础环境时,先了解下网络参数设定命令. - ifconfig 查询.设置网卡和ip等参数- ifup,ifdown 脚本命令,更简单的方式启动关闭网络- ip 符合指令,直接修改上述功能 ```bash在我们刚装好linux的时候,需要用xshell进行远程连接,那就得获取ip地址,有时候网卡默认是没启动的,Linux也就拿不到ip地址,因