Html/Css
文章平均质量分 60
m1maomao
这个作者很懒,什么都没留下…
展开
-
Javascript 严格模式详解
一、概述除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。设立"严格模式"的目的,主要有以下几个: - 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全之处,保证代码运行的安全; - 提高编译...原创 2015-11-10 11:32:00 · 192 阅读 · 0 评论 -
IE和Firefox浏览器下javascript、CSS兼容性研究
为了将公司的产品在IE和Firefox下达到兼容,前段时间做了如下研究。由于之前准备的就是英文文档,我也懒得再翻译成中文了,呵呵。首先你要在每个页面执行javascript之前引入下面这个我做好的兼容文件。IEFirefox.js1. obj.firstChild/.lastChild/.nextSibling/.chil...原创 2012-04-24 17:04:18 · 76 阅读 · 0 评论 -
如何通过CSS实现div的固定位置,不随页面滚动消失
每个 Web Developer / Designer 都知道 CSS 的 position:fixed 的妙用。利用这个属性,我们可以轻松的将一个元素“固定”在页面的某个位置。这在我们做一些特殊的效果,例如页边角的小角旗,或是固定页面底下的脚注都是非常有用的。但是万恶的 IE 却对这个属性支持有问题,尽管 IE7/8 已经能够正确处理这个属性,但 IE6 的份额还是很高,所以当我们用...原创 2012-04-24 16:56:11 · 818 阅读 · 0 评论 -
让apache支持shtml 文件,aphache shtml
介绍一下shtml和shtm关于shtml,shtml是一种基于SSI技术的文件,也就是Server Side Include--SSI 服务器端包含指令,一些Web Server如果有SSI功能的话就会对shtml文件特殊招待,服务器会先扫一次shtml文件看没有特殊的SSI指令存在,如果有的话就按Web Server设定规则解释SSI指令,解释完后跟一般html一起调去客户端。关于sh...原创 2012-01-10 09:58:48 · 93 阅读 · 0 评论 -
firefox ie 字体不一样
今天无意遇到了火狐,IE不一致。那么在公共样式里加如下代码:font: 62.5%/1.6 Verdana,'Helvetica Neue',Helvetica,Sans-Serif;*font: 59.5%/1.6 Verdana,'Helvetica Neue',Helvetica,Sans-Serif;原创~...原创 2012-01-10 09:44:11 · 97 阅读 · 0 评论 -
【IE6的疯狂系列】IE6 BUG大全(bug征集、整理中..)
IE6 bug到底令我们前端开发头痛我就不多说了说实话,很多东西我一直在回避IE6的BUG,比如不用半透明的PNG。。。但是毕竟IE6还将长期存在,而且IE6在中国比例目前还绝对多数,所以我们无法回避。逃无可逃,退无可退!现整理收集《【IE6的疯狂系列】IE6 bug大全》仅供参考。如果大家发现IE6或者IE7的BUG,并愿意共享,请您留言,来邮件:feiwen8772@qq.co...原创 2011-09-30 13:44:46 · 83 阅读 · 0 评论 -
论网站按钮的设计艺术与生命周期
一、饮水思源 “生命周期”一词基本上就是几个月前D2前端论坛的仅有的几个收获之一。老实讲,这次的D2收获很少,颇失望。最让我耿耿于怀的就是上午沙龙的那个主持人,每每听到关键处,就被其不着调的插话打断。让我不得不觉得“这家伙是不是个草包头啊!” 参加这种会议,我基本上不去关心技术细节,而是概念,思想,以及有助于拓展眼界、发散思维的东西,这些东西往往藏在牛人们不经意的谈论之间...原创 2011-09-30 10:21:42 · 146 阅读 · 0 评论 -
10个非常有用的CSS技巧(m2maomao修正版)
[b]1. 将网页或元素居中[/b] HTML: CSS:.wrap { width:960px; margin:0 auto;} [b]3.跨浏览器最小高度设置 [/b] CSS:.element { min-height:600px; height:auto !important; height:600px;...2011-09-29 17:16:39 · 104 阅读 · 0 评论 -
利用CSS让容器的溢出部分内容隐藏起来,smarty就可以不用截取字符串了
亲测,可用:m2maomao 2011.06.29在网页设计中,会遇到文本超过固定长度导致整体的网页变形的情况。程序员往往需要截取固定的长度来实现某些固定长度的控制。介绍一种直接采用CSS的代码控制来实现文本截取的方法。与程序员的直接字符截取的方式有点区别,其优势是可以自动控制文本显示的长度;缺点是不同浏览器的兼容性并不完美。使用到 overflow,text-overflow,white...原创 2011-06-29 16:42:02 · 207 阅读 · 0 评论 -
JS获取浏览器高度和宽度
IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度Fi...原创 2011-09-22 14:21:02 · 85 阅读 · 0 评论 -
让表格有滚动条的实现
主要是用div样式来控制 例如 <html><head><title> Scroll </title><style>body { overflow: hidden; }</style> </head><body><div style=&q2010-03-04 13:09:06 · 62 阅读 · 0 评论 -
css文字一半居左一半居右
<style type="text/css">#test{width:400px;font-size:12px;}#test p{margin-top:-1.2em;text-align:right;}#test li{width:100%}</style><div id="test"><ul><li>半岛台报道扎卡维武装宣布释放原创 2009-09-10 11:56:00 · 734 阅读 · 0 评论 -
让框架Frameset居中,并且固定宽度的巧妙办法
原来的代码:<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>视频会议后台管理_深圳视高科技有限公司</title><head></head>&a原创 2010-01-10 06:58:14 · 132 阅读 · 0 评论 -
FF、IE7、IE6的CSS问题
1. !important 随着IE7对!important的支持,现在IE7和FF都支持!important,可以用!important来区分FF、IE7和IE6的高度。用法如下:Html代码 <style rel="stylesheet" type="text/css"> <!-- .content{background:#a5a5a5;height...原创 2009-07-24 17:33:48 · 64 阅读 · 0 评论 -
常用的CSS命名规则
常用的CSS命名规则头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜...原创 2009-07-09 13:07:45 · 61 阅读 · 0 评论 -
CSS实现将div固定在页面指定地方
用一个div作为提示信息或者与用户交互的层控件,需要让它随着页面的滚动而固定在屏幕的某个地方。js可以实现这个功能,当页面滑动的时候,计算位置,然后改变div的top属性即可。但是这样作出来的效果,恐怕没人会满意,因为抖的太厉害了,不能很及时的改变位置。 要是能做到平滑的,一点都看不出来的技术来达到这种效果,恐怕只有css了。 [xh...原创 2012-04-24 17:21:14 · 192 阅读 · 0 评论 -
完美解决IE6不支持position:fixed的bug
废话不多说,先看一下下面这段代码:?<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />...原创 2012-04-28 16:50:04 · 53 阅读 · 0 评论 -
Javascript 装载和执行
一两个月前在淘宝内网里看到一个优化Javascript代码的竞赛,发现有不少的人对Javascript的执行和装载的基础并不懂,所以,从那天起我就想写一篇文章,但一直耽搁了。自上篇《浏览器渲染原理简介》,正好也可以承前启后。 首先,我想说一下Javascript的装载和执行。通常来说,浏览器对于Javascript的运行有两大特性:1)载入后马上执行,2)执行时会阻塞 页面后续的内容(包括页面的...原创 2015-09-17 14:17:49 · 143 阅读 · 0 评论 -
IE6、7下li元素的子元素为dl,ul,ol时产生的bug
话不多说,先看测试代码:该段代码在标准浏览器(包括IE8+)中的效果为:但在万恶的IE6和IE7中的却是这样的:外面看到li元素的子元素是列表元素时(既ul,ol,dl),li的顶部会莫名其妙的空出一段来,就像是给li设了一个padding-top一样。解决方法:触发li的hasLayout属性,最好的方法是设置 zoom:1...原创 2015-09-15 14:54:56 · 332 阅读 · 0 评论 -
Web前端开发和JS面向对象编程分享 一、前端开发的重要性 1. Web2.0、AJAX、JSON、用户体验 2. HTML5、微网、移动互联网...
Web前端开发和JS面向对象编程分享 一、前端开发的重要性1. Web2.0、AJAX、JSON、用户体验2. HTML5、微网、移动互联网3. 前端MVC框架:Backbone.js4. 服务器端Javascript:Node.js5. Node.js + Jquery Mobile + HTML5 、CSS3 + MongDB二、工...原创 2015-09-15 11:20:36 · 380 阅读 · 0 评论 -
网格(UED所谓栅格化)方案生成器
本文转载于:http://www.twinsenliang.net/skill/20081109.html首先这是一篇让你知其所以然的文章,如果你不了解栅格化你应该看看,如果你很了解栅格化你更加应该看看。事情的起因:今天帮跑去跟小组争取福利,和领导谈话。我说小组对于那种虚名的表扬最近不太感冒,最好来点实质的奖励。他就说什么技术提升之类远景什么的,让大家为了理想去工作。...原创 2015-09-03 14:30:24 · 314 阅读 · 0 评论 -
背景拉伸平铺
现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果。本文将带您一起使用jQuery和CSS实现背景图片拉伸效果。将背景图片拉伸,而不是平铺,注意平铺效果我们可以使用CSS的background-repeat来实行背景图片的平铺效果,本文讨论的是背景图片的拉伸效...原创 2013-09-13 15:28:15 · 135 阅读 · 0 评论 -
让wamp本地测试WordPress支持自定义固定链接
让wamp本地测试WordPress支持自定义固定链接 WordPress拥有为数众多的主题和插件,是大家采用它建独立博客的一个很重要 的原因。喜欢折腾的童鞋会经常测试网上淘来的主题或插件,一些主题和插件会向数据库中写入东西,如果再自己的博客上实地测试,长久以往,会造成很多问题, 甚至造成数据库混乱,导致博客挂掉,后果很严重。因此,在搭建一个WordPress...原创 2014-02-19 19:32:59 · 254 阅读 · 0 评论 -
CSS强制性换行
一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不 换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字母或数字(常规数据应 该不会有吧,但有些测试人员是会这样子做的),超过容器宽度时就会把容器撑大,不换行。解决方法(以IE,chrome,FF为测试浏览器):{ word-br...原创 2013-08-19 17:31:34 · 94 阅读 · 0 评论 -
自己写的美女瀑布流分享一下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"> <head> <meta http-equiv="Content-Type" conte原创 2012-08-01 16:32:49 · 94 阅读 · 0 评论 -
fixed仿淘宝工具栏效果(两种)
看到有人正在找这个效果,而我正好也在研究,所以发上来,共享一下!现在我们来分析下这个“fixed仿淘宝工具栏效果”效果具体要实现哪些功能:1、原本我一直认为,只有在滚动一屏的时候,工具栏才会固定在浏览器顶端。可是当我仔细研究这个效果的时候,我才发现不是我认识的那样。其实是当浏览器滚动条的高度>工具栏在目前页面的位置时,工具栏才会固定在页面的顶部。2、综上所述呢,我们首先要获取工具...原创 2012-08-01 15:59:10 · 139 阅读 · 0 评论 -
如何去掉链接虚线框,css去链接虚线,html链接虚线框隐藏
链接的虚线框影响整体风格,我们在工作经常会将它去掉,而采用图片高亮的方式来显示焦点状态。然而去掉虚线框在两种浏览器中却分别对待,这种技巧经常用到,作个记录,以备不时之需。当一个链接得到焦点时,默认会有个虚线框。如图: 在 Firefox 里可以用 -moz-outline:none; 或者 outline:none; 来将其去掉。所以我们可以这样写:a:focus ...原创 2012-02-12 11:34:01 · 159 阅读 · 0 评论 -
做CSS固定窗口发现IE6下不兼容,下面是解决position:fixed在IE6下不兼容的方法
写道 .fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;} .fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;} .fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;...原创 2012-05-17 16:18:57 · 82 阅读 · 0 评论 -
去掉链接(包括图片链接)的虚线边框
/* for IE */a,area { blr:expression(this.onFocus=this.blur()) }/* for Firefox */:focus { outline: none; }原创 2012-05-08 09:47:50 · 114 阅读 · 0 评论 -
chrome,safari,firefox,ie6.ie7,ie8,ie9各浏览器CSS Hack总结
这个浏览器百花齐放的时代,身为一名前端开发人员,我想最头痛的就是如何能让自己的项目在各个浏览器上显示一致。最近一直在做项目的兼容性调整,参考一些资料,对现有的hack做了一些总结归纳,希望对大家有所帮助。现有主流浏览器:IE6-9,(9还未踏实,ie10要诞生了。。。。这让我们前端开发人员情何以堪)、 firefox、chrome、safari、operacss hack实际要就是...原创 2012-05-04 08:20:02 · 107 阅读 · 0 评论 -
1024下网页宽度标准(网络摘抄)
研究网页栅格系统前,来看一组数据:网站 首页页面宽度 pxYahoo! 950淘宝 950MySpace 960新浪 950网易 960Live Search 958搜狐 950优酷 960AOL 960上面列举的都是Alexa全球排名前100的站点,它们的首页宽度为950px/960px. 除了微软的Live Search,...原创 2012-04-29 21:24:06 · 134 阅读 · 0 评论 -
区别不同浏览器,CSS hack写法:
区别不同浏览器,CSS hack写法: 区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:g...原创 2009-07-08 11:16:14 · 54 阅读 · 0 评论 -
CSS画虚线
www.webjx.com[color=olive][/color]原创 2009-02-06 17:43:47 · 578 阅读 · 0 评论 -
纵向导航
纵向导航可以采用列表标签,这里采用DIV+H1+H2的方式制作纵向导航,利用标签本身的性质,可以很好的区分一级分类和二级分类。BODY部分CSS CSS入门 CSS进阶 CSS高级技巧WebUI 理论知识 实战应用 高级技巧DO...原创 2009-02-04 17:35:54 · 237 阅读 · 0 评论 -
PHOTOSHOP路径完全精通手册
路径的定义: “路径”(PATHS)在PHOTOSHOP中是使用贝赛尔曲线所构成的一段闭合或者开放的曲线段。贝赛尔是1962年法国雷诺汽车公司的PEB构造的一种以“无穷相近”为基础的参数曲线,以此曲线为基础,完成了一种曲线与曲面的设计系统UNISURF,并于1972年在该公司应用。贝赛尔的方法将函数无穷逼近同集合表示结合起来,使得设计师在计算机上绘制曲线就象使用常规作图工具一样得心应手。当然你可能...原创 2009-04-03 17:49:22 · 199 阅读 · 0 评论 -
类型、背景、区块、方框、边框、列表、定位、 扩展
在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个CSS样式的时候,不需要对每一个项都进行设置,需要什么效果,选择相应的项进行设置就可以了。 1、文本样式的设置 新建CSS样式, “选择器类型”为类,名称为 “style1”定义在“仅对该文档”。保存至站点根目录下的CSS文件夹内,弹出“CSS规则定义...原创 2009-04-03 17:44:29 · 657 阅读 · 0 评论 -
CSS教程--解决列高度自适应的五种方法
1.背景图填充这是使用最广泛的一种做法,无hacks,推荐使用:<!DOCTYPE html PUBLIC "-//W3C//DTD <a href="http://www.yaohaixiao.com/default.asp?cateID=3" target="_blank">XHTML</a> 1.0 Strict//EN" "<a href=&quo原创 2009-04-03 17:28:54 · 142 阅读 · 0 评论 -
表格隔行变色并悬停变色 兼容IE FF
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>mytable</title><script language="JavaScript"> // src=&q原创 2009-04-03 17:22:37 · 117 阅读 · 0 评论 -
CSS鼠标经过图片显示边框(代码很简单)
<img src="http://www.taoper.com/img/logo.gif" onmouseover="this.style.border='1px solid #ff0000'" onmouseout="this.style.border='0px'" border="0">2009-04-03 17:14:12 · 456 阅读 · 0 评论 -
非常漂亮的导航菜单
实际效果图:<!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"><head>&l原创 2009-04-03 17:10:38 · 117 阅读 · 0 评论