margin-left | 易学教程

jQuery实现密码强度检测

阅读更多关于 jQuery实现密码强度检测

jQuery普遍运用于JAVA_WEB前端，可以说jQuery的运用无处不在，学好jQuery，对于一个程序员来说是必由之路。下面简单介绍一下jQuery实现密码强度检测。如图所示：核心代码：第一步：css样式： /** 清除内外边距 **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ /* table elements 表格元素 */ img/* img elements 图片元素 */{ border:medium none; margin: 0; padding: 0; } input::-ms-clear{display:none;} /** 设置默认字体 **/ body,button, input, select, textarea { font-family:微软雅黑, Verdana, Geneva, sans-ser;

CSS 公共样式分享

阅读更多关于 CSS 公共样式分享

global.css | reset.css（格式化样式） common.css（公共组件样式） layout.css（当前页面样式）清除全站所有页面的浏览器默认样式，保证在初始样式在所有浏览器下一致。 common.css（公共组件样式）一般一个网站所有页面头部、底部样式都是一致的，而且很长时间不会有大的改变，改变的大概就是产品、运营的经常需要添加、去掉某些入口的需求，要保证全站所有页面头部一次替换生效，只要把头文件，已经对应的样式一发，马上生效，很快就有响应。比如翻页、表单（输入框、按钮）等样式也是全站统一的，把这些样式都放到common.css里面，如果哪天所有的按钮样式要变更，一次替换就成功了。 layout.css（当前页面样式）公共组件以外的所有样式都写到这个样式文件里面，并且保证一个页面一个独立样式，页面html和css写法要模块化，保证迅速响应项目频繁的迭代。为什么要保证一个页面一个独立样式，而且要模块化，肯定有朋友和我有过一样的经历，修改一行样式代码，整个页面甚至N个页面都会受影响，搞了半天还不知道哪里出了问题，返回到修改前的版本，就没问题了。终于找到原因了，却不能改以前的样式，更不能删除，只能增加，时间一长，css样式文件越来越大，最后是不堪重负，整个页面代码只能重写。其实global.css和common.css也可以合并到一个文件

轮播的实现

阅读更多关于轮播的实现

　　轮播是学习jquery开始的第二个实现的动效，也是学习时间最久的一个。在实现轮播的过程中总是会遇到各种各样的问题，请教过很多人，也多次问过度娘。今天，也不敢果敢的说，可以马上写好一个轮播。希望是通过随笔的方式，记录下一些思维过程。　　首先是html结构，一个简单的轮播，单张图片无缝轮播，主要分为三大层：div>ul>li，li里面的img图片。　　其次，css样式：div固定住宽高，overflow：hidden；ul的宽度建议是动态获取（下一步会讲是怎么获取）；关于li我习惯使用浮动，让他们依次排列，在ul上要记得清楚浮动（clear：both）。　　重要的是jquery的方法，主要有用到的有animate（），setInterval（），hover（）。在写方法之前，缕清一下动效的逻辑：图片依次循环自右向左滑过，当滑完最后一张时，第一张显示，如此重复。　　1、获取li的个数length和宽度width var len=$('li').length, liWidth=$('li').width, 　　因为是无缝轮播，要实现自然的过渡，我们还得做点什么，当图片滑到最后一张时，怎么样才会很自然的过渡到第一张，这个时候，如果第一张就在最后一张的后面，就可以了，所以，我们需要将第一张clone后append到li的最后 $('li:first').clone()

4. int()和float()从字符串中取值误区

阅读更多关于 4. int()和float()从字符串中取值误区

<!DOCTYPE html> Untitled3 */ /*--> */ */ /*--> */ */ /*--> */ <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-AMS_HTML"></script>  <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\$","\$"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true, processEnvironments: true }, // Center justify equations in code and markdown cells. Elsewhere // we use CSS to left justify single line equations in code cells. displayAlign: 'center', "HTML-CSS": { styles: {'.MathJax

插入css样式表的三种方法

阅读更多关于插入css样式表的三种方法

http://www.w3school.com.cn/css/css_howto.asp http://www.runoob.com/css/css-howto.html 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部： <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子： hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} 不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。内部样式表

