随笔分类 -  html&css

关于ie6、ie7折行问题(li用了float)
摘要：HTML结构及CSS样式如下：li {float:left; margin-right:10px; } 文本1 文本2 文本3这个时候，在ie6、ie7中文字很可能出现断行（暂没发现其他浏览器出现这个问题）解决问题方法： 1）如果文本中没有空格，用word-break属性的keep-all参数可解决这个问题，2）如果文本中有空格，用white-space属性的nowrap 参数可解决问题。细节解释：1. 在CSS中关于换行的属于有两个分别是word-break以及white-space，其中word-break是IE的专有属性，由于这个折行... 阅读全文
posted @ 2013-07-15 11:54 李东振 阅读(320) 评论(0) 推荐(0)
CSS设置图片居中的方法
摘要：如果是应用了表格，那么设置单元格为align="center"就可以使其中的一切内容居中。如果没有应用表格要想设置图片居中就有点困难了。困难来自不按"常规出牌"的浏览器。按照CSS标准，只要设置了图片容器的CSS属性为 display:table-cell;vertical-align:middle;text-align:center;就可以使图片居中了。这个方法在Firefox Chrome Opera Safari都生效，因为它们是标准浏览器。而在IE中就是不行，IE它最牛了。以下是通过IE hack解决这个问题的方法： 阅读全文
posted @ 2013-07-11 17:30 李东振 阅读(426) 评论(0) 推荐(0)
Zen Coding 让 Notepad++ 代码书写健步如飞
摘要：Notepad++ 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度，优秀的语法高亮，干净整齐的代码缩进，便捷的括号高亮匹配赢得了无数人的喜爱。但，不知道有多少同学跟我一样，在coding 时被 Notepad++ 粗陋的代码自动补全折磨的体无完肤（Notepad++那甚至不能叫自动完成）。虽然无比羡慕诸如Dreamweaver之类的代码自动完成，但固于上述提到的几点Notepad++的优秀之处，纠结中毅然依旧坚守Notepad++。而 Zen Coding 的横空出世，总算终结了这种纠结，让我们得以以一种无比帅气的方式书写代码。先看一段演示视频吧（建议反复观摩，其中演示了 Zen Co 阅读全文
posted @ 2013-05-22 19:41 李东振 阅读(224) 评论(0) 推荐(0)
点击文字实现radio 选中（不使用js）
摘要：<input type="radio" name="sextype" value="0" id="sex0"><label for="sex0">男</label>或<label for="sex0"><input name="AltName" type="RADIO" tabindex="931" id="sex0">男</lab 阅读全文
posted @ 2013-05-13 14:13 李东振 阅读(222) 评论(0) 推荐(0)
看看接下来会发生什么：CSS3 Flexible Boxes
摘要：本文由大漠根据Shock Family的《A Look at What’s Coming Up: CSS3 Flexible Boxes》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.onextrapixel.com/2013/04/23/a-look-on-whats-coming-up-css3-flexible-boxes，以及作者相关信息——作者：Shock Family——译者：大漠设计一个网站，布局可能是最生要的元素之一。当你网站的用户理解你的布局和喜欢上你的网站布局，他们用起来很开心，这样用户 阅读全文
posted @ 2013-04-27 21:24 李东振 阅读(292) 评论(0) 推荐(0)
移动前端工作的那些事---前端制作之自适应制作篇
摘要：一、响应式布局 相应式布局的核心内容其实就是使用CSS3引入的MediaQuery模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。<linkrel=”stylesheet” type=”text/css”media=”screen and(max-device-width: 400px)”href=”tinyScreen.css” />上面的代码意思是，如果屏幕宽度小于400像素（max-device-width:400px），就加载tinyScreen.css文件。<P><linkrel=”stylesheet” type=”text/css”m 阅读全文
posted @ 2013-04-01 10:15 李东振 阅读(237) 评论(0) 推荐(0)
expression解决IE6下固定定位的兼容
摘要：本文所使用的技巧是用了一条 Internet Explorer 的 CSS 表达式 (expression) 。你不可以直接使用该表达式，因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用 eval 包裹你的语句。如何解决“振动”的问题？显然 IE 有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重新渲染页面，这个时候它就会重新处理 CSS 表达式。这会引起一个丑陋的“振动” bug ，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“跳动”。 解 决此问题的技巧就是使用 background-attachment:fixed 为 body 阅读全文
posted @ 2013-04-01 10:13 李东振 阅读(203) 评论(0) 推荐(0)
那些年我们一起清除过的浮动
摘要：浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局；恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 （Enclosing floator Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。1）清除 阅读全文
posted @ 2013-04-01 10:11 李东振 阅读(193) 评论(0) 推荐(0)
块级元素的高度自适应问题
摘要：div{height:auto!important;height:110px;min-height:110px;} 阅读全文
posted @ 2013-04-01 10:09 李东振 阅读(271) 评论(0) 推荐(0)
固定定位( Fixed positioning )
摘要：固定定位是绝对定位的一个子类。唯一的区别是，对于固定定位框，它的包含块由可视窗口( viewport1 )创建。对于连续媒介，固定定位框并不随着文档的滚动而移动。从这个意义上说，它们类似于固定的背景图形。对于页面媒介，固定定位框在每页里重复。对于需要在每一页底部放置一个签名时，这个方法非常有用。注意，IE6 中不支持固定定位( Fixed positioning )定位，通常的做法是使用绝对定位代替，并使用 Javascript 脚本控制绝对定位框的位置，使随页面滚动而相应的变化。以下示例代码是修改自 W3C 官方使用固定定位布局的一个例子：<!DOCTYPE HTML><H 阅读全文
posted @ 2013-04-01 10:02 李东振 阅读(785) 评论(0) 推荐(0)
KB012: 绝对定位( Absolute positioning )
摘要：KB012: 绝对定位( Absolute positioning )示例代码： <div style="position:relative; width:300px; height:300px; background-color:silver; border:5px solid red;"> <div style="width:100px; height:100px; background-color:blue;"></div> <div style="margin:0 0 0 100px; widt 阅读全文
posted @ 2013-04-01 10:01 李东振 阅读(256) 评论(0) 推荐(0)
[技巧] 同一段文本中，英文和汉字调用不同class样式
摘要：感谢东鳞西爪、Sevencity、Homelink、LeXRus。需求：要求所有文本中，汉字使用微软雅黑，阿拉伯数字和英语使用Arial。（文本中有好多的编号数字和部分英语）解决方式有两个，css方法和js方法。一、css方法：先定义一个英文字体再定义中文字体，这是因为英文字体中一般不含有中文，执行的时候英文和阿拉伯数字选用“Arial”,中文的字体使用第二个字体“微软雅黑”。比如，可以这样来定义WordPress中的中英文字体：body{ font-family:Arial,"微软雅黑";}*需要注意的是，这样的做法对符合网页规范的浏览器比如Firefox虽然有效，但对I 阅读全文
posted @ 2013-04-01 09:59 李东振 阅读(373) 评论(0) 推荐(0)
CSS常用浮出层的写法
摘要：浮出层是web页面中经常用到的功能，带有小小尖角的浮出层则更为生动，所以今天带给大家的是有角的浮出层，一起看看吧！贴上HTML： ◆◆ ◆◆ ◆◆ ◆◆Hi，知道吗？大前端D7主题很快就疯抢了！以上HTML构成了一个浮出层和四个方向的尖角，其实你只需要其中的一个span标签，所以真正用上的代码并没那么多。贴上CSS：.poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px5px;*padding: 7px 10px 4px;line-height: 16px;color:#DB7C22;font-size: 12px;ba 阅读全文
posted @ 2013-04-01 09:57 李东振 阅读(229) 评论(0) 推荐(0)
DIV透明度设置
摘要：<div id="Layer1" style="position:absolute; width:200px; height:115px; left:50px;top:50px;filter:alpha(opacity=30);opacity: 0.6;background-color:blue"></div>opacity值越大，透明度越高FF<script>document.getElementByIdx_xx_x("Layer1").style.opacity= "0.3" 阅读全文
posted @ 2013-04-01 09:56 李东振 阅读(157) 评论(0) 推荐(0)