随笔分类 -  HTML和CSS

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

点击右上角即可分享
微信分享提示