随笔分类 -  WEB-CSS/HTML

1
清除浮动after
摘要:.clearf{display: inline-block;}.clearf:after {content: "."; display: block;height: 0; clear: both; visibility: hidden;}/* Hides from IE-mac \*/* html .clearf {height: 1%;}.clearf {display: block;}/* End hide from IE-mac */ 阅读全文
posted @ 2013-09-14 10:28 深海大虾
html+css高度100%的时候边框超出,出现滚动条的解决办法,带边框的100%高度
摘要:<!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> <title></title> <style type="text/css"> html,body{ ma 阅读全文
posted @ 2012-11-29 16:12 深海大虾
keycode对应主要键的关系
摘要:65-90 Aa-Zz192 `~46 delete del48-570) 1! 2@ 3# 4$ 5% 6^ 7& 8* 9(186-191;: += ,< -_ .> /?219-222[{ \| ]} '"32 空格8 退格13 回车功能键27 esc功能键=================主键盘区域输入符//出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果,转载请注明出处,谢谢!96-105 0-913 回车功能键106 *107 +109 -110 .111 /==================小键盘区域输 阅读全文
posted @ 2012-11-15 16:15 深海大虾
CSS预处理器 SASS 和 Compass
摘要:近段时间踌躇,了解extjs的themes时发现了sass,刚好又是基于ruby的,今后说不定就要用这个了发个指南记录下 想深入了解的朋友自己google资料了http://ruby-china.org/topics/4396官方资料http://sass-lang.com/docs.html 阅读全文
posted @ 2012-08-31 13:20 深海大虾
web前端关于@media的说明及使用
摘要:相关阅读请跳转至:http://www.w3.org/TR/CSS2/media.htmlhttp://www.swordair.com/blog/2010/08/431/http://www.zhangxinxu.com/css3/css3-media-queries.phphttp://www.jquery001.com/css-media-function.html7 Media typesContents7.1 Introduction to media types7.2 Specifying media-dependent style sheets7.2.1 The @media r 阅读全文
posted @ 2012-08-31 13:05 深海大虾
IE条件语句,IE hack大全
摘要:Conditional comments only work in IE, and are thus excellently suited to give special instructions meant only for IE. They are supported from IE 5 onwards.Conditional comments work as follows:<!--[if IE 6]>Special instructions for IE 6 here<![endif]-->Their basic structure is the same as 阅读全文
posted @ 2012-03-31 16:05 深海大虾
ul嵌套ul IE7-下空白行解决方案
摘要:为所有的ul指定宽度后解决 阅读全文
posted @ 2012-03-12 13:44 深海大虾
怎样保持页脚始终在页面底部无论页面几屏或是页面不足一屏
摘要:How to keep footers at the bottom of the pageWhen an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of 阅读全文
posted @ 2011-11-26 00:32 深海大虾
CSS模拟HTML滚动条
摘要:一大特点是JS遮罩层可以覆盖到滚动条,弊端就是如果body设置有背景 那背景是不会随着滚动条滚动的,也是一大特色 演示如下 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta 阅读全文
posted @ 2011-11-24 18:10 深海大虾
SWeTE—免费为你的网站创建多国语言版本
摘要:SWeTE—免费为你的网站创建多国语言版本详细内容百度搜索 阅读全文
posted @ 2011-07-28 18:23 深海大虾
IE6下的PNG图片半透明问题解决(a:hover)
摘要:源文件及文档地址压缩包下载复制这张图片地址下载然后更改后缀名为ZIP即可不怕大家笑话,今天一下午竟鼓捣IE6下半透明图片的问题了。简单方法是有,用滤镜,但我在Firefox下不能正常浏览,况且又耗资源,还不是WEB标准所提倡的,所以,弃之。filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1.png', sizingMethod='crop');之后开始网上搜资料,试了3,4个,不是把自己页面撑破了的(可能自己哪些地方写的不好),就是鼠标划过效果的png图片不能透明,反正是 阅读全文
posted @ 2011-07-27 11:28 深海大虾
HEAD元素使用集锦
摘要:HEAD元素使用集锦---摘自《》(文/) HTML文档由两部分组成:Head(主题部分,一般来说是不可见的)和Body(正文部分,在浏览器中是可见的)。随着FrontPage及Dreamweaver(简称DW)等可视化的网页编辑器的流行,不懂HTML也可以做一个具有专业水平的网页已经不是一个梦。但是,这些主页制作工具都不能自己生成一个好的主题部分,这就需要我们来了解一下其中的元素了。 一、Head元素 Meta 它记录当前页面的信息,例如字符编码、作者、版权和关键字等。还可以用来向服务器提供信息,例如截止日期和页面刷新间隔等。它的两种基本用法是:告诉浏览器网页所识别的文件类型及语言类型;让搜 阅读全文
posted @ 2010-11-05 16:47 深海大虾
让ie8按照ie7 的方式来进行解析
摘要:在head标签里加上一行:<meta http-equiv="X-UA-Compatible" content="IE=7" />即可让ie8按照ie7 的方式来进行解析 阅读全文
posted @ 2010-10-26 23:24 深海大虾
LI中内容超过长度后以省略号显示的方法
摘要:LI中内容超过长度后以省略号显示的方法 此方法适用与IE与OP浏览器 <style type="text/css"> <!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; }--> </style> 阅读全文
posted @ 2010-10-26 23:16 深海大虾
DIV+CSS布局页面渲染速度更快的写法
摘要:1、*{} #zishu *{} 尽量避开由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签;*{margin:0; padding:0} 如果这样写,页面中所有的标签的margin全是0;padding也是0;#zishu *{margin:0; padding:0}如果这样写,在id等于zishu下边的所有标签的margin全是0;padding也是0;这样写的问题是:遍历会消耗很多的时间,如果你 阅读全文
posted @ 2010-10-26 22:41 深海大虾
IE6下z-index层以及绝对定位的PNG背景透明层中&lt;a&gt;标签链接失效的解决办法
摘要:z-index : a:hover{ z-index:999;}绝对定位的PNG背景透明层: a{ position:relative;} 阅读全文
posted @ 2010-08-29 20:37 深海大虾
DIV+CSS一种简单的左边图片右边多行文字的布局
摘要:<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.content a.left{ float:left;}#yz{ margin-left:90px;}</style& 阅读全文
posted @ 2010-08-20 19:40 深海大虾
IE6下fixed解决方案
摘要:通过只对IE的expression属性来实现,即通过expression调用JS来实现position:fixed效果。 目前网上有的比较多的是这种解决方案(纯CSS): html{overflow:hidden;} body{height:100%;overflow:auto;} #rightform form{position:absolute;right:30px;top50px;} 这个方法有一个bug未解决:在IE6下会把所有position:absolute都变成"浮动"的元素;还有使用js方法滚动滚动条时会出现对象闪烁,如下方法结合了CSS和js的办法,解决了 阅读全文
posted @ 2010-08-03 11:16 深海大虾
IE浏览器中iframe背景BODY透明
摘要:IE浏览器中iframe会出现默认的白色背景及边框,影响美观。有边框的正常,但IE默认的HTML背景色为白色,而FF默认背景色为透明色。此外iframe在IE中长宽为300*150,其中边框为2px宽;FF 中为304*154,边框也同样为2px。(这里所说宽算边框的宽度)现有两个文件:main.html 和t ransparentBody.html其中transparentBody.htm是嵌套在main.htm之中,为了便于看效果在BODY中加入蓝色背景请看效果图:main.html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 阅读全文
posted @ 2010-07-31 15:30 深海大虾
HTML、CSS里面关于 id、class、name 属性的区别和用法
摘要:name和idname原来是为了标识之用,但是现在根据规范,都建议用id来标识元素。以下只能用name: 1. 表单(form)的控件名,提交的数据都用控件的name而不是id来控制。因为有许多name会同时对应多个控件,比如checkbox和radio,而id必须是全文档中唯一的。此外浏览器会根据name来设定发送到服务器的request。因此如果用id,服务器是无法得到数据的。 2. frame和window的名字,用于在其他frame或window指定target。以下只能用id: 1. label与form控件的关联, <label for="MyInput" 阅读全文
posted @ 2010-05-28 15:47 深海大虾

1