1. css基础:base
  2. /*
  3. * 初始化
  4. */
  5. *::after, *::before {
  6. box-sizing: border-box;
  7. }
  8. body {
  9. font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB', \5b8b\4f53, sans-serif;
  10. background: #fff;
  11. }
  12. html{
  13. -ms-text-size-adjust: 100%;
  14. -webkit-text-size-adjust: 100%;
  15. font-size: 62.5%;
  16. }
  17. body,
  18. h1,
  19. h2,
  20. h3,
  21. h4,
  22. h5,
  23. h6,
  24. hr,
  25. p,
  26. blockquote,
  27. dl,
  28. dt,
  29. dd,
  30. ul,
  31. ol,
  32. li,
  33. pre,
  34. form,
  35. fieldset,
  36. legend,
  37. button,
  38. input,
  39. textarea,
  40. th,
  41. td,
  42. s,a,div {
  43. margin: 0;
  44. padding: 0;
  45. }
  46.  
  47. li {
  48. list-style: none;
  49. }
  50.  
  51. img {
  52. display: inline-block;
  53. }
  54.  
  55. em {
  56. font-style: normal;
  57. }
  58. /* a */
  59. .trans{
  60. transiton:all 0.3s;
  61. -moz-transition:all 0.3s;
  62. -webkit-transition:all 0.3s;
  63. -ms-transition:all 0.3s;
  64. }
  65. a:focus {
  66. outline: none;
  67. }
  68. a,
  69. a:hover {
  70. text-decoration: none;
  71. }
  72.  
  73. a:visited,
  74. a:link {
  75. text-decoration: none;
  76. }
  77.  
  78. /* 元素i、select、input、textarea、button */
  79. i {
  80. vertical-align: middle;
  81. }
  82.  
  83. i,
  84. label,
  85. input[type='checkbox'] {
  86. vertical-align: middle;
  87. }
  88.  
  89. select {
  90. line-height: 24px !important;
  91. height: 30px !important;
  92. padding: 4px 2px !important;
  93. }
  94.  
  95. input {
  96. font-size: 14px;
  97. display: inline-block;
  98. overflow: hidden;
  99. height: 30px !important;
  100. line-height: 28px !important;
  101. padding-left: 5px;
  102. vertical-align: middle;
  103. color: #333;
  104. border: 1px solid #dcdcdc;
  105. border-radius: 0;
  106. background-color: #fff;
  107. }
  108.  
  109. input[type='button'] {
  110. height: auto !important;
  111. padding: 4px 24px !important;
  112. }
  113.  
  114. input[type='checkbox'],
  115. input[type='radio'] {
  116. height: auto !important;
  117. padding: 0 !important;
  118. border: none;
  119. }
  120.  
  121. .form-control[readonly] {
  122. opacity: 1;
  123. background-color: #f5f5f5;
  124. }
  125.  
  126. textarea {
  127. overflow-y: auto;
  128. padding: 4px 6px !important;
  129. resize: none;
  130. transition: border .2s linear 0s, box-shadow .2s linear 0s;
  131. color: #333;
  132. border: 1px solid #dcdcdc;
  133. border-radius: 4px;
  134. background-color: #fff;
  135. box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset;
  136. }
  137.  
  138. textarea:focus {
  139. outline: 0 none;
  140. }
  141. /*浮动*/
  142. .pull-left{
  143. float: left;
  144. }
  145. .pull-right{
  146. float: right;
  147. }
  148.  
  149. /*清除浮动*/
  150. .clearfix::after,
  151. .clearfix::before,
  152. .form-group::after,
  153. .form-group::before {
  154. content: " ";
  155. display: table;
  156. }
  157. .clearfix,.clearfix::after,
  158. .form-group,.form-group::after{
  159. clear: both;
  160. }
  161.  
  162. /* 公用样式
  163. *==================================================================
  164. */
  165. .width1200 {
  166. width: 1200px !important;
  167. }
  168. /* 居中 */
  169.  
  170. .m-c {
  171. margin: 0 auto;
  172. }
  173.  
  174. /* 对齐方式 */
  175. .t-c-f {
  176. text-align: center !important;
  177. }
  178.  
  179. .t-l-f {
  180. text-align: left !important;
  181. }
  182.  
  183. .t-r-f {
  184. text-align: right !important;
  185. }
  186. /* 省略 */
  187. .el-sl {
  188. display: inline-block;
  189. overflow: hidden;
  190. vertical-align: middle;
  191. white-space: nowrap;
  192. text-overflow: ellipsis;
  193. }
  194.  
  195. /* 文字大小 */
  196. .f12 {
  197. font-size: 12px;
  198. }
  199.  
  200. .f14 {
  201. font-size: 14px;
  202. }
  203.  
  204. .f16 {
  205. font-size: 16px;
  206. }
  207.  
  208. .f18 {
  209. font-size: 18px;
  210. }
  211. .f22{
  212. font-size:22px;
  213. }
  214. .f24{
  215. font-size:24px;
  216. }
  217. .f28{
  218. font-size:28px;
  219. }
  220.  
  221. .b {
  222. font-weight: bold;
  223. }
  224.  
  225. .b-n {
  226. font-weight: normal;
  227. }
  228.  
  229. /* 颜色值
  230. * ===============
  231. */
  232.  
  233. .white {
  234. color: #fff;
  235. }
  236. .white-bg {
  237. background: #fff;
  238. }
  239. .dark {
  240. color: #000;
  241. }
  242.  
  243. .gray333 {
  244. color: #333;
  245. }
  246.  
  247. .gray333-bg {
  248. background: #333;
  249. }
  250.  
  251. .gray999 {
  252. color: #999;
  253. }
  254.  
  255. .gray999-bg {
  256. background: #999;
  257. }
  258.  
  259. .gray666 {
  260. color: #666;
  261. }
  262.  
  263. .gray666-bg {
  264. background: #666;
  265. }
  266.  
  267. /* 图标大全
  268. *====================================
  269. */
  270. .i-all {
  271. display: inline-block;
  272. background: url(../../img/icon/i_all.png) no-repeat;
  273. }
  274.  
  275. /*删除*/
  276. .i-del {
  277. width: 13px;
  278. height: 15px;
  279. background-position: -61px -17px;
  280. }
  281. .i-del:hover,
  282. .i-del.active,
  283. .i-del-h {
  284. width: 13px;
  285. height: 15px;
  286. background-position: -55px -33px;
  287. }
  288. /*
  289. *弹窗
  290. */
  291. .c-modalBg {
  292. position: fixed;
  293. z-index: 10;
  294. top: 0;
  295. left: 0;
  296. display: none;
  297. width: 100%;
  298. height: 100%;
  299. background: rgba(0, 0, 0, .5);
  300. }
  301.  
  302. .c-modalBox {
  303. position: fixed;
  304. z-index: 12;
  305. top: 50%;
  306. left: 50%;
  307. display: none;
  308. /* margin-top: 150px;*/
  309. margin-left: -250px;
  310. border-radius: 5px;
  311. background: #fff;
  312. }
  313.  
  314. .c-modalBox .c-modalBox-title {
  315. font-weight: bold;
  316. line-height: 48px;
  317. width: 100%;
  318. height: 48px;
  319. color: #333;
  320. border-bottom: 1px solid #e8e8e8;
  321. border-radius: 5px 5px 0 0;
  322. background: #fafafa;
  323. }
  324. .c-modalBox .c-modalBox-title .i-close {
  325. font-size: 36px;
  326. font-style: normal;
  327. font-weight: lighter;
  328. }
  329. /*
  330. *
  331. *tipsBox 提示框
  332. */
  333. .tipsBox{
  334. width:200px;
  335. position:fixed;
  336. top:25%;
  337. left:50%;
  338. margin-left:-90px;
  339. z-index:999999;
  340. }
  341. .tipub{
  342. padding: 10px;
  343. border-radius:4px;
  344. -webkit-border-radius: 4px;
  345. -moz-border-radius: 4px;
  346. box-shadow:0 0 3px #ddd inset;
  347. -webkit-box-shadow: 0 0 3px #ddd inset;
  348. }
  349. .tipsBox .bgcolok{
  350. background-color:#4AAF33;
  351. }
  352. .tipsBox .bgcolerror{
  353. background-color:#EB6B62;
  354. }
  355. .tipsBox .bgcolwarn{
  356. background-color:#F7BA86;
  357. }
  358. .tipsBox img{
  359. vertical-align: middle;
  360. margin-right:5px;
  361. margin-top: -4px !important;
  362. }

