随笔分类 - HTML和CSS
HTML ,CSS
摘要:大家都知道IE6之支持标签的:hover行为了,但是通常在做实际效果的时候标签 :hover在IE6下会失效,
失效一般发生在你想通过hover切换a标签内部子标签样式的时候。
阅读全文
摘要:[注:本文转自http://hi.baidu.com/vivaid/blog/item/68fe35736c1d440d8701b08b.html]具体设置如图:网络上的设置好像不大对,这个是我这有效的设置。可以压缩css与js。需要其它参数的就自己到http://developer.yahoo.com/yui/compressor/中寻找了。command:javaargument:-jar $(AppDir)\filters\yuicompressor-2.4.2.jar --type $(FileExt) --charset utf-8 $(FileName)-o $(FileName
阅读全文
摘要:背景实验网站:奇团网Qeetuan.com如果你想看下效果,安装Opera11.10版本,在快速拨号(speed dial)面板上加一下http://qeetuan.com即可!新打开一个tab默认显示的东东就是传说中的快速拨号了~下面分享下本次制作speed dial的体验。首先,参考官方文档 http://www.operachina.com/explore/2011/03/18/dont-like-screenshot-hi-site-owner-make-a-beautiful-picture-in-opera-speed-dial-for-your-site/过程我采用的是X-Pur
阅读全文
摘要:utf-8 编码的文件可以分为no bom 和 bom两种格式。 何谓bom? "ef bb bf" 这三个字节就叫bom,bom的全称叫做"byte order mard".在utf-8文件中常用bom来表明这个文件是utf-8文件,而bom的本意实在utf16中用来表示高低字节序列的。在字节流之前有 bom表示采用低字节序列(低字节在前面),而utf8不用考虑字节序列,所以其实有无bom都可以。utf-8以字节为编码单元,没有字节序的问题。 utf-16以两个字节为编码单元,在解释一个utf-16文本前,首先要弄清楚每个编码单元的字节序。例如收到一个
阅读全文
摘要:1,右浮动的元素跑到父容器下方去了背景:<div class="wdg-hd"> <strong>本周推荐专家</strong> <span class="split">-</span> <a class="sub-hd" href="#">电脑网络</a> <a href="#" class="more">更多</a></div>问题描述:.more右浮动
阅读全文
摘要:核心提示:根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳,供大家参考。在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。1、将图片转换为块级对象即,设置img为“display:block;”。在本例中添加一组CSS代码:“#sub img {display:block;}”。2、设置图片的垂直对齐方式即设置图片的vertical-alig
阅读全文
摘要:在Sohu参与的最后一个作品-2011版大视野,截个图纪念下!大家可以到这里看看效果:http://pic.news.sohu.com/group-252245.shtml#0其实现在怀念sohu的几个同事,另外不得不说下sohu的工作比较放羊,没有束缚感,是我较为喜欢的氛围~
阅读全文
摘要:CSS Hack-分享以及推荐一种处理“未知图片垂直居中”的CSS样式在介绍这种新的hack之前,先回顾一下我曾经用过的一个css hack,目的当然同样是对未知高度的图片进行垂直居中处理。方法一,用一个庸余标签协助实现垂直居中[代码]代码这种方式需要增加一个庸余的空标签span.box-c-fix,另外试试将span换成块元素div,是不是居中实效?没办法ie就是这么傻叉。。。友情提示:img和span.box-c-fix之间最好不要有文字或者空格,否则ie下可能出现居中失效。方法二,新的hack,推荐大家测试使用[代码]代码这个样式传说来源于淘宝UI团队,经网上不少用户精简优化后得来。相对
阅读全文
摘要:首先de感谢百度提供免费API!~我要说说信息框InfoWindow的问题,问题概括:CSS样式定制不友好详细问题:1,信息框的样式定制困难。 翻阅了整个API文档,想将白色的背景图片http://api.map.baidu.com/images/iw3.png换成自己的貌似没辙。2,信息框的四个角的容器没有class 对于想定制四个圆角的人来说相当蛋疼。能否和头部div.top、中部div.center一样,加上四个角的class如左上.topL,右上.topR3,要是信息框的显示方式用户可定制就好了。 比如我可以加一些渐变显示或者渐变消失的动画效果。google在这方面支持动画我的强
阅读全文
摘要:以下内容为Stackoverflow上整理的,仅供参考PRO 用IMG标签Use IMG plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people). —sanchothefat 如果图片是...
阅读全文
摘要:昨天在tutsplus.com上看到一篇不错的文章(http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/),作者Abhin Sharma手把手教“如何用jquery写一个浏览器兼容的图片预加载效果插件”,之前在搜狐的一些项目中有时也用到预加载图片...
阅读全文
摘要:元素的title属性常用于提示。但是不同浏览器下title的表现行为是不一样的。行为1-显示:各大浏览器基本上无大差异,鼠标移到元素上后即显示。行为2-消失:(下面操作行为假设鼠标一直在带title属性的目标元素内部进行)FF,出现title时如果不移动鼠标title提示不会消失,移动鼠标后title消失。消失后再次移动鼠标提示不会再次出现IE、Safari和Chrome,出现title提示大约5...
阅读全文
摘要:最近看了几篇关于前端开发的文章,结合实际体验总结分享下,什么是对象封装的粒度??先扯淡打个比方有一天你和你朋友们在路上偶遇一漂亮MM,无一不下巴下吊口不合拢,还差点撞到凤姐~~在这里,“漂亮”仅仅是对众人那位MM的笼统感觉,或许你觉得她从头到脚都很赞呢,你的朋友A觉得她眼睛水汪汪,抑或是朋友B就喜欢她腰细胸大。。。每个人对漂亮的定义,除了角度不一样外,也建立在不同的和范围。对象的粒度即该对象所覆盖的范围。在web前端世界里,一个完整的对象涵盖了相关的HTML结构、CSS样式和对应的交互脚本。如果看过面向对象的CSS(OOCSS)相关知识,你也会发现在针对某个对象比如产品(product)定义它
阅读全文
摘要:关于门户网站焦点图设计的一些总结 最近一段时间直和焦点图打交道-重构旧代码、抽象成JS插件等等。 焦点图,集图片、文字、动态交互效果于一体的内容呈现方式,在吸引眼球(所谓焦点)、页面排版优化等等诸多方面具有十分重要的作用。这点在内容至上的门户型网站中尤为重要。 在这个过程中积累了些经验想和大家分享下,套子比较适用于像搜狐、新浪这些大门户网站,对于个人网站、商务网站不一定都是对的,另当别论~~...
阅读全文
摘要:搜狐大部分网页都是gbk编码(据说新浪也一样),新装的aptan studio打开gbk或者gb2312编码的文档时会报Character encoding GBK is not supported by this platform 的错误,这是为什么呢?让Aptana 支持中文文章分类:Web前端 关键字: 软件 很多网上的方法说:Aptana Studio支持中文的方法:Aptana Stud...
阅读全文
摘要:SOHU痕迹快照(陆续更新)1,调查结果柱状图效果 上线时间 2010年5月底 线上地址 http://survey.sohu.com/poll/result.php?poll_id=31230 (所有调查结果页面) 开源脚本 sohu.surveyResult.js2,高清电影首页焦点图-类相册交互 上线时间 2010年9月26日 线上地址 http://tv.sohu.co...
阅读全文
摘要:以前看的一些资料常常教唆我们说:用表单标签label的时候,别忘了加上for属性绑定对应的input控件的id属性~这是为什么呢? 用于改善用户体验的。一般情况假设你的用户名后面是一个<input ...>标签,那么你只能选择输入框来选定你的输入框。如果加上<lable for=""...>那你点击输入框旁边的问题也能同样达到选择控件的目的。一般是作为方便鼠标用户的用户体...
阅读全文
摘要:Technorati Tags: CSS,CSS Hack
阅读全文
摘要:简单列举下设计导航菜单时要考虑的一些因素 1,完全基于图片的菜单导航意味着弱视的人无法调整菜单字体的大小。。。而且每次更新菜单时都要制作图片。。 2,用无序列表(ul)做菜单,对不同浏览器和设备(如移动设备)更具亲和性。 3,基于文本的菜单容易更新和修改 4,在导航菜单的细节设计时,创意地利用背景图片可以美观而又不缺乏灵活性。如mozilla采用的”滑动门”tab菜单 5,文本尺寸是否可...
阅读全文
摘要: 先了解下各个字体单位: 相对单位:px相对于设备屏幕的分辨率;em相对于父元素;ex相对于字母x的高度 绝对单位:in英寸;pt点距;pc picas;cm厘米;mm毫米 绝对单位太绝对了,放弃~ px是主流,但是ie支持不好。。在IE里利用“查看”=》“字体大小”切换大小没反应。 ex太冷了点。。 em还行吧。 基准尺寸加百分比模型 ...
阅读全文