CSS Viewport 单位 移动设备上的最小字体大小不应该不于14px，为标题提供最小字体大小.title {     font-size: calc(14px + 2vw); }计算它的等效的 vwvw = (Pixel Value / Viewport width) * 100移动端滚动问题：即使使用100vh，也会滚动，原因是地址栏的高度可见。.my-element {   height: 100vh; /* 不支持自定义属性的浏览器的回退 */   height: calc(var(--vh, 1vh) * 100); }// 首先，我们得到视口高度，我们乘以 1% 得到一个vh单位的值 let vh = window.innerHeight * 0.01; // 然后，将`--vh`自定义属性中的值设置为文档的根目录一个属性 document.documentElement.style.setProperty('--vh', `${vh}px`);{callout color="#f0ad4e"} 来源：CSDN CSS Viewport 单位，很多人还不知道使用它来快速布局！ {/callout}

CSS实现按钮点击水波纹效果 html<button class="btn btn-default btn-lg ripple">Button Ripple</button> <button class="btn btn-default btn-lg boom">Button Boom</button> css.ripple { position: relative; //隐藏溢出的径向渐变背景 overflow: hidden; } .ripple:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; //设置径向渐变 background-image: radial-gradient(circle, #666 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform .3s, opacity .5s; } .ripple:active:after { transform: scale(0, 0); opacity: .3; //设置初始状态 transition: 0s; } .boom { position: relative; //此处不需要设置overflow:hidden,因为after元素需要溢出显示 } .boom:focus{ outline: none; } .boom:after { content: ""; display: block; position: absolute; //扩大伪类元素4个方向各10px top: -10px; left: -10px; right: -10px; bottom: -10px; pointer-events: none; background-color: #333; background-repeat: no-repeat; background-position: 50%; opacity: 0; transition: all .3s; } .boom:active:after { opacity: .3; //设置初始状态 top: 0; left: 0; right: 0; bottom: 0; transition: 0s; } 效果Button RippleButton Boom.ripple {position: relative; overflow: hidden;}.ripple:after {content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background-image: radial-gradient(circle, #666 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform .3s, opacity .5s;}.ripple:active:after {transform: scale(0, 0); opacity: .3; transition: 0s;}.boom {position: relative;}.boom:focus{outline: none;}.boom:after {content: ""; display: block; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; pointer-events: none; background-color: #333; background-repeat: no-repeat; background-position: 50%; opacity: 0; transition: all .3s;}.boom:active:after {opacity: .3; top: 0; left: 0; right: 0; bottom: 0; transition: 0s;}

flex流式布局 每行的项目数固定，会自动分行。.cards { display: flex; flex-flow: row wrap; align-content: flex-start; .card { flex: 0 0 330px; box-sizing: border-box; height: 300px; margin: 10px; } }

CSS文字霓虹灯效果 效果html代码<svg viewBox="0 0 600 300"> <!-- Symbol --> <symbol id="s-text"> <text text-anchor="middle" x="50%" y="50%" dy=".35em"> 文字 </text> </symbol> <!-- Duplicate symbols --> <use xlink:href="#s-text" class="text"></use> <use xlink:href="#s-text" class="text"></use> <use xlink:href="#s-text" class="text"></use> <use xlink:href="#s-text" class="text"></use> <use xlink:href="#s-text" class="text"></use> </svg> css代码body { background: #111; background-size: .2em 100%; font: 14.5em/1 Open Sans, Impact; text-transform: uppercase; margin: 0; } svg { position: absolute; width: 100%; height: 100%; } .text { fill: none; stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 70 330; stroke-dashoffset: 0; -webkit-animation: stroke 6s infinite linear; animation: stroke 6s infinite linear; } .text:nth-child(5n + 1) { stroke: #F2385A; -webkit-animation-delay: -1.2s; animation-delay: -1.2s; } .text:nth-child(5n + 2) { stroke: #F5A503; -webkit-animation-delay: -2.4s; animation-delay: -2.4s; } .text:nth-child(5n + 3) { stroke: #E9F1DF; -webkit-animation-delay: -3.6s; animation-delay: -3.6s; } .text:nth-child(5n + 4) { stroke: #56D9CD; -webkit-animation-delay: -4.8s; animation-delay: -4.8s; } .text:nth-child(5n + 5) { stroke: #3AA1BF; -webkit-animation-delay: -6s; animation-delay: -6s; } @-webkit-keyframes stroke { 100% { stroke-dashoffset: -400; } } @keyframes stroke { 100% { stroke-dashoffset: -400; } }

CSS之Filters滤镜 css提供了很多种的滤镜：* drop-shadow * sepia * blur * hue-rotate * invert * brightness * contrast * opacity * grayscale * saturate drop-shadow 下落式阴影添加阴影效果可不只有text-shadow和box-shadow哦，text-shadow是为文字添加阴影，box-shadow给一个元素添加阴影，drop-shadow在图片是非png情况下和box-shadow有些相似,然而png图片才是她大放异彩的地方拿一张jpg图片来举个栗子看下drop-shadow 和 box-shadow的区别：//从左往右依次是原图，添加drop-shadow-jpg，添加box-shadow .drop-shadow-jpg{ -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74)); } .box-shadow{ box-shadow: 10px 10px 10px rgba(255,235,59,0.74); } drop-shadow明显更柔和一些，并且图片的上面和左边也是有阴影的哦。再来看下drop-shadow在png图片的表现吧，左边为原图：.drop-shadow-png{ -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74)); } 因为png图片背景是透明的，所以drop-shadow直接作用于图片的内容，图中的小女孩是不是更萌了呢。sepia 乌贼墨，深褐色，深棕色想要个老照片效果？.sepia-50{ -webkit-filter: sepia(50%); } .sepia-100{ -webkit-filter: sepia(100%) } //safari浏览器不支持 //参数可以是小数也可以是百分比，为0的时候是左边原图的效果，1或100%是最右的图 blur 模糊背景图片太清晰喧宾夺主了，可以设置模糊的效果啊.blur{ -webkit-filter: blur(3px); } blur用来给图像设置高斯模糊。参数值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，这个值设置为百分比除外的css长度值，默认是0效果为左边的原图，值越大越模糊，上面的图片设置成100px时就什么都没有了。opacity 透明度opacity会调整图片的透明度，这个和非filter中的opacity效果是一样哒，但是并不是一个属性哦，因为他们是可以叠加使用的.opacity-20{ opacity: 0.2; } .filter-opacity-20{ filter:opacity(0.2) } .opacity-both{ opacity: 0.2; filter:opacity(0.2) } 他们接受的参数也是有一些差别的，opacity只能接受小数，filter:opactiy()既可以接受小数也可以接受百分比，值越小越透明。hue-rotate 色相旋转hue-rotate通过改变图片的色相来改变图片.hue-rotate-90{ -webkit-filter: hue-rotate(90deg); } .hue-rotate-270{ -webkit-filter: hue-rotate(270deg); } hue-rotate 参数是一个角度值，他会接受这个值并把图片中的颜色的色相做对应的旋转invert 反转invert会把图片上的所有颜色进行反转，如果是希望做个相机底片效果，真的是太合适了.invert-20{ filter: invert(20%); } .invert-100{ filter: invert(100%) } 和hue-rotate相比，直接反转就用不着接受颜色变化的角度了，但是你可以设置0~100%来控制反转的程度saturate 饱和度色彩三要素色相，明度，饱和度。饱和度也即颜色的纯度，彩度。无彩色的色饱和度为0，也就是上面的grayscale灰度值为1的时候,饱和度越高，颜色中的灰度越低饱和度100%时为原图，接受大于100%的值。brightness 亮度说完了色相和饱和度再来看看brightness,brightness给图片应用一种线性乘法来调整整个图片的亮度，效果和手机电脑上的的亮度调节是一样的.brightness-4{ filter:brightness(40%) } .brightness-8{ filter:brightness(80%) } brightness的参数可以用百分比来表示也可以用小数来表示，当参数值为0的时候整个图片都是黑色的了,超过100%的时候比原图更亮一些contrast 对比度contrast用来调整图像的对比度.contrast-50 { filter: contrast(50%) } .contrast-200{ filter:contrast(200%) } contrast()的参数接受百分比形式的数值也接受小数形式的，值为0 的时候是整个图片都是灰黑色的，为1时是原图，值越大对比度越大，默认值为1。grayscale 灰度模式有格调的灰度模式开启.gray-scale-50{ filter:grayscale(50%) } .gray-scale-100{ filter:grayscale(100%) } grayscale的参数接受百分比和小数，默认参数是100%，完全灰度，1以内的值越大越靠近完全灰度，大于等于1的值的效果是一样哒以上转载自： https://zhuanlan.zhihu.com/p/28422426 ，尊重原创示例黑白效果(function(){ document.querySelector('body').style['filter']='grayscale(100%)'; })() 模糊效果(function(){ document.querySelector('body').style['-webkit-filter']='blur(3px)'; })() 反色效果(function(){ document.querySelector('body').style['filter']='invert(100%)'; })()

让整个网站变成灰色的做法 方法一，html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} <!-- 可以是整个网站变成灰色的 --> 方法二，html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); } 　　使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。 　　如果网站没有使用CSS，可以在网页/模板的HTML代码和 之间插入：<style> html{filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1);} </style> 有一些站长的网站可能使用这个css 不能生效，是因为网站没有使用最新的网页标准协议<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 请将网页最头部的替换为以上代码。有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的<object …>和之间插入：最简单的把页面变成灰色的代码是在head 之间加 html { FILTER: gray } 方法三， html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}

