在chrome和edge浏览器打开网页查看源代码时，发现代码没有自动换行，必须通过下方的滚动条来查看超出屏幕的代码，很不方便，解决方法如下： 勾选查看源代码页面的左上角的换行选项即可 …
首先我们网页上要想统一字体其实有两种方法，一种是选择大家操作系统上都有的默认字体，第二种就是强行在网页总载入字体文件来实现，但是非常非常不推荐这样的方式，这样对页面的加载造成了负担，并且没有必要刻意的 …
首先排除代码之间的换行符<br>，出现这个问题是因为图片为内联元素，有文字特性，默认存在间隙，所以会出现空白部分。 可以将图片设置为block元素。 img{ display:block; } 还有种方法就是给父级设置fontsize: …
网上流行护眼色的RGB值和颜色代码 在搜索引擎搜“护眼色”，就会搜出一堆关于保护眼睛的屏幕颜色文章，说的统统是一种颜色，有点像绿豆沙的颜色。方法就是在屏幕设置里， 色调：85；饱和度：123；亮度：205， R: 199; …
方式一：传统方式，父容器relateive，子元素absolute，然后left:50%,再margin-left:-width/2 <div class="ago"> <div class="mid"></div> </div> .ago{ width:400px; height:200px; backgro …
新浪CDN： <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 其它版本：http://lib.sinaapp.com/?path=/jquery 百度CDN： <script src="http://apps.bdimg.com/ …
禁止鼠标右键，把Demo的图片全都设为表格的背景，表格的大小与图片的大小一样。这样做看起来是一样的，主要是防止鼠标经过图片时会出现另存的按钮。禁止鼠标右键的代码很简单： <script LANGUAGE="JavaScript"> …
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" hr …
一、position：fixed 锁定位置（相对于浏览器的位置），例如有些网站的右下角的弹出窗口。 示例： 二、position：absolute 绝对位置： 1.外层没有position：absolute（或relative）；那么div相对于浏览器定位， …
在使用swiper过程中，发现a链接失效，经过查找分析发现是由于没有设置一个参数preventClicks，该参数默认的值是ture， 如果需要加入a链接需要设置preventClicks的值为false preventClicks:false <script type="te …
效果如图： 参考代码如下 p { margin: 4px; } a[href^="http:"] { background: url(images/window.gif) no-repeat left center; padding-left: 18px; } /*匹配所有的有效超链接*/ a[href$="pdf"] { background: url( …
考核内容: js 删除对象属性的应用 解题思路: 删除对象属性 我们可以使用 delete 关键字来删除 JSON 对象的属性： delete 操作符用于删除对象的某个属性；如果没有指向这个属性的引用，那它最终会被释放。 返回值 对 …
bootstrap4示例模板中出现这样的代码 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 这行代码的作用可以让网页的宽度自动适应手机屏幕的宽度，但是多了shrink-to- …
这篇文章会记录我们平时常用到的 CSS 片段，使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的，欢迎收藏转载： 清除浮动 浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中 …
动画效果参考连接：http://www.webhek.com/post/css-loaders.html 效果如下： 以上这些效果都是用一个div加css3动画实现的，看起来效果似乎不错。如果不考虑IE9兼容性的话，有一定的使用价值。 css3，canvas等实现的 …
直接上代码 <style type="text/css"> .title { position: relative; font-size: 32px; color: #fff; height: 45px; line-height: 45px; text-align: center; top: 60px; } .title:before { content: ""; posit …
最近要实现一个类似下面的层叠的效果，需要带一个hover 缓动效果。 第一反应就是直接使用:before&:after伪元素，配合绝对定位加z-index 轻松实现，实际操作发现并不是这么一回事。 代码如下 .box{ width:100px; …
jQuery 自 2006 年诞生以来，一个发行了 1.x、2.x、3.x 这三个大版本。而在这三个大版本下又细分了许多小版本。可能有些小伙伴不太清楚这些版本有什么区别？实际开发中应该选用哪个版本？下面我对其做个总结。 一、1 …
iframe设置height为100%无效，实际是因为父空间高度没有设置的问题。 代码如下 <body> <iframe id="content" src="main.do" name="content" frameborder="0" scrolling="no" height="100%" width="100% …
有些朋友会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于垂直居中呢，很简单，就是在图片和文字所在的行中添加CSS属性：vertical-align:middle;这样，它们在同一 …
图片img下方出现空隙，且找不到空隙被哪一个元素占用，无缘无故多了空隙，影响样式设计，有以下几种解决方法： 1，给<img>元素添加样式：display:block; <img style="display: block" src="../img/banner_i …
HTML的头部内容特别多，有针对SEO的头部信息，也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容，除了平常 …
1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑： .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY( …