死証朙萿過 - 博客园

2011年11月7日

摘要：本例是根据上三例子的原理来做的。用的最多的也就是浮动和定位。效果图：代码如下：<!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" 阅读全文

posted @ 2011-11-07 08:50 死証朙萿過阅读(146) 评论(0) 推荐(0) 编辑

2011年11月4日

1-3-1动态随屏幕变化而变化

摘要：本例是先做一个比较简单一点的都可以变化，逐步在做更为复杂的例子。对于变宽的布局，首先要使内容的整体宽度随浏览器的变化而变化。因此，中间content容器中的三列的总宽度也会变化。下面先从等比例方式开始。效果图：实现代码：<!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 阅读全文

posted @ 2011-11-04 13:18 死証朙萿過阅读(187) 评论(0) 推荐(0) 编辑

2011年10月28日

固定宽度布局

摘要：现在我们来制作最经常用到的1-2-1布局。是在之前的例子中添加了一个side栏。但是通常情况下，两个div只能竖直排列。为了让content和side能够水平排列，必须把他们放到另一个div中，然后使用浮动或绝对定位的方法，使content和side并列起来。本例是用浮动效果做的。如果想要图像跟着屏幕的大小而进行改变的话就把宽度设置为百分比，那么它就可以跟着屏幕的大小而改变了。效果如图：下面是制作的代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 阅读全文

posted @ 2011-10-28 13:02 死証朙萿過阅读(177) 评论(0) 推荐(0) 编辑

单列布局

摘要：这是一个最简单的一种布局形式，通过本例希望读者能够顺利复习之前的圆角框的制作方法。把他们居中是把margin值设为0，auto就可以实现了。实现效果如图：以下是代码：<!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-10-28 12:51 死証朙萿過阅读(232) 评论(0) 推荐(0) 编辑

2011年10月25日

用spry做折叠面板

摘要：在基于Spry的基础上实现了Tab面板之后，再来制作一个折叠面板的页面，效果如图所示。图中一共有3个折叠面板，每个面板都有一个标题，单击一个标题，就可以实现面板的折叠隐藏或展开。图1为折叠起来的效果，2为展开后的效果。 1 2以上两张图黑色的均为鼠标经过时的颜色。制作折叠面板的html代码如下：<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>//这是链接javascript文件的代码<link href=&quo 阅读全文

posted @ 2011-10-25 17:55 死証朙萿過阅读(931) 评论(0) 推荐(0) 编辑

2011年10月24日

借助于spry实现Tab面板

摘要：中间用了滑动门效果来实现圆角图。最终实现效果图：原图：下面是html页面中的代码：<!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&qu 阅读全文

posted @ 2011-10-24 11:32 死証朙萿過阅读(703) 评论(0) 推荐(0) 编辑

2011年10月14日

下拉菜单

摘要：本案例是制作一个下拉菜单，图1为鼠标离开菜单是子菜单未打开的效果，图2是子菜单打开后的效果。IE6同样兼容。图1图2<style type="text/css">#menu{margin:0px;padding:0px;width:800px;list-style-type:none;font:14px "宋体";}#menu li{float:left;width:150px;padding:0px;margin:0 1px 0 0;}#menu li dl{width:150px;margin:0px;padding:0 0 10px 0 阅读全文

posted @ 2011-10-14 13:24 死証朙萿過阅读(145) 评论(0) 推荐(0) 编辑

Excel方式二维变色提示的表格

摘要：根据上述的鼠标经过整行变色来继续进行改进，来实现似于Excel的行列的二维提示如图所示，当鼠标指针经过某一个单元格时，相应的列头和列头单元格会同时变色。<style type="text/css">table{color:#565;font:12px Arial, Helvetica, sans-serif;}td{border-bottom:2px solid #b3de94;border-top:2px solid #fff;padding:9px;}tr{background-color:#dfc;}td:hover,td.hover{background 阅读全文

posted @ 2011-10-14 13:14 死証朙萿過阅读(258) 评论(0) 推荐(0) 编辑

2011年10月13日

鼠标经过变色

摘要：效果图为了要IE6同样兼容所以用了javascript中的onmouseout和onmouseover两个属性。因为要判断鼠标在哪一行所以还要做一个for循环。代码如下：<style type="text/css">table{color:#565;font:12px Arial, Helvetica, sans-serif;}td{border-bottom:2px solid #b3de94;border-top:2px solid #fff;padding:9px;}tr{background-color:#dfc;}tr:hover,tr.hover{b 阅读全文

posted @ 2011-10-13 09:19 死証朙萿過阅读(735) 评论(0) 推荐(0) 编辑

2011年10月12日

表格的边框

摘要：之前学的制作表格样式时就是直接用的表格看上去很死板而且只能用同一种线型和颜色，但是用css布局就可以改变原来的不足之处，这篇就是用css和div布的局让它看起来没原来那么死板。效果图<style type="text/css">.ranking{font:14px "宋体";border:2px orange solid;text-align:center;border-collapse:collapse;}.ranking td{border:1px orange dashed;}.ranking th {border:1px orange 阅读全文

posted @ 2011-10-12 10:45 死証朙萿過阅读(146) 评论(0) 推荐(0) 编辑