ol li 不显示编号

阅读更多关于 ol li 不显示编号

第一种可能性是样式重置导致去掉list-style:none; 第二种可能性是设置了*{margin:0;padding:0} 可以在需要的位置加上margin-left:10px;(根据自己需要设定) 有序列表需要一定的边距才可以设置的 ul>li{ margin-left:30px; list-style-type: disc; } ol>li{ margin-left: 30px; list-style: decimal; } 来源： https://www.cnblogs.com/why98/p/12243255.html

html/css-仿写百度搜索首页

阅读更多关于 html/css-仿写百度搜索首页

html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="baibuA.css"> </head> <body> <div class="content"> <div class="top"> <ul> <li><a href="#"class="a1">新闻</a></li> <li><a href="#"class="a1">hao123</a></li> <li><a href="#"class="a1">地图</a></li> <li><a href="#"class="a1">视频</a></li> <li><a href="#"class="a1">贴吧</a></li> <li><a href="#"class="a1">学术</a></li> <li><a href="#">登录</a></li> <li><a href="#">设置</a></li> <li><a href="#" class="more">更多产品</a></li> </ul> </div> <div class="middle"> <img src="images/百度.gif" alt="" class=

【经典面试题】圣杯布局以及双飞翼布局原理

阅读更多关于【经典面试题】圣杯布局以及双飞翼布局原理

什么是圣杯布局以及双飞翼布局上图就是一个经典的圣杯布局和双飞翼布局的模型，即三列结构，左右两边定宽，中间自适应，能根据屏幕大小做响应。实现方式浮动(经典方式) 在介绍这种方式之前要先说一下margin设置负值的作用： margin-top / margin-left 设置负值会将元素拉入对应位置可以看到，当margin-top负值增大时，元素也跟着上移了，margin-left同理，负值增大会左移，两者都会导致元素溢出视口 margin-right / margin-bottom 设置负值会让后续元素拉入上图看到当margin-right增大时，元素本身不变，后续元素会跟过来并覆盖本元素，margin-bottom同理，负值增大时后续元素会上移并覆盖。如何实现先给出html结构，注意中间自适应的center元素放在最前面： <body> <div id="header">#header</div> <div id="container"> <div id="center" class="column">#center</div> <div id="left" class="column">#left</div> <div id="right" class="column">#right</div> </div> <div id="footer">#footer<

vue中v-bind使用三目运算符绑定class

阅读更多关于 vue中v-bind使用三目运算符绑定class

<template> <div>  <div :class="projectStatus === 2?outlineDelay:outline" @click="clickProject(userProjectId)">  <div v-if="projectStatus === 2" class="delay">{{delay}}</div>  <div><img class="picture item" :src="pictureName" /></div>  <div class="projectName">{{ projectName | ellipsis }}</div>  <div class="userName"> {{ gradeName }} </div> </div> </div> </template> data () { return { delay: '延期', // 延期状态显示的字段 outline: 'outline', // 非延期状态的外边框样式 outlineDelay: 'outlineDelay' // 延期状态的外边框样式 } }, <style scoped> /* 外边框样式 */ .outline {

web前端入门到实战：CSS实现雨滴动画效果

阅读更多关于 web前端入门到实战：CSS实现雨滴动画效果

玻璃窗今天我们要实现的是雨滴效果，不过实现雨滴前，我们先把毛玻璃的效果弄出来，没有玻璃窗，雨都进屋了，还有啥好敲打的。 <div class='window'></div> .window { position: absolute; width: 100vw; height: 100vh; background: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg"); background-size: cover; background-position: 100%; filter: blur(10px); } 其实就是给一张图片，做了个模糊化的效果，看起来像毛玻璃的效果一滴雨雨滴的效果就很巧妙了，让我们看下一滴雨完整的效果图这滴雨其实分为两个部分，第一部分是底部的阴影部分，其实是个边框来的，代码如下：专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划） .border { position: absolute; margin-left: 92px; margin-top: 51px; border-radius: 100%;

订阅 margin-left