一、水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~ 例如,大淘宝的首页: 然而,这种布局有一个存在一个影响用户体验的隐患。应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条;超出,出现滚动条。于是,问题来了: 信息流页面,如新浪微博,是从上往下push渲染的。开始只有头部一些信息...
这篇文章主要介绍了使用CSS禁止textarea调整大小功能的方法,禁止可以调整textarea大小功能的方法很简单,使用CSS的resize属性即可,需要的朋友可以参考下 如果你使用谷歌浏览器或火狐浏览器,你会发现页面上的textarea元素的右下角有个小三角,用鼠标箭头拖拽它,你的textarea就能随着放大或缩小。这是现代浏览器为方便用户而添加的一个辅助功能(很遗憾,不包括IE,如果你使用IE,是看不到的。)。Web程序员在设计网页时,一般给了t...
作为第一篇博文,写这个 我快要被气炸,好吧,废话不说了 昨天在项目中发现有很多这些Awesome图标 也在网上找了下Font Awesome 下载后这些文件, 现在的版本是4.2,Font Awesome从4.1.0版本开始不再支持IE7, 但更早的版本仍然支持,如果需要考虑IE7有下面解决方法 一,首先将css文件下的文件复制到我们项目css文件夹中,在中引入奥森图标的css样式 这个毋庸置疑,至于引入压缩版还是不压缩版 看心情 我...
在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器。 国外比较流行的 UI 框架 bootstrap v3 版本中使用 media query 技术实现了栅格布局 ,但要兼容 IE8 的话,( IE6/7 没有中国占比那么高,所以不用兼容)需要引入 Respond.js 的方案。 该方案的原理分以下 4 步: 1、在样式 link 之后,载入 respond.js ,该脚本会获取在他之前出现的 link 节点到一个数组 ...
一、行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距(padding)法 另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如: p { paddin...
CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。 -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。下面咱们就学习一下filter这个属性吧。 现在规范中支持的效果有: grayscale 灰度 值为0-1之间的小数 sepia 褐色 值为0-1之间的小数 saturate 饱和度 值为num hue-rotate 色...
导出EXCEL方法总结 MVC导出数据到EXCEL的方法有很多种,常见的是: 1.采用EXCEL COM组件来动态生成XLS文件并保存到服务器上,然后转到该文件存放路径即可; 优点:可设置丰富的EXCEL格式,缺点:需要依赖EXCEL组件,且EXCEL进程在服务器中无法及时关闭,以及服务器上会存留大量的不必要的XLS文件; 2.设置输出头为:application/ms-excel,再输出拼接的HTML TABLE数据; 优点:无需组件,可设置一些简单的格式,缺点:拼接...
web开发就不得不面对浏览器兼容性问题,特别是IE的兼容问题。在前端代码中经常要处理一些兼容格式,为了解决这个问题网上找了找识别浏览器版本的方法。 常规js方法 找到一个方法,还不错,可以识别出各种浏览器的版本: /** * 获取浏览器版本 * @returns {Array} */function browserVersion() { ua = navigator.userAgent; ua = ua.toLocaleLowerCase(); if (ua.m...
所谓Medial Queries就是媒体查询。 随着Responsive设计的流行,Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设备中实现不同的效果。 众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的。比如说使用“\0”,“\”和“\9”来仅让IE某些版本识别,而对于现代浏览器来说,他会直接无视这些代码。今天我想为大家介绍的是使...
1 这个类要继承于 HttpServlet (extends)2 并实现HttpServlet里面的方法,如下 : 1 doGet() : 执行的方法 2 init() : 加载 3 destroy : 关闭的时候执行的方法 生命周期 : 1 先执行当前类的构造方法 2 再执行init()方法 3 执行service()/doGet()方法 4 关闭的时候执行destroy()方法 127.0.0.1:8081 //主页 127.0.0.1:8081/web-text/名字(自己设定的...
super胡 #a1 { list-style: none ; background: green; text-align: center; padding:10px;}#a1 li { display: inline-block; background: orange; } #a2 { list-style: none ; background: green; text-align: center; padding:10px;}#a2 li { display: inline-block; background: orange; } #a3 { list-style: none ; background: green; text-align: center; padding:10px; font-size:0px;/*父元素设置 font-size:0px; 子元...
使用AFNetworking请求一个网站出现了以下错误 Error Domain=com.alamofire.error.serialization.response Code=-1016 "Request failed: unacceptable content-type: text/html" UserInfo={com.alamofire.serialization.response.error.response= { URL: http://xxx.xxx.xxx } { status code: 200, headers { "Content-Encoding" = gzip; "Content-Type" = "text/html"; Date = "Sat, 10 Oct 2015 13:44...
最近完成了公司安排的移动web触屏开发,期间涉及到在移动设备上显示线条,最开始采用PC常用的css board属性来显示1个像素的线条,但是发现在移动设备上并不美观,参考淘宝、京东的触屏发现它们均是采用浅细的线条来显示在移动设备上。 以下纪录了比较方便的4种绘制0.5像素线条方式 一、采用meta viewport的方式,这个也是淘宝触屏采用的方式 常用的移动html viewport的设置如下 具体意思就不多提...
一、继续转载 二、getComputedStyle是? getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读。 getComputedStyle()gives the final used values of all the CSS properties of an element. 语法如下: var style = window.getComputedStyle("元素", "伪类"); 例如: var dom = document.g...
结构: .s-content >.tab .s-content >.inner 想要的结果是在不同大层里点击tab切换对应顺序的inner //网址tab var wTag=$("#s_nall_tabs a"); wTag.each(function(){ $(this).click(function(i){ wTag.removeClass("tab-on"); var index=$("#s_nall_tabs a").index(this); $(this).addClass("tab-on"); $("#s_nall_tabs_con .inner").hide(); $("#s_nall_tabs_co...