在chrome和edge浏览器打开网页查看源代码时，发现代码没有自动换行，必须通过下方的滚动条来查看超出屏幕的代码，很不方便，解决方法如下： 勾选查看源代码页面的左上角的换行选项即可
首先我们网页上要想统一字体其实有两种方法，一种是选择大家操作系统上都有的默认字体，第二种就是强行在网页总载入字体文件来实现，但是非常非常不推荐这样的方式，这样对页面的加载造成了负担，并且没有必要刻意的用特殊字体。 根据不同的操作系统推荐对应使用以下的字体：（系统：英文常用字体；中文常用字体） Windows：Tahoma 和 Arial；微软雅黑（Microsoft yahei）； Mac OS 和 IOS：Helvetica；华文细黑（STXihei）、冬青黑体（Hiragino Sans GB）和苹方（Ping…
首先排除代码之间的换行符<br>，出现这个问题是因为图片为内联元素，有文字特性，默认存在间隙，所以会出现空白部分。 可以将图片设置为block元素。 img{ display:block; } 还有种方法就是给父级设置fontsize:0，logo先不设置block
网上流行护眼色的RGB值和颜色代码 在搜索引擎搜“护眼色”，就会搜出一堆关于保护眼睛的屏幕颜色文章，说的统统是一种颜色，有点像绿豆沙的颜色。方法就是在屏幕设置里， 色调：85；饱和度：123；亮度：205， R: 199; G: 237; B:204; 颜色代码是： #C7EDCC 1.电脑管家的护眼色 方法:（可以通过QQ截图查看当前的颜色值） R: 204 G: 232 B: 207 2.WPS的护眼色 R: 110 G: 123 B: 108
方式一：传统方式，父容器relateive，子元素absolute，然后left:50%,再margin-left:-width/2 <div class="ago"> <div class="mid"></div> </div> .ago{ width:400px; height:200px; background:#ccc; position:relative; } .mid{ width:50px; height:50px; background:red; po…
新浪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/libs/jquery/1.9.1/jquery.min.js"></script> 其它版本：http://cdn.cod…
禁止鼠标右键，把Demo的图片全都设为表格的背景，表格的大小与图片的大小一样。这样做看起来是一样的，主要是防止鼠标经过图片时会出现另存的按钮。禁止鼠标右键的代码很简单： <script LANGUAGE="JavaScript"> function click() { if (event.button==2) {alert(您无法使用右键下载图片：）); } } document.onmousedown=click </script> <script language="javascr…
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme…
一、position：fixed 锁定位置（相对于浏览器的位置），例如有些网站的右下角的弹出窗口。 示例： 二、position：absolute 绝对位置： 1.外层没有position：absolute（或relative）；那么div相对于浏览器定位，如下图中b（距离浏览器右边框为50像素，距离下边框为20像素）。 2.外层有position：absolute（或relative）；那么div相对于外层边框定位，如下图中bb（距离d的右边框50像素，距离d的下边框为20像素）。 示例： 三、posit…
在使用swiper过程中，发现a链接失效，经过查找分析发现是由于没有设置一个参数preventClicks，该参数默认的值是ture， 如果需要加入a链接需要设置preventClicks的值为false preventClicks:false <script type="text/javascript"> var swiper = new Swiper('.downbannner .swiper-container', { pagination: '.swiper-pagination', pagin…
效果如图： 参考代码如下 p { margin: 4px; } a[href^="http:"] { background: url(images/window.gif) no-repeat left center; padding-left: 18px; } /*匹配所有的有效超链接*/ a[href$="pdf"] { background: url(images/icon_pdf.gif) no-repeat left center; padding-left: 18px; } /*匹配所有的pdf文件*/ …
考核内容: js 删除对象属性的应用 解题思路: 删除对象属性 我们可以使用 delete 关键字来删除 JSON 对象的属性： delete 操作符用于删除对象的某个属性；如果没有指向这个属性的引用，那它最终会被释放。 返回值 对于所有情况都是true，除非属性是一个自己不可配置的属性，在这种情况下，非严格模式返回 false。 所以返回的是 布尔型数据
bootstrap4示例模板中出现这样的代码 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 这行代码的作用可以让网页的宽度自动适应手机屏幕的宽度，但是多了shrink-to-fit=no， 这是什么鬼？查找文档得知，主要是为了兼容iOS9 Viewport meta tags using "width=device-width" cause the page to scale …
这篇文章会记录我们平时常用到的 CSS 片段，使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的，欢迎收藏转载： 清除浮动 浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也是兼容性最好的一种是，在同级目录下再创建一个<div style="clear:both;"></div>；不过这样会增加很多无用的代码。此时我们用:after这个伪元素来解决浮动的问题，如果当前层级有浮动元素，那么在其父级添加上 clearfix 类即可。 // 清除…
动画效果参考连接：http://www.webhek.com/post/css-loaders.html 效果如下： 以上这些效果都是用一个div加css3动画实现的，看起来效果似乎不错。如果不考虑IE9兼容性的话，有一定的使用价值。 css3，canvas等实现的各种炫酷动画可参考网站：https://www.html5tricks.com/tag/loading动画/ 1.第一个动画的实现 我们来看一看第一个三条杠加载动画的实现代码 <style> body{ background: #56b4ab…
直接上代码 <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: ""; position: absolute; width: 28px; height: 2px; top: 50%; background-col…
最近要实现一个类似下面的层叠的效果，需要带一个hover 缓动效果。 第一反应就是直接使用:before&:after伪元素，配合绝对定位加z-index 轻松实现，实际操作发现并不是这么一回事。 代码如下 .box{ width:100px; height:100px; position:relative; z-index:2; box-shadow:0 3px 5px #eee; background-color:#fff; } .box:before{ content:""; position:abs…
jQuery 自 2006 年诞生以来，一个发行了 1.x、2.x、3.x 这三个大版本。而在这三个大版本下又细分了许多小版本。可能有些小伙伴不太清楚这些版本有什么区别？实际开发中应该选用哪个版本？下面我对其做个总结。 一、1.x、2.x、3.x 三大系列的区别 1，IE 的支持情况比较 （1）情况分析 1.x：支持 ie6、ie7、ie8,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日) 2.x：不兼容ie678，很少有人…
iframe设置height为100%无效，实际是因为父空间高度没有设置的问题。 代码如下 <body> <iframe id="content" src="main.do" name="content" frameborder="0" scrolling="no" height="100%" width="100%"></iframe> </body> 追加css，设置html跟body高度为100%，即可全屏显示iframe html,body { …
有些朋友会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于垂直居中呢，很简单，就是在图片和文字所在的行中添加CSS属性：vertical-align:middle;这样，它们在同一行就会垂直居中对齐了。 <!DOCTYPE html> <html> <head> <title>让同一行内的图片和文字垂直居中对齐</title> <meta http-equiv="Content-Type" content=…
图片img下方出现空隙，且找不到空隙被哪一个元素占用，无缘无故多了空隙，影响样式设计，有以下几种解决方法： 1，给<img>元素添加样式：display:block; <img style="display: block" src="../img/banner_index.png"/> 2,给<img>元素添加样式：vertical-align:bottom，vertical-align:middle，vertical-align:top三个其中一个 <img style=…
HTML的头部内容特别多，有针对SEO的头部信息，也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容，除了平常的项目开发，HTML 头部标签功能，特别是meta，link等标签的功能属性显得非常重要。这里整理了一份 <head> 部分的清单，让大家了解每个标签及相应属性的意义，写出满足自己需求的 <head> 头部标签，可以很有效的增强页面的可用性。 <!doctype html> …
1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑： .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } 使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对Transform…
