...崔凯 熬的不是夜,是自由

图片垂直居中的使用技巧

在曾经的 淘宝UED 招聘中有这样一道题目:
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

题目的难点在于两个方面:

  1. 垂直居中;
  2. 图片是个置换元素,有其专有特性。

至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:

  1. <pre>.box {
  2.     非IE的主流浏览器识别的垂直居中的方法
  3.     display: table-cell;
  4.     vertical-align:middle;
  5.     设置水平居中
  6.     text-align:center;
  7.     针对IEHack
  8.     *display: block;
  9.     *font-size: 175px;约为高度的0.873,200*0.873 约为175
  10.     *font-family:Arial;防止非utf-8引起的hack失效问题,如gbk编码
  11.     width:200px;
  12.     height:200px;
  13.     border: 1px solid #eee;
  14. }
  15.  
  16. .box img {
  17.     设置图片垂直居中
  18.     vertical-align:middle;
  19. }
  20. <div class="box">
  21. <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" alt="" />
  22. </div>

当然还有其他的解决方法,在此不深究,有兴趣的可以阅读下:

全国哀悼日,网站采取黑白素装配色的方法

方法1:

全国哀悼日,刚把自己的网站改成黑白的配色,就接到电信的通知,那边的欢迎页也要换掉,其实方法很简单,我们可以采用IE的CSS滤镜来实现,*{filter:gray;}

如果需要某一区域保持原色调(例如LOGO区域),则需要定义一个单独的样式,然后在需要的地方引用该样式即可
.nogray{filter:gray(enabled=false);}

方法2:

局部通配符:form,div,table,span,img,ul,ol,li{filter:gray;}

方法3:

手册上讲:使用 BasicImage
滤镜可以更有效率的建立效果,不过用软件检测,页面载入速度并没有明显的提高,大家也可以考虑使用这种方法来实现,优点是,在处理透明图片上,效果更好一点(无毛边):

html { filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1); }

方法4:

腾讯采用的是这种做法:把所有页内的IMG全部手动做灰,然后调整现有样式表,全部使用灰度配色,这种做法页面载入效率是最高的,并且做到了跨浏览器操作,适合大流量网站采用。

另外,如果采用方法4,可采用如下方法改变FLASH灰度:

flash变灰的方法:object 之间加入

<param value=’false’ name=’menu’/>

<param value=’opaque’ name=’wmode’/>

Adobe前端开发——结构层概况

一、概况

Adobe采用了每刷新一次页面,调用一款产品的方式,给访问者展示不同的内容。

首页分成了4个区块:
A.顶部导航区、B.产品展示区、C.产品列表及相关信息块、D.底部版权区
解析如下:

HTML片段:

二、顶部导航区

导航区域,Adobe用”dt”和”dd”分出了4个小块:

解析如下:

不太符合国内开发习惯的是,他们采用了从右向左的写法,先给出了最右侧LOGO区域的<dt id=”adobe-logo”>标签,然后是<dd id=”site-search”>搜索区域,最后才是上下并列的两个左侧导航区域。值得借鉴的是,Adobe在导航区的下拉菜单运用了”dl”内 嵌套”ul”的方法来实现效果,在国内的网站中这种写法目前尚不多见。

HTML片段:

三、产品展示区

这个区块主要是通过FLASH来作为主要的表现形式

通过JS中FMARotator参数对背景层及对应产品FLASH路径的指定,来实现每刷新一次页面,更换一下产品展示区域的内容。

HTML片段:

四、产品列表及相关信息块

从直观上看,这是一个三列的布局:

但实际上Adobe只把这部分内容分成了两个大的块,<div id=”contentBody”>和<div id=”contentPocket”>
解析如下:

然后再用”columns-2-AB-A”和”columns-2-AB-B”这样的共用样式,分别切分出左右布局的结构,最后使用<br class=”clear-both”/> 清除浮动,代码非常简洁。

HTML片段:

五、底部版权区

相比较上边的内容,这里的结构比较简单

整体分成了上下两个块,上部的是站内的链接区域,下部的就是版权信息了

内部代码仍然采用了从右向左的写法。