JS基础:

  

  1. (function($){
  2. //$.fn.extend({}) 对象实例来调用此方法 $("").方法名()
  3. $.fn.extend({
  4. /*
  5. 剩余输入字数
  6. num:要输入的字数总个数
  7. * eg:$(".length100").getTextLen(100)
  8. * $(".length100").getTextLen(1000)
  9. * */
  10. getTextLen: function(num) {
  11. var _num = num;
  12. var timer = null;
  13. $(this).on('mouseover', function() {
  14. clearInterval(timer);
  15. $(this).attr('maxLength', _num);
  16. var _this = $(this);
  17. timer = setInterval(function() {
  18. var thisVal = _this.val();
  19. if (thisVal.length > _num) {
  20. thisVal = thisVal.substring(0, _num);
  21. _this.val(thisVal);
  22. }
  23. _this.parent().find('.leng').text(thisVal.length);
  24. }, 30);
  25. });
  26. $(this).mouseover();
  27. },
  28.  
  29. });
  30.  
  31. //$.extend({}) 直接用jQuery类即可引用 $.方法名()
  32. $.extend({
  33. /*
  34. *
  35. *提示框,
  36. *目前三个参数 txt:要显示的文本;times:自动关闭的时间(不设置的话默认1500毫秒) status:状态,
  37. *eg: $.showTips('请输入文本提示'); $.showTips('提交成功~ 即将进入下一步',1500,1);
  38. *
  39. */
  40. showTips:function(txt,times,status){
  41. var showHtml = "";
  42. if(txt != ""){
  43. if(status == 1 && status !=undefined){
  44. console.info("1111");
  45. showHtml = '<div class="tipsBox t-c-f white">'+
  46. '<div class="bgcolok tipub"><img src="data:images/ok.png" alt="OK" />'+txt+'</div>'+
  47. '</div>';
  48. }else if(status == 2){
  49. showHtml = '<div class="tipsBox t-c-f white">'+
  50. '<div class="bgcolerror tipub"><img src="data:images/error.png" alt="error" />'+txt+'</div>'+
  51. '</div>';
  52. console.info("222");
  53. }else{
  54. showHtml = '<div class="tipsBox t-c-f white">'+
  55. '<div class="bgcolwarn tipub"><img src="data:images/warn.png" alt="warn" />'+txt+'</div>'+
  56. '</div>';
  57. console.info("other");
  58. }
  59. }
  60. $("body").prepend(showHtml);
  61. if(times == "" || times == undefined){
  62. //默认消失时间 1.5s
  63. times = 1500;
  64. }
  65. setTimeout(function(){
  66. $(".tipsBox").remove();
  67. },times)
  68. },
  69. /*
  70.  
  71. * 常用正则
  72. * eg: $.方法名()
  73. * */
  74. //手机号
             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;
             }
    //身份证
  75. })
  76. })(jQuery);
  77.  
  78. /*
  79. * Img:要放图片的img元素,onload时传参可用this
  80. * maxHeight :img元素的高度,像素(图片框 最大高度)
  81. * maxWidth:img元素的宽度,像素(图片框 最大宽度)
  82. * eg: <img src="" onload="AutoResizeImage(this,250,300)"/>
  83. * */
  84. function AutoResizeImage(Img, maxWidth, maxHeight) {
  85. var image = new Image();
  86. //原图片原始地址(用于获取原图片的真实宽高,当<img>标签指定了宽、高时不受影响)
  87. image.src = Img.src;
  88. // 当图片比图片框小时不做任何改变
  89. if (image.width < maxWidth&& image.height < maxHeight) {
  90. Img.width = image.width;
  91. Img.height = image.height;
  92. }
  93. else{
  94. //原图片宽高比例 大于 图片框宽高比例,则以框的宽为标准缩放,反之以框的高为标准缩放
  95. if (maxWidth/ maxHeight <= image.width / image.height) {
  96. //原图片宽高比例 大于 图片框宽高比例
  97. Img.width = maxWidth; //以框的宽度为标准
  98. Img.height = maxWidth* (image.height / image.width);
  99. }
  100. else {
  101. //原图片宽高比例 小于 图片框宽高比例
  102. Img.width = maxHeight * (image.width / image.height);
  103. Img.height = maxHeight ; //以框的高度为标准
  104. }
  105. }
  106. }
  107. /*
  108. * 图片比例缩放
  109. * eg: <img src="" onload="scalingImg(this)"/>
  110. * */
  111. /*function scalingImg(obj){
  112. var $this = $(obj);
  113.  
  114. var imgWidth=$this.width();
  115. var imgHeight=$this.height();
  116.  
  117. var parent = $this.parent();
  118. var containerWidth = parent.width();
  119. var containerHeight=parent.height();
  120.  
  121. var containerRatio = containerWidth / containerHeight;
  122. var imgRatio = imgWidth / imgHeight;
  123.  
  124. if (imgRatio > containerRatio) {
  125. imgWidth = containerWidth;
  126. imgHeight = containerWidth / imgRatio;
  127. } else if (imgRatio < containerRatio) {
  128. imgHeight = containerHeight;
  129. imgWidth = containerHeight * imgRatio;
  130. } else {
  131. imgWidth = containerWidth;
  132. imgHeight = containerHeight;
  133. }
  134.  
  135. $this.attr('width',imgWidth);
  136. $this.attr('height',imgHeight);
  137. }*/
  138.  
  139. /*
  140.  
  141. *
  142. * tab切换
  143. * eg:
  144. * */
  145. function setTab(name,cursel,n){
  146. for(i=0;i<=n;i++){
  147. var menu=document.getElementById(name+i);
  148. var con=document.getElementById("con"+name+i);
  149. if(menu == null || con == null)continue;
  150. menu.className=i==cursel?"hover":"";
  151. con.style.display=i==cursel?"block":"none";
  152. }
  153. }

