2011年11月14日

1-3-1变化两边，固定中间的布局

摘要：这里做出的效果是，固定中间不变，左右两边随着浏览器的变化，而变化实现代码如下：<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">#header,#content,#footer 阅读全文

posted @ 2011-11-14 11:02 苦笑一下阅读(195) 评论(0) 推荐(0)

1-3-1可以变化宽度的简单布局

摘要：这里面我们要做的就是，当浏览器变化时，布局也同时跟着变化。实现这一简单效果，代码如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#header,#content,#footer{background-color:#ccc;border:1px solid #00 阅读全文

posted @ 2011-11-14 10:57 苦笑一下阅读(389) 评论(0) 推荐(0)

2011年10月29日

spry可折叠面板

摘要：这里我们要实现的是一个，可折叠面板，效果如图所示：首先我们建立一个HTML文件，保存后，在工具栏找到折叠面板,如图所示：连续插入几个这样的面板，就会出现多个可折叠面板了要做到如图这种效果首先我们要准备四个背景图片：首先我们来研究一下HTML代码，这里也需要JavaScript文件和css文件。<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script><link href="SpryAssets/SpryAccordion.cs 阅读全文

posted @ 2011-10-29 15:07 苦笑一下阅读(4700) 评论(0) 推荐(0)

2011年10月28日

折叠面板

摘要：这也是基于spry的基础上完成得，效果如图所示首先建立基本的HTML文档，保存后插入Spry工具栏中最右边的“Spry可折叠面板”如图所示连续插入几个，然后准备背景图片设置这一效果的代码如下：.CollapsiblePanel {width:300px;margin:0px;padding:0px;}设置基础的，固定一下宽带.CollapsiblePanelTab {background:url(../t1.gif) no-repeat;line-height:30px;margin: 0px;padding: 2px 30px;cursor: pointer;-moz-user-select 阅读全文

posted @ 2011-10-28 13:03 苦笑一下阅读(325) 评论(0) 推荐(0)

借助于spry实现Tab面板

摘要：本例我们想最终实现的效果，如图所示，单击某个Tab时，就会切到该页面。首先我们新建一个HTML文档，然后在“插入”工具栏中选择“spry”项目。单击如图所示，这时视图窗口就会出现一个最基本的Tab面板了右数第四个。下面的任务就是以spry为基础，通过CSS样式的设置，实现更为美观的Tab面板。也可以根据自己希望得设计更美观的效果这里我们要用到的3个图像如图所示下面我们要找到自动生成的css文档，不改动其中的名称，在其基础上进行修改就可以了这里还说明了，鼠标经过时变换面板的javascript代码。修改后的CSS样式如下：.TabbedPanels {margin: 0px;padding: 0 阅读全文

posted @ 2011-10-28 12:46 苦笑一下阅读(1201) 评论(0) 推荐(0)

2011年10月25日

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

摘要：这是在前一文的基础上完成的，最终效果如图所示：实现这一效果的完整代码如下：<style type="text/css">table{color:#565;font:12px arial;}td{border-bottom:2px solid #b3de94;border-top:3px solid #fff;padding:9px;}tr{background-color:#dfc;}td.hover{background-color:#595;color:#fff;}</style></head><body><tabl 阅读全文

posted @ 2011-10-25 18:17 苦笑一下阅读(238) 评论(0) 推荐(0)

CSS 美化表格

摘要：首先要搭建HTML结构，代码如下：<table summary="book list"><caption>Book List</caption> <thead> <col /><col /><col /><col /><col /><col class="price"/> <tr> <th>Title</th> <th>ID</th> <th>Country< 阅读全文

posted @ 2011-10-25 18:09 苦笑一下阅读(4698) 评论(0) 推荐(0)

改变表格的效果

摘要：这里我们用最简单的代码来改善原始表格的样式，基本的代码如下：<style type="text/css">.ranking{font:14px 宋体;border:2px orange solid;text-align:center;/*border-collapse:collapse; 合并边框*/border-spacing:20px;}.ranking td{border:1px orange dashed;}.ranking th{border:1px orange solid;}</style></head><body&g 阅读全文

posted @ 2011-10-25 18:04 苦笑一下阅读(290) 评论(0) 推荐(0)

CSS下拉菜单---实现主菜单项不同颜色

摘要：实现主菜单不同颜色的下拉菜单，效果如图所示：一下是实现此下拉菜单的全代码：<style type="text/css">#menu{margin:0;padding:0;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;background:#cb6 url(bottom.gif) no-r 阅读全文

posted @ 2011-10-25 17:54 苦笑一下阅读(1641) 评论(0) 推荐(0)

HTML中的dl、dt和dd标记

摘要：这里介绍一组HTML标记----dl、dt和dd。这组标记和ul、li非常类似，也用于列表结构。dl被称为“定义列表”，在使用方法上相当于ul；dt和dd分别称为“定义标题”和“定义描述”，它们在使用方法上相当于li。例如有下面的一段代码：<dl><dt>北京市大学</dt> <dd>清华大学</dd> <dd>北京大学</dd> <dd>人民大学</dd> <dt>上海市大学</dt> <dd>复旦大学</dd> <dd>交通阅读全文

posted @ 2011-10-25 17:47 苦笑一下阅读(9405) 评论(0) 推荐(0)

导航

2011年11月14日

2011年10月29日

2011年10月28日

2011年10月25日