随笔分类 -  xhtml/Css

xhtml/Css
新闻列表 平均布局
摘要：如何在css上定义样式不需要程序员通过判断增加特殊类来实现平均布局？实现下面效果：已知条件：程序代码：echo "<ul>";foreach(...){ echo "<li><a href='".$val.url."'>".$val.title."</a></li>";}echo "</ul>"; 第一种方法：利用负边距。在盒子模型中margin是算到实际宽度中。且浮动元素有足够宽度才能与上一个元素并排。第二 阅读全文
posted @ 2011-12-21 00:32 Tomi-Eric's 阅读(280) 评论(0) 推荐(0)
css z-index 层叠顺序体验
摘要：这是什么？Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。为了更清晰的描述Z-index是如何工作的，上面的这张图片夸大展示了层叠元素在视觉位置上的关系。自然的层叠顺序在一个HTML页面中，自然的层叠顺序（也就是元素在Z轴上的顺序）是由很多因素决定的。下面的是一个列表，它展示的列表项是处于一个层叠环境（stacking context，暂时未找到合适的汉语翻译，应该是指层叠的元素所处的那个层叠的环境）中，这些项是处于这个层叠环境 阅读全文
posted @ 2011-11-20 00:13 Tomi-Eric's 阅读(284) 评论(0) 推荐(0)
PS切图 PSD to HTML 教程
摘要：英文书籍。看不懂的地方学会自备翻译工具。 找了好久都没有中文关于ps切图相关教程和书籍。 其实换一个关键字“PSD to HTML”会好很多， PS切图相关一些教程貌似还停留在那个到处table布局的方法。 阅读全文
posted @ 2011-10-01 01:02 Tomi-Eric's 阅读(701) 评论(0) 推荐(0)
一些ie BUG总结
摘要：最近几天试着写一个企业站，因为觉得这也企业cms系统比较简单。从模块功能分析，到photoshop原型建立制图，再到美工美化，完成PS切图和xhtml页面。后面接下来是用一个简单asp的cms系统核心代码（函数库，数据库处理类）进行二次开发。不过现在要讲得时xhtml页面制作时候，要做到兼容ie6，就整整写了一天。真是汗！！！1.浮动中padding-bottom失效，需要清除浮动<style type="text/css">.clear{ background: none; border: 0; clear: both; display: block; ... 阅读全文
posted @ 2011-09-03 17:27 Tomi-Eric's 阅读(317) 评论(0) 推荐(0)
Tip中小三角的实现
摘要：前段时间专门研究了一下腾讯微博的Tip，很有意思！tip中的小箭头是用“◆”（encode为：◆）字符模拟的。以前也写过类似的实现方案《用css的border属性实现三角》。用“◆”字符模拟小三角有一个有点就是：比如tip有border时，也可以用两个绝对定位的“◆”字符模拟。 作者：愚人码头 ... 阅读全文
posted @ 2011-08-28 10:58 Tomi-Eric's 阅读(601) 评论(0) 推荐(0)
html静态页面跳转
摘要：在看dhtmlxTree的demo时，发现访问index.html时跳转到docsExplorer目录下的index.html 查看源码，很少人会用的代码。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>DHTMLX Package</title> <META HTTP-EQUIV=REFRESH CONTENT="1;URL=docsExplorer/index.html" 阅读全文
posted @ 2010-12-22 08:55 Tomi-Eric's 阅读(912) 评论(1) 推荐(0)
漂亮的博客搜索框
摘要：看到漂亮的搜索框，收藏...主要用背景图片和输入框和链接隐藏完成。可以在IE6+,ff，chorme下兼容...<!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><meta http-equiv=" 阅读全文
posted @ 2010-07-30 14:25 Tomi-Eric's 阅读(1161) 评论(1) 推荐(0)
CSS伪类
摘要：伪类浏览器支持：IE Internet Explorer, F: Firefox, N: Netscape。W3C：“W3C” 列的数字显示出伪类属性由哪个 CSS 标准定义（CSS1 还是 CSS2）。伪类作用IEFNW3C:active将样式添加到被激活的元素4181:focus将样式添加到被选中的元素---2:hover当鼠标悬浮在元素上方时，向元素添加样式4171:link将特殊的样式添加到未被访问过的链接3141:visited将特殊的样式添加到被访问过的链接3141:first-child将特殊的样式添加到元素的第一个子元素172:lang允许创作者来定义指定的元素中使用的语言18 阅读全文
posted @ 2010-07-23 17:07 Tomi-Eric's 阅读(230) 评论(0) 推荐(0)