HTML片段:

几百元左右的商业网站究竟便宜在哪里?

很多客户问我为什么正规的网站设计都至少要两千元以上,最高有的甚至上万,可是很多网站服务商报价却很便宜,一千多块,甚至几百块,为什么一个行业有如此悬殊的报价,便宜的到底便宜在哪里?

首先,网站功能不同价格肯定也不同,复杂的价格自然很高,简单的自然就低。

然后同一功能复杂程度的网站为什么价格那么便宜,到底便宜在哪里?

1、便宜在使用通用模板,花一天的工时找一些同行业网站模板,改些图片,甚至只改个名称、地址就交货,收你800,你肯定觉得便宜超值,直到某一天你发现网站上还有和你网站很相似的另一个网站时你才知道便宜在哪里。

2、便宜在没有调查策划,专业的网站设计都是基于调查策划开始的,只有了解客户的行业、客群、竞争对手才可以有针对性地规划网站,做到反映行业特征、迎合客群、区别于竞争对手的要求。便宜的网站你就不要指望有这样的流程。

3、便宜在使用廉价的域名空间,如果你听到域名空间都是白送,肯定觉得好像很超值,且不说这样的域名空间的稳定性和速度会不会对你的客户浏览造成干扰困惑和不耐烦。等你第二年被服务商通知你空间域名要续费时你就知道免费午餐可不是长久的。至于多少钱,天知道是不是一个天价,到时你不给还不行,不给你的网站就等着关闭。

4、便宜在员工设计水平,聘请一个会使用网页编辑软件的工人工资和聘请一个设计师的工资相信是不一样的,就像同样会使用刀,医生和屠夫工资就不一样。同样的,软件只是工具,会用软件并不代表就具有某种职业资质!

5、便宜在编程水平,同上面一样的道理,好的程序员他可以保证网站程序的运作速度和运作稳定,还有保障客户资料、产品价格等商业机密的安全性。

6、便宜在没有针对性设计,不同行业不同公司网站的宣传方式都会有所不同,需要网站来配合解决日常的一些客户问题也不尽相同,比如如果你是一家某机械代理销售企业,那么在网络上提供便捷的“维修查询”功能就非常让客户受用。而便宜网站一般就是“首页、简介、产品、联系”四大模块。

7、便宜在没有设置供搜索引擎搜索的关键字,便宜的网站是不会帮你设搜索关键字的,甚至你会发现你网站关键字居然是别人公司的名称(用了别人公司网站模板的结果),至于图片的替代关键字,那更是一省了之,这样的网站就不要指望被免费的搜索引擎收入了。

8、便宜在没有考虑兼容性,别指望便宜的网站会对网站进行兼容性测试,IE浏览器能打开就好了,至于到了用占国外客户大半使用量的Netscape、FireFox浏览器浏览,网页有没有四分五裂、有没有错位变形那就是你自己的事了。

9、便宜在没有良好的售后服务,便宜的网站为了更多的节约成本,他是不会有很好的售后服务的,甚至根本没有。他们也不会对你们的网站营销提供跟踪服务,及时提供相应的专业建议,而专业的网站常常会给客户提供专业的技术指导,帮助企业有效利用网站。

10、便宜在其它的细节,而这些细节都可能给你的网站带来这样那样或大或小的损失,形象方面的、效率方面的、安全性的、还有减少销售的等等。

总之,便宜的网站是不可能真正便宜的,谁都不会做亏本买卖,省来省去最后压缩的还是网站的质量,最终损失的还是企业自己。而真正划算的,应该是那些给与网站服务商合理利润,让其认真打点网站的企业。

写这篇文章可能伤害了一些同行的切身利益,但是很抱歉,我以为这种黑幕实在不利于一个行业的健康发展,我一向主张合理利润,诚信经营,公平竞争,这样才能营造一个良性发展的行业环境,我也相信很多有自信有实力的同行会赞成我的观点。

Page 82 of 84« First...102030...8081828384
崔凯博客
Powered by SinaSAE | Theme by ck web design | TOP 顶部
Copyright © 崔凯 All rights reserved. 蜀ICP备12025891号.