Css display & background- how to make a circle for a element by css.1. see code:.user { display: inline-block; width: 150px; height: 150px; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover; } 2. description:2.1. display: inline-block; CSS 定位属性（Positioning）inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值）会换行2.2. border-radius: 50%; CSS 边框属性（Border 和 Outline）border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性. 提示: 该属性允许您为元素添加圆角边框！ 语法: border-radius: 1-4 length|% / 1-4 length|%; length: 定义圆角的形状。 % : 以百分比定义圆角的形状。test it: css_border-radiusexample: border-radius:2em; 等价于border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em; see details: border-radius2.3. background-repeat: no-repeat; CSS 背景属性（Background） 定义和用法: background-repeat 属性设置是否及如何重复背景图像。 默认地，背景图像在水平和垂直方向上重复 详细说明: background-repeat 属性定义了图像的平铺模式 从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。 提示和注释 提示：背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。 可能的值 2.4. background-position: center center; CSS 背景属性（Background） 定义和用法 background-position 属性设置背景图像的起始位置。 这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。 提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。 { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } 可能的值 2.5. background-size: cover; CSS 背景属性（Background）background-size 属性规定背景图像的尺寸。 cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中.see details : background-size

CSS 3- &：nth-child（n） :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式.举个例子: 在样式为audience-icon-controls下中子节点，第一个子节点right:81px, 第二个子节点right:54pxcode example: .audience-icon-controls { .span { position: absolute; &:nth-child(1) { right: 81px; } &:nth-child(2) { right: 54px; } &:nth-child(3) { right: 27px; } &:nth-child(4) { right: 0; } } } 1 Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { background:#0000ff; } 2 使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色： 但是,这里有一个缺点：如果子节点顺序颠倒的话，那么对应的样式生效则失败，所以建议还是以子节点中的class的方式渲染其style.p:nth-child(3n+0) { background:#ff0000; }

CSS3 Properties CSS3 word-wrap PropertyProperty ValuesValue : Description normal : Break words only at allowed break points break-word : Allows unbreakable words to be broken initial : Sets this property to its default value. Read about initial inherit : Inherits this property from its parent element. Read about inherit 1. break-word Allow long words to be able to break and wrap onto the next line: p.test { word-wrap: break-word; } 2. normal Only break words at allowed break points. p.test { word-wrap: normal; }

去掉链接<a>标签点击产生的虚线 在css中加入如下代码：a:focus { outline: none; blr: expression(this.onFocus = this.blur ()); }

使用LazyLoad动态加载js/css文件 LazyLoad 介绍LazyLoad是一个简单的动态加载js/css资源文件的js库，可以在需要的页面去加载需求js/css资源，达到页面加载的简洁以及效率。Github 地址https://github.com/rgrove/lazyload/资源下载lazyload.js 下载地址如何使用// 加载js文件，当加载完成后执行回调函数 LazyLoad.js('http://example.com/foo.js', function () { alert('foo.js has been loaded'); }); // 加载多个js文件，当全部加载完成后执行回调函数 LazyLoad.js(['foo.js', 'bar.js', 'baz.js'], function () { alert('all files have been loaded'); }); // 加载css文件，当加载完成后执行回调函数 LazyLoad.css('foo.css', function (arg) { alert(arg); }, 'foo.css has been loaded'); // 加载多个css文件，当全部加载完成后执行回调函数 LazyLoad.css('foo.css', function () { alert(this.foo); // displays 'bar' }, null, {foo: 'bar'}); 浏览器兼容性 Firefox 2+ Google Chrome Internet Explorer 6+ Opera 9+ Safari 3+ Mobile Safari Android

酷炫的CSS技巧 1. 黑白图像这段代码会让你的彩色照片显示为黑白照片img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } 2.页面顶部阴影下面这个简单的 css3 代码片段可以给网页加上漂亮的顶部阴影效果body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; } 3.所有一切都垂直居中要将所有元素垂直居中, 注意：在IE11中要小心flexbox。html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; } 4.文本渐变文本渐变效果h2[data-text] { position: relative; } h2[data-text]::after { content: attr(data-text); z-index: 10; color: #e3e3e3; position: absolute; top: 0; left: 0; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0))); } 5.禁用鼠标事件CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。.disabled { pointer-events: none; } 6.模糊文本简单但很漂亮的文本模糊效果.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); }

html5仿QQ聊天界面 界面截图DEMO网址http://120.27.39.174/acx-chat/html代码<!DOCTYPE html> <html> <head> <title>Acxiom DataGuru Robot</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="description" content="Acxiom DataGuru Robot"> <link rel="stylesheet" href="static/lib/weui.min.css"> <link rel="stylesheet" href="static/css/jquery-weui.css"> <link rel="stylesheet" href="static/css/main.css"> </head> <body ontouchstart> <div class="weui_tab"> <div class="weui_navbar"> <div class="navbar_left"></div> <div class="navbar_center">Acxiom DataGuru Robot</div> <div class="navbar_right"></div> </div> <div class="weui_tab_bd scroll_page"> <section class="aui-chat"> </section> </div> <div class="weui_tabbar aui-chat-tool"> <div class="eaitWrap"> <input class="editArea" contenteditable="true"> </div> <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary sendBtn">send</a> </div> </div> <script id="sendMsg" type="text/tpl"> <div class="aui-chat-item aui-chat-right"> <div class="aui-chat-media"> <img src="{{d.avatar}}"> </div> <div class="aui-chat-inner"> <div class="aui-chat-name">{{d.userName}}</div> <div class="aui-chat-content"> <div class="aui-chat-arrow"></div> {{# switch(d.msgType) { case 'text': }} {{d.text}} {{# break; case 'image': }} <img src="{{d.image}}" alt="{{d.text}}"> {{# break; } }} </div> <div class="aui-chat-status"> <i class="aui-iconfont aui-icon-info aui-text-danger"></i> </div> </div> </div> </script> <script id="recvMsg" type="text/tpl"> <div class="aui-chat-item aui-chat-left"> <div class="aui-chat-media"> <img src="{{d.avatar}}"> </div> <div class="aui-chat-inner"> <div class="aui-chat-name">{{d.userName}}</div> <div class="aui-chat-content"> <div class="aui-chat-arrow"></div> {{# switch(d.msgType) { case 'text': }} {{d.text}} {{# break; case 'image': }} <img src="{{d.image}}" alt="{{d.text}}"> {{# break;} }} </div> <div class="aui-chat-status aui-chat-status-refresh"> <i class="aui-iconfont aui-icon-correct aui-text-success"></i> </div> </div> </div> </script> <script id="timeMsg" type="text/tpl"> <div class="aui-chat-header">{{ d.text }}</div> </script> <script src="static/lib/jquery-2.1.4.js"></script> <script src="static/lib/fastclick.js"></script> <script src="static/js/jquery-weui.js"></script> <script src="static/js/swiper.js"></script> <script src="static/lib/laytpl.js"></script> <script src="static/js/main.js"></script> </body> </html> main.css代码body, html { height: 100%; -webkit-tap-highlight-color: transparent; font-family: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", tahoma, arial, simsun, "宋体"; } .weui_navbar+.weui_tab_bd { padding: 50px 5px 60px 5px; background-color: #f5f5f5; } .weui-photo-browser-modal { z-index: 999; } .weui_navbar { line-height: 2rem; height: 2rem; background-color: #6ABD78; color: #fff; } .weui-photo-browser-modal .photo-container img { margin: 0 auto; } .weui_tabbar:before { border-top: 1px solid #ccc; } .navbar_left { flex: 1; } .navbar_center { flex: 3; text-align: center; } .navbar_right { flex: 1; } /*chat*/ .aui-chat { width: 100%; height: 100%; } .aui-chat .aui-chat-item { position: relative; width: 100%; margin-bottom: 0.75rem; overflow: hidden; display: block; } .aui-chat .aui-chat-header { width: 100%; text-align: center; margin-bottom: 0.75rem; font-size: 0.6rem; color: #757575; } .aui-chat .aui-chat-left { float: left; } .aui-chat .aui-chat-right { float: right; } .aui-chat .aui-chat-media { display: inline-block; max-width: 2rem; } .aui-chat .aui-chat-media img { width: 100%; border-radius: 50%; } .aui-chat .aui-chat-inner { position: relative; overflow: hidden; display: inherit; } .aui-chat .aui-chat-arrow { content: ''; position: absolute; width: 0.6rem; height: 0.6rem; top: 0.2rem; -webkit-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; background-color: transparent; } .aui-chat .aui-chat-left .aui-chat-arrow { background-image: -webkit-linear-gradient(45deg, #CCE6DE, #CCE6DE 50%, transparent 50%); background-image: linear-gradient(45deg, #CCE6DE, #CCE6DE 50%, transparent 50%); -webkit-transform: rotate(45deg); transform: rotate(45deg); left: -0.25rem; } .aui-chat .aui-chat-right .aui-chat-arrow { background-image: -webkit-linear-gradient(45deg, #ffffff, #ffffff 50%, transparent 50%); background-image: linear-gradient(45deg, #ffffff, #ffffff 50%, transparent 50%); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); right: -0.25rem; } .aui-chat .aui-chat-content { color: #212121; font-size: 0.7rem; border-radius: 0.2rem; min-height: 1rem; position: relative; padding: 0.5rem; max-width: 80%; word-break: break-all; word-wrap: break-word; } .aui-chat .aui-chat-content img { max-width: 100%; display: block; } .aui-chat .aui-chat-status { position: relative; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; } .aui-chat .aui-chat-name { width: 100%; position: relative; font-size: 0.6rem; color: #757575; margin-bottom: 0.25rem; } .aui-chat .aui-chat-left .aui-chat-name { left: 0.5rem; } .aui-chat .aui-chat-left .aui-chat-status { left: 0.5rem; float: left; } .aui-chat .aui-chat-left .aui-chat-media { width: 2rem; float: left; } .aui-chat .aui-chat-left .aui-chat-inner { max-width: 70%; } .aui-chat .aui-chat-left .aui-chat-content { background-color: #CCE6DE; float: left; left: 0.5rem; } .aui-chat .aui-chat-right .aui-chat-media { width: 2rem; float: right; } .aui-chat .aui-chat-right .aui-chat-inner { float: right; max-width: 70%; } .aui-chat .aui-chat-right .aui-chat-name { float: right; right: 0.5rem; text-align: right; } .aui-chat .aui-chat-right .aui-chat-content { background-color: #ffffff; right: 0.5rem; float: right; } .aui-chat .aui-chat-right .aui-chat-status { float: right; right: 0.5rem; } .aui-chat-tool { min-height: 2rem; } .aui-chat-tool .eaitWrap { position: absolute; right: 4rem; left: 0; } .aui-chat-tool .editArea { line-height: 1.4rem; height: 1.4rem; margin: 0.25rem; padding: 0 0.25rem; overflow-y: auto; overflow-x: hidden; border: none; width: 100%; } .aui-chat-tool .sendBtn { line-height: 1.4rem; height: 1.4rem; margin: 0.25rem; position: absolute; right: 0px; } main.js代码var robotName = 'DataGuru', robotAvatar = 'robot.jpg', userName = 'Andy Li', userAvatar = 'andyli.png', photoBrowser; $(function() { //FastClick FastClick.attach(document.body); //chat images click listener $('.aui-chat').on('click', '.aui-chat-content img', function() { var items = [], item = {}; item.image = $(this).attr('src'); item.caption = $(this).attr('alt'); items.push(item); showPic(items); }); //send button click listener $('.sendBtn').on('click', function() { //send message sendMsgExt(userAvatar, userName, 'text', $('.editArea').val()); //receive message switch ($('.editArea').val()) { case '1': recvMsgExt(robotAvatar, robotName, 'text', 'What do you want to know about the segments?<br>[11] List all the category of your segments.'); break; case '11': recvMsgExt(robotAvatar, robotName, 'image', 'developing', 'developing.jpg'); break; case '2': recvMsgExt(robotAvatar, robotName, 'text', 'What the partner info do you want to know?<br>[21] List all the category of your segments.'); break; case '21': recvMsgExt(robotAvatar, robotName, 'image', 'developing', 'developing.jpg'); break; default: recvMsgExt(robotAvatar, robotName, 'text', 'Hello, I’m DataGuru. What I can help?<br>[1] Segment Consulting<br>[2] Partner Consulting<br>Reply the number of your question. Like “1”.'); } //empty edit area $('.editArea').val(''); }); //1 timestamp timeMsg({ text: new Date().format('yyyy-MM-dd hh:mm:ss') }); //2 welcome recvMsgExt(robotAvatar, robotName, 'text', 'Hello, I’m DataGuru. What I can help?<br>[1] Segment Consulting<br>[2] Partner Consulting<br>Reply the number of your question. Like “1”.'); }); function showPic(items) { photoBrowser = $.photoBrowser({ items: items }); photoBrowser.open(); } function sendMsg(data) { laytpl($('#sendMsg').html()).render(data, function(html) { $('.aui-chat').append(html); scrollToMsg(); }); } function sendMsgExt(_avatar, _userName, _msgType, _text, _image) { var data = { avatar: _avatar, userName: _userName, msgType: _msgType, text: _text, image: _image }; sendMsg(data); } function recvMsg(data) { laytpl($('#recvMsg').html()).render(data, function(html) { $('.aui-chat').append(html); scrollToMsg(); }); } function recvMsgExt(_avatar, _userName, _msgType, _text, _image) { var data = { avatar: _avatar, userName: _userName, msgType: _msgType, text: _text, image: _image }; setTimeout(function(){ recvMsg(data) }, 800); } function timeMsg(data) { laytpl($('#timeMsg').html()).render(data, function(html) { $('.aui-chat').append(html); scrollToMsg(); }); } function scrollToMsg(speed) { if (!speed) speed = 300; $('.scroll_page').animate({ scrollTop: $('.scroll_page').scrollHeight() }, speed); } Date.prototype.format = function(format) { var o = { "M+": this.getMonth() + 1, //month "d+": this.getDate(), //day "h+": this.getHours(), //hour "m+": this.getMinutes(), //minute "s+": this.getSeconds(), //second "q+": Math.floor((this.getMonth() + 3) / 3), //quarter "S": this.getMilliseconds() //millisecond } if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)); return format; }

css的reset模板 /*KISSY CSS Reset 理念：清除和重置是紧密不可分的 特色：1.适应中文 2.基于最新主流浏览器 维护：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com) */ /* 清除内外边距 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ fieldset, lengend, button, input, textarea, /* form elements 表单元素 */ th, td { /* table elements 表格元素 */ margin: 0; padding: 0; } /* 设置默认字体 */ body, button, input, select, textarea { /* for ie */ /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/ font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */ } h1 { font-size: 18px; /* 18px / 12px = 1.5 */ } h2 { font-size: 16px; } h3 { font-size: 14px; } h4, h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */ small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ /* 重置列表元素 */ ul, ol { list-style: none; } /* 重置文本格式元素 */ a { text-decoration: none; } a:hover { text-decoration: underline; } abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */ border-bottom: 1px dotted; cursor: help; } q:before, q:after { content: ''; } /* 重置表单元素 */ legend { color: #000; } /* for ie6 */ fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */ /* 注：optgroup 无法扶正 */ button, input, select, textarea { font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */ } /* 重置表格元素 */ table { border-collapse: collapse; border-spacing: 0; } /* 重置 hr */ hr { border: none; height: 1px; } /* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */ html { overflow-y: scroll; }

XP下web开发探究 浏览器对web开发的影响1.如果能支持firefox/chrome等浏览器，那么不需要对web兼容性做出要求，可以使用html5最新技术2.如果只能使用IE，因为可能需要支持ActiveX插件，那么需要要求将浏览器从IE6/IE7升级到IE8，IE8是XP系统最后支持的一个版本。3.如果环境什么都不能改版，而恰好浏览器也只是IE6/IE7，那么恭喜你，可以不用往下阅读啦 :) 。jQuery版本对浏览器的支持[jQuery版本支持文档](http://jquery.com/browser-support/)jQuery对IE6-8最后一个支持版本是1.12.4[jQuery 1.12.x](http://https://code.jquery.com/jquery/#jquery-all-1.x)EasyUI版本对浏览器的支持[easyui版本下载列表](http://www.jeasyui.com/download/list.php)EasyUI对IE6-8最后一个支持版本是1.3.2[easyui1.3.2](http://www.jeasyui.com/download/downloads/jquery-easyui-1.3.2.zip)Fontawesome版本对浏览器的支持Fontawesome对IE7最后一个支持版本是1.3.2[font-awesome3.2.1](http://fontawesome.io/3.2.1/assets/font-awesome.zip)

网页返回顶部按钮功能怎么写 1.在页面body底部加入代码#这里引用了font-awesome字体图标 <div class="backTop"> <button class="btn btn-inverse"> <i class="fa fa-chevron-up"></i> </button> </div> 2.加入css样式/*backTop*/ .backTop { position: fixed; right: 20px; bottom: 20px; z-index: 999; width: 50px; display: none; } .backTop .btn { margin-top: 2px; height: 50px; display: block; padding: 0; width: 100%; opacity: .4; } .btn-inverse { background: #666; color: #FFF !important; } .backTop .btn:hover { background: #999; opacity: .9; color: #FFF !important; } .backTop .btn i { position: relative; top: -1px; } 3.加入js脚本#滚动到80px高度展示按钮 $(window).scroll(function() { document.documentElement.scrollTop + document.body.scrollTop > 80 ? $('.backTop').fadeIn() : $('.backTop').fadeOut(); }); $(".backTop").on("click", function() { scrollToTop(); }); function scrollToTop(dom, speed) { if (!speed) speed = 300; var top = 0; if (dom && dom.length > 0) top = dom.offset().top; $('html,body').animate({ scrollTop: top }, speed) }

前端注意要点 一些提示 1.多写写共用类 2.不要混用class和style，尽量避免将style直接放在标签上 3.使用栅格布局的时候，要注意页面大小造成的布局混乱 4.借助chrome/firefox的控制台来修改样式 5.看看其他框架，懂得组件的作用以及灵活使用 6.css和js加载顺序，以及优化 推荐一些前端框架 ZUI 一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。 Amazeui 中国首个开源 HTML5 跨屏前端框架 Uikit 轻量级可定制的框架 Layui 轻量级模块化框架