Tomi-Eric's - 博客园

2011年12月21日

如何在css上定义样式不需要程序员通过判断增加特殊类来实现平均布局？

实现下面效果：

已知条件：

程序代码：

echo "<ul>";
foreach(...){
      echo "<li><a href='".$val.url."'>".$val.title."</a></li>";
}
echo "</ul>";

第一种方法：利用负边距。

在盒子模型中margin是算到实际宽度中。

且浮动元素有足够宽度才能与上一个元素并排。

第二种方法：绝对定位

缺点是外部包裹div需设定高度，对新闻列表还方便但不利于页面布局。

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>新闻列表</title>
<style type="text/css">
*{margin:0;padding:0}
ul{list-style-position:inside}
a{text-decoration:none}
body{font:12px/150% "Trebuchet MS", Arial, Helvetica, sans-serif}
/*--负边距实现法--*/
.news_list{margin:20px auto;width:520px;border:1px solid #ababab;background:#f9f9f9;overflow:hidden}
.news_list ul{display:inline-block;margin-right:-20px}
.news_list li{float:left;width:250px; margin-right:20px;background:#fcc}
.news_list2{margin:20px auto;width:790px;border:1px solid #ababab;background:#f9f9f9;overflow:hidden}
.news_list2 ul{display:inline-block;margin-right:-20px}
.news_list2 li{float:left;width:250px; margin-right:20px;background:#fcc}
/*--绝对定位法--*/
.news_list3{margin:20px auto;width:790px;height:100px;border:1px solid #ababab;background:#f9f9f9;overflow:hidden; position:relative}
.news_list3 ul{display:inline-block; position:absolute;width:810px}
.news_list3 li{float:left;width:250px;margin-right:20px;background:#fcc}
/*--伪类--*/
li:odd{margin-right:20px}
</style>
<script type="text/javascript">
//javascript 遍历判断法
/*--jquery 选择器设置css
*---$("li:odd").css({"margin-right":"20px"}); 两列
*---$("li:nth-child(2n+1)").css({"margin":"0px 20px"}); 三列 只要中间列 n=0
--*/
</script>
</head>
<body>
<div class="news_list">
	<ul>
    	<li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
    </ul>
</div>
<div class="news_list2">
	<ul>
    	<li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
    </ul>
</div>
<div class="news_list3">
	<ul>
    	<li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <li><a href="#">adobe dreamweaver mxp</a></li>
        <!--foreach{-->
            <li><a href="#">adobe dreamweaver mxp</a></li>
        <!--}-->
    </ul>
</div>
</body>
</html>

posted @ 2011-12-21 00:32 Tomi-Eric's 阅读(25) 评论(0) 编辑

2011年11月20日

css z-index 层叠顺序体验

这是什么？

Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。

为了更清晰的描述Z-index是如何工作的，上面的这张图片夸大展示了层叠元素在视觉位置上的关系。

自然的层叠顺序

在一个HTML页面中，自然的层叠顺序（也就是元素在Z轴上的顺序）是由很多因素决定的。下面的是一个列表，它展示的列表项是处于一个层叠环境（stacking context，暂时未找到合适的汉语翻译，应该是指层叠的元素所处的那个层叠的环境）中，这些项是处于这个层叠环境的底部的。这个列表中的项都没有被赋予Z-index属性。

元素的背景和边框会创建一个stacking context

引用:
·具有负值的stacking contexts元素，按照出现的先后顺序排列（越靠后层级越靠上）
·没有被定位，没有浮动的块级元素，按照出现的先后顺序排列
·没有被定位，浮动的元素，按照出现的先后顺序排列
·内联元素，按照出现的先后顺序排列排列
·被定位的元素，按照出现的先后顺序排列

Z-index 属性，当被正确使用的时候，会改变自然的层叠顺序。

当然，除非元素已经被定位按照互相交叠的形式展现，否则元素的层叠顺序并不会特别的明显。下面的，负边距的BOX被拿来展示，用以说明自然的层叠顺序。

《全透视:CSS Z-index 属性》蓝色理想：http://www.blueidea.com/tech/web/2009/7060.asp

z-index是个神奇的属性，因此在前端中许多效果都会涉及它。

它是个什么东西呢，试玩一下吧。

<!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="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="Tomi-Eric" />
<meta name="Description" content="Tomi-Eric,练习实例" />
<meta name="author" content="Tomi-Eric" />
<meta name="copyright" content="Tomi-Eric,练习实例" />
<title>简单的XHTML页面</title>
<style type="text/css">
#main{position:relative}
#layer-1,#layer-2,#layer-3,#layer-4,#layer-5{position:absolute;width:500px;height:300px}
#layer-1{top:10px;left:10px;background:#ccc}
#layer-2{top:30px;left:50px;background:#f00}
#layer-3{top:50px;left:100px;background:#ff0}
#layer-4{top:100px;left:150px;background:#f90}
#layer-5{top:150px;left:200px;background:#999}
</style>
<script type="text/javascript">
function reset(){
      var select_id="layer-"+$("select_id").value;
   $(select_id).style.zIndex+=10;
   var div=$("main").getElementsByTagName("div");
   showZindex("layer-",div);
}
function $(id){
     if(typeof(id)=="string"){
       return document.getElementById(id);
}
}
function showZindex(id,div){
    for(var i=0;i<=div.length-1;i++){
      alert(id+(i+1)+":"+div[i].style.zIndex);
}
}
</script>
</head>
<body>
<select name="select_id" id="select_id">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="调整" onclick="reset()">
<div id="main">
    <div id="layer-1">layer-1</div>
<div id="layer-2">layer-2</div>
<div id="layer-3">layer-3</div>
<div id="layer-4">layer-4</div>
<div id="layer-5">layer-5</div>
</div>
</body>
</html>

posted @ 2011-11-20 00:13 Tomi-Eric's 阅读(14) 评论(0) 编辑

2011年10月10日

PHP书籍资源

Verycd上搜索可以都到一大把。

犀牛书看起来很困。

作为入门新手，可以试着读较浅的书，国内的，有多余时间可以读。

没空不建议花时间在这上面。

《PHP动态网页设计与制作案例教程》(房爱莲)

http://www.docin.com/p-224316273.html

这本比较新点不过是大学教材

《细说PHP》兄弟连杰作，应该很多筒子看过他们的视频

http://www.verycd.com/topics/2906309/

有PDF+视频，买书的钱又省了。省下的买好书。

《大道PHP》

http://www.verycd.com/topics/2891269/

posted @ 2011-10-10 20:51 Tomi-Eric's 阅读(31) 评论(0) 编辑

2011年10月2日

asp utf-8 gb2312 乱码问题

1.头部声明

utf-8:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

...

gb2312:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

2.html的meta声明

utf-8:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

... ...

gb2312:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

3.session中声明.一般放到config文件即可，每个页面都引用到。

response.Charset="UTF-8"
Session.CodePage=65001

posted @ 2011-10-02 14:46 Tomi-Eric's 阅读(25) 评论(0) 编辑

2011年10月1日

PS切图 PSD to HTML 教程

摘要: 英文书籍。看不懂的地方学会自备翻译工具。找了好久都没有中文关于ps切图相关教程和书籍。其实换一个关键字“PSD to HTML”会好很多， PS切图相关一些教程貌似还停留在那个到处table布局的方法。阅读全文

posted @ 2011-10-01 01:02 Tomi-Eric's 阅读(98) 评论(0) 编辑

2011年9月22日

原生态javascript-图片切换效果

摘要: 最近在看《JavaScript+DOM编程艺术》。好像没什么吸收。Dom查找方法：getElementById() //返回id元素getElementsByTagName() //按照标签名返回该标签集合getAttribute() //得到该元素某个属性值setAttribute()//设置元素的属性值本文主要利用setAttribute()来改变img的href属性值达到图片切换效果。按照javascript美术馆写成了这个效果。源码：<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" &阅读全文

posted @ 2011-09-22 01:28 Tomi-Eric's 阅读(81) 评论(0) 编辑

2011年9月17日

图片放大查看细节效果

摘要: 参照《锋利的jQuery》第三章最后实例改写。利用div的背景来定位显示的图片位置。背景图片的定位=鼠标移动所在位置-鼠标响应的A标签所在页面的位置。效果图:<!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> &l阅读全文

posted @ 2011-09-17 14:19 Tomi-Eric's 阅读(79) 评论(0) 编辑

2011年9月4日

利用透明图片遮罩制作圆角焦点图

摘要: 利用透明图片遮罩制作圆角焦点图的好处是后台上传图片，不用经过ps处理成圆角。无论任何图片在首页焦点图显示都为圆角。弊端是遮罩图片除透明区外颜色应该和背景颜色相同。<!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>&阅读全文

posted @ 2011-09-04 21:52 Tomi-Eric's 阅读(62) 评论(0) 编辑

2011年9月3日

一些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 阅读(45) 评论(0) 编辑

2011年8月28日

Tip中小三角的实现

摘要: 前段时间专门研究了一下腾讯微博的Tip，很有意思！tip中的小箭头是用“◆”（encode为：◆）字符模拟的。以前也写过类似的实现方案《用css的border属性实现三角》。用“◆”字符模拟小三角有一个有点就是：比如tip有border时，也可以用两个绝对定位的“◆”字符模拟。作者：愚人码头 ...阅读全文

posted @ 2011-08-28 10:58 Tomi-Eric's 阅读(94) 评论(0) 编辑

仅列出标题下一页

WEBDesign笔记

www.fenxiangyuan.com|分享园站筹备中...

公告