Html与Css
陌上风情
80后,信息管理出身,怀揣梦想,投身互联网,喜欢一切新鲜有趣的玩意,工作重点为web开发,熟悉的技术有Java、PHP、Scala,业余喜欢旅行,好历史八卦。
展开
-
左中右3栏布局中最先显示中栏内容的方法
对于一个左中右3栏布局的页面,比如home.donews.com,用户最想看到的是中栏的信息,左右2栏其实网站的相关信息的导航入口,所以中栏信息是最重要的,应该在页面显示顺序上优先于左右2栏。或者也可以这么说就是要将一个页面的最重要的信息优先于页面其他元素显示,无论是3栏还是2栏布局,说得很对。浏览器显示页面是一行一行的按顺序执行代码,也就是说写在前面的先执行显示,而对于左中右3栏布局的设计,转载 2008-07-24 12:45:00 · 772 阅读 · 0 评论 -
图片居中显示的css样式代码
.box128{ width:128px; height:128px; text-align: center; vertical-align:middle; display:table-cell !important; display:block; border:1px solid #DDD; white-space:原创 2009-12-24 10:50:00 · 2037 阅读 · 0 评论 -
(工作笔记)table中td内容换行问题
table也是我们常用的一种布局形式,今天就发现网站有一个样式的小bug,我们有一个字段叫专长,原本是里面填写词组的,但是不巧的是有一位用户恶意填写了不间断的英文字符,例如l:lovelovelovelovelovelovelovelovelovelovelovelove这样的,于是乎,我们的td就被无情的撑开了,无法换行,⊙﹏⊙ 解决方案:一般有两种:就是td里面再套一个div,然原创 2009-11-18 17:07:00 · 3857 阅读 · 0 评论 -
关于火狐FF的-moz-opacity 样式的问题
设置div层半透明在平时做网页效果的时候经常用,一般是:filter:alpha(opacity=65); //forIE-moz-opacity:0.5; //forFF 这样ie火狐就ok了 但是ff3.5出来后,发现又有问题,-moz-opacity,这个在ff里面没用了,查了下资料,原来是在3.5以后-moz-opacity原创 2009-11-13 10:39:00 · 1769 阅读 · 0 评论 -
js+css完美控制未知尺寸图片大小
在做网站的时候,往往图片的处理很重要,固定尺寸容易变形拉伸,不固定又会有不可预知的问题,有可能撑开页面。使用js和css讲图片的现实控制在固定的区域内,大于这个区域的等比例缩放,小于这个区域的居中显示。看看代码:css+js完美控制图片大小 <!-- var flag=false; function DrawImage(ImgD){ var imag原创 2009-08-14 15:06:00 · 1619 阅读 · 0 评论 -
纯css的鼠标移上查看大图的效果
一个简单的效果,鼠标移到图片上就可以显示查看该图片的大图,完全用css写的,居中用到负边距居中方式。 代码:无标题文档<!-- * { margin:0; padding:0; } img {border:0;} #main_body { widt原创 2009-04-07 13:41:00 · 1385 阅读 · 3 评论 -
完美清除浮动的两种解决方案
浮动一直是我们编写网页最常用的方法,但是也是最不听话的,一不小心会乱跑,虽然有万能的float闭合div多写一个可以解决掉,但是为了清除浮动而多出来一个空的div实在看着不爽,这里我在网上找到了两种解决的办法,相信很多朋友已经在用了,不过还是列出来,以备后用。无标题文档<!-- ul{ list-style:none; height:auto; margi原创 2009-03-19 16:22:00 · 1130 阅读 · 1 评论 -
网页切图过程中div+css命名规则
网页切图过程中div+css命名规则内容:content/container 导航:nav 侧栏:sidebar 栏目:column 标志:logo 页面主体:main 广告:banner 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu搜索:search原创 2008-12-06 14:33:00 · 1344 阅读 · 0 评论 -
IE6、IE7、Firefox兼容CSS Hack总结
IE6,IE7,IE8,Firefox兼容的css hack补充:.color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-color: #FF0000/9; /*IE6、IE7、IE8会显示红色*/ *background-color: #0066FF; /*IE6、IE7会变为蓝色*/ _background原创 2009-01-13 15:45:00 · 2561 阅读 · 2 评论 -
系统邮件模板的邮箱兼容性
近期支付宝的系统邮件进行了一次改版,在这次改版的过程中,我们遇到了很多在网页中显示正常的html邮件在邮箱中显示异常的问题,下面我们把遇到的问题和一些常用的代码书写规则和大家分享:共性问题:(许多邮箱都会出现的问题)1. 字体大小会发生变化,排版出现异常:解决方法:使用table来排版,每个部分的样式用内联样式写法style=”…” ,例如:XXXX这种写法使样式能准转载 2008-11-15 18:32:00 · 2431 阅读 · 0 评论 -
Email页面代码书写建议及规范
Email页面代码书写建议及规范2008.04.30 - 2条评论 » 前几天看到口碑网的朋友写了一篇《如何编写兼容各主流邮箱的HTML邮件》,很不错。在这里,我也要把我的经验和大家分享一下。众所周知,Email是一项最古老的互联网应用之一。因此,不少邮件系统还是会采用一些比较古老的处理方式,导致前端方面很多新的技术、新的特性无法被支持。而且各个邮箱系统以及客户端的差异,也会使em转载 2008-11-15 18:30:00 · 3180 阅读 · 0 评论 -
43个你应当避免的Web设计错误
这是一篇关于网站易用性的文章,作者以亲身体会讲述了43条网站设计中常犯的错误,而无疑这些错误会大大影响网站的可用性。如今网站易用性已成为一种趋势,但纵观国内的各大网站,似乎易用性并未成为设计者们广泛理解的概念, 因此希望这篇文章对大家能有作用。1. 用户必须在几秒钟知道网站是做什么的。注意力是因特网上最有价值的货币。 如果访问者无法在几秒钟之内得知你的网站的方向,他很有可能转而访问其他网站。 你必转载 2008-08-01 13:17:00 · 763 阅读 · 1 评论 -
网站前端架构的优化总结
1 前端优化必要性<br />随着互联网的发展,前端优化越来越被人们重视,在一个大型的大型电子商务网站技术架构中,前端架构一定是一项必不可少的工作,国内几个大型的互联网公司也有非常强大的前端技术人员。在业界享有名气淘宝UED团队就有好几十人。在浏览器访问一个网站时,有10%-20%的时间是花在下载HTML上面,有80%-90%时间是花在下载页面中所有组件上面。如果我们可以把后端时间缩短一半,整体响应时间只能减少5%-10%。然而我们关注前端,同样是其响应时间缩短一半,那整体性能能减少40%-45%。<br转载 2010-08-12 11:03:00 · 1721 阅读 · 0 评论