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)

CSS导航菜单--会跳起的多彩菜单

摘要：这里来实现跳起的效果。是基于前一例的制作过程，让菜单跳起时，就是让菜单项在鼠标指针式，使菜单文字所在的p段落变高一些。1,首先改造HTML。在每个li中，增加一个div，把类别名设为“pad”，即垫子的意思，代码如下：<li> <a href="#"> <div class="pad"></div> <div class="row1"></div><div class="row2"></div> <div clas 阅读全文

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

CSS导航菜单--不使用图像圆角菜单

摘要：前面我们做的圆角菜单都是使用图片来完成得，有局限性。下面介绍一种纯使用css完成的菜单。1，搭建基本的HTML代码<body><ul> <li class="item"> <a href="#"> <div class="row1"></div><div class="row2"></div> <div class="row3"></div><div class=&quo 阅读全文

posted @ 2011-10-25 13:30 苦笑一下阅读(934) 评论(0) 推荐(0)

导航

2011年10月25日