用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封装的更多相关文章

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

    前言 sublime以其简洁明了的外观,干脆利落的编辑方式,再加上丰富的功能插件,深受广大开发者的喜爱.今天,我就来介绍几款基于Html/Css开发的sublime插件. 1.Package Cont ...

  2. 我常用的css基础

    mkdir 创建文件夹touch 创建文件mode:'history' ----------------------------------------------------------去除# di ...

  3. CSS选择器命名及常用命名

    CSS选择器命名及常用命名 CSS选择器命名及常用命名 规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个 id 命名为“div1”, ...

  4. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  5. css基础--常用css属性02

    上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...

  6. HTML常用标签与CSS基础知识

    一.HTML页面结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  7. HTML&CSS基础-html常用的标签

    HTML&CSS基础-html常用的标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  8. HTML&CSS基础-常用选择器

    HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

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

    CSS命名规范 一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/I ...

随机推荐

  1. ThinkPHP5 隐藏index.php问题

    隐藏index.php 可以去掉URL地址里面的入口文件index.php,但是需要额外配置WEB服务器的重写规则. 以Apache为例,需要在入口文件的同级添加.htaccess文件(官方默认自带了 ...

  2. [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]$,问其中长度为$ ...

  3. hiho一下 第144周(机会渺茫)解题报告及拓展

    题目1 : 机会渺茫 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi最近在追求一名学数学的女生小Z.小Z其实是想拒绝他的,但是找不到好的说辞,于是提出了这样的要求: ...

  4. Solr各个版本重大变化之安装方式【请别违背规律】

    这里主要讲安装方式的变化 4.x~5.x的变化 这是4.x的安装方式,大家都熟知,在我看来未免繁琐了一点. 或许官方也感觉繁琐了,于是5.x有个最大的改变.↓ 现在Solr是一个独立的服务器 什么叫S ...

  5. http原理详解

    http原理详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.OSI和TCP/IP协议. 我们知道在我们计算机中的网络通信有两个模型,一个是ISO组织的OSI模型,另一个是T ...

  6. 函数和常用模块【day05】:文件目录开发规范(七)

    本节内容 1.背景 2.设计目录结构的好处 3.关于readme的内容 4.关于requirements.txt和setup.py 5.关于配置文件的使用方法 一.背景 "设计项目目录结构& ...

  7. 解决vue <router-link>在IE与火狐上点击失效(路由不跳转)问题

    <router-link to="/GoAbroad"> </router-link> vue中的<router-link>这种声明式的路由方式 ...

  8. 原生js轮播图实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Gym - 100085G - GCD Guessing Game

    原题链接 题意一个数字x在1-n之间,现在猜数字,每次猜一个数字a,告知gcd(x, a)的答案,问最坏情况下需要猜几次 分析 考虑素数.当猜的数为一组素数的乘积时,就可以把这些素数都猜出来.那么答案 ...

  10. bzoj千题计划302:bzoj3160: 万径人踪灭

    https://www.lydsy.com/JudgeOnline/problem.php?id=3160 不连续的回文串数量=所有的回文序列数量-连续的回文子串 连续的回文子串: manacher ...