- 浏览: 5106377 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
silence19841230:
先拿走看看
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
masuweng 写道发下源码下载地址吧!三个相关文件打了个包 ...
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
发下源码下载地址吧!
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
水淼火 写道你好,我使用以后,图标不显示,应该怎么引用呢,谢谢 ...
前端框架iviewui使用示例之菜单+多Tab页布局
依照WEB2.0风格,设计了几个表格样式,希望大家喜欢。
WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择。
现在使用介绍使用CSS样式表来控制、美化表格的方法。
可以到我的网络硬盘下载源码:http://wallimn.ys168.com
/***********本人原创,欢迎转载,转载请保留本人信息*************/
作者:wallimn 电邮:wallimn@sohu.com 时间:2008-11-13
博客:http://blog.csdn.net/wallimn http://wallimn.iteye.com
网络硬盘:http://wallimn.ys168.com
/***********文章发表请与本人联系,作者保留所有权利*************/
WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择。
现在使用介绍使用CSS样式表来控制、美化表格的方法。
<!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=gb2312" /> <title>精美的表格样式</title> <style type="text/css">... <!-- body,table{...}{ font-size:12px; } table{...}{ table-layout:fixed; empty-cells:show; border-collapse: collapse; margin:0 auto; } td{...}{ height:20px; } h1,h2,h3{...}{ font-size:12px; margin:0; padding:0; } .title {...}{ background: #FFF; border: 1px solid #9DB3C5; padding: 1px; width:90%;margin:20px auto; } .title h1 {...}{ line-height: 31px; text-align:center; background: #2F589C url(th_bg2.gif); background-repeat: repeat-x; background-position: 0 0; color: #FFF; } .title th, .title td {...}{ border: 1px solid #CAD9EA; padding: 5px; } /**//*这个是借鉴一个论坛的样式*/ table.t1{...}{ border:1px solid #cad9ea; color:#666; } table.t1 th {...}{ background-image: url(th_bg1.gif); background-repeat::repeat-x; height:30px; } table.t1 td,table.t1 th{...}{ border:1px solid #cad9ea; padding:0 1em 0; } table.t1 tr.a1{...}{ background-color:#f5fafe; } table.t2{...}{ border:1px solid #9db3c5; color:#666; } table.t2 th {...}{ background-image: url(th_bg2.gif); background-repeat::repeat-x; height:30px; color:#fff; } table.t2 td{...}{ border:1px dotted #cad9ea; padding:0 2px 0; } table.t2 th{...}{ border:1px solid #a7d1fd; padding:0 2px 0; } table.t2 tr.a1{...}{ background-color:#e8f3fd; } table.t3{...}{ border:1px solid #fc58a6; color:#720337; } table.t3 th {...}{ background-image: url(th_bg3.gif); background-repeat::repeat-x; height:30px; color:#35031b; } table.t3 td{...}{ border:1px dashed #feb8d9; padding:0 1.5em 0; } table.t3 th{...}{ border:1px solid #b9f9dc; padding:0 2px 0; } table.t3 tr.a1{...}{ background-color:#fbd8e8; } --> </style> <script type="text/javascript">... function ApplyStyle(s)...{ document.getElementById("mytab").className=s.innerText; } </script> </head> <body> <div class="title"> <h1>大家好,CSS与表格的结合示例</h1> <table><tr><td> 点击链接切换样式:<a href="javascript:;" onclick="ApplyStyle(this)">t1</a> <a href="javascript:;" onclick="ApplyStyle(this)">t2</a> <a href="javascript:;" onclick="ApplyStyle(this)">t3</a> </td></tr></table> </div> <table width="90%" id="mytab" border="1" class="t1"> <thead> <th width="10%">网名</th> <th width="30%">博客</th> <th width="20%">电邮</th> <th width="30%">网络硬盘</th> <th width="10%">QQ</th> </thead> <tr class="a1"> <td>wallimn</td> <td>http://wallimn.iteye.com</td> <td>wallimn@tom.com</td> <td>http://wallimn.ys168.com</td> <td>54871876</td> </tr> <tr> <td>长三江</td> <td>村在</td> <td>北京天安</td> <td>东四十条</td> <td>21345678</td> </tr> <tr class="a1"> <td>长三江</td> <td>村在</td> <td>北京天安</td> <td>东四十条</td> <td>21345678</td> </tr> <tr> <td>长三江</td> <td>村在</td> <td>北京天安</td> <td>东四十条</td> <td>21345678</td> </tr> <tr class="a1"> <td>wallimn</td> <td>http://blog.csdn.net/wallimn</td> <td>wallimn@tom.com</td> <td>http://wallimn.ys168.com</td> <td>54871876</td> </tr> <tr> <td>长三江</td> <td>村在</td> <td>北京天安</td> <td>东四十条</td> <td>21345678</td> </tr> <tr class="a1"> <td>长三江</td> <td>村在</td> <td>北京天安</td> <td>东四十条</td> <td>21345678</td> </tr> <tr> <td>长三江</td> <td>村在</td> <td>北京天安</td> <td>东四十条</td> <td>21345678</td> </tr> </table> </body> </html>
可以到我的网络硬盘下载源码:http://wallimn.ys168.com
/***********本人原创,欢迎转载,转载请保留本人信息*************/
作者:wallimn 电邮:wallimn@sohu.com 时间:2008-11-13
博客:http://blog.csdn.net/wallimn http://wallimn.iteye.com
网络硬盘:http://wallimn.ys168.com
/***********文章发表请与本人联系,作者保留所有权利*************/
发表评论
-
gradle编译错误:Could not find method compile() for arguments
2020-09-19 10:50 18193编译(IDEA+Gradle)一个别人的工程,出现一个 ... -
netty心跳检查之UDP篇
2019-09-15 08:50 2133部分UDP通信场景中,需要客户端定期发送心跳信息,以获取终 ... -
解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException
2019-06-30 11:49 3181两个SpringBoot应用部署在一个Tomcat中,单独 ... -
Eclipse配置MyBatis代码自动化功能
2019-06-29 10:16 16451.安装插件 Eclipse中,Help->Ecli ... -
vue.js中使用qrcode生成二维码
2019-05-20 00:00 7562一、安装包 npm install qrcodejs2 --s ... -
MySQL插入数据报错: Incorrect string value: '\xFD\xDE'
2019-03-31 23:19 1178我MySQL数据库用的uft-8字符集,插入数据一直很正常 ... -
vue自定义组件并双向绑定属性
2019-03-08 22:46 3212做了两个子组件,原理基本一样,一个是使用原生的select ... -
vue-router简单示例
2019-03-05 00:32 1094写个基本完整、稍有借鉴意义的示例,防止自己忘记。 &l ... -
“联通充值系统繁忙”轻松应对
2019-02-06 11:03 3909大过年的,联通充个值一直报“充值系统繁忙”。昨天晚上试了几 ... -
electron.js数据库应用---导航菜单(element-ui+mysql)
2019-02-05 21:33 2300一、环境搭建 略, ... -
electron.js数据库应用---入门(mysql+element-ui)
2019-01-27 23:19 7316我的机器:Windows10,64 ... -
SpringMVC 在controller层中注入成员变量request,是否线程安全
2018-12-17 21:17 2697@RestController public class ... -
VueJS 组件参数名命名与组件属性转化
2018-12-03 00:00 2010转自:https://www.cnblogs.com/meiy ... -
vue-resource拦截器实现token发送及检验自动化
2018-11-16 22:38 3047用了很长时间vue-resource,最近思考$http发 ... -
element-ui试用手记
2018-10-29 20:25 1688element-ui、iviewui都以vue.js为基础 ... -
iviewui中表格控件中render的使用示例
2018-07-07 16:46 9720示例了如何在表格中显示按钮,如何将代码转化为文字。 i ... -
Tomcat错误“Alias name tomcat does not identify a key entry”解决
2018-07-05 21:39 6197申请到了阿里云的证书后,下载、按照说明生成jks格式证书、 ... -
阿里云免费证书“fileauth.txt内容配置错误”解决
2018-07-05 20:43 5202最近研究微信小程序开发,上阿里云申请了个证书,使用文件验证 ... -
springboot2.0跨域配置
2018-07-04 22:11 5242springboot2.0跨域配置: 一、代码 ... -
微信小程序使用code换openid的方法(JAVA、SpringBoot)
2018-07-01 21:52 10301微信小程序序的代码中提示,使用code换取openid,但 ...
相关推荐
ASP/PHP语言九九乘法表程序实例,其中PHP语言使用两种循环,table(表格)输出,带CSS样式
第四天:调用样式表 第五天:HEAD区的其他设置 第六天:XHTML代码规范 第七天:CSS入门 第八天:CSS布局入门 第九天:第一个CSS布局实例 第十天:自适应高度 十一天:不用表格的菜单 十二天:校验及常见的错误
绝对可用的纯CSS固定表头样式,适用多种浏览器,实例的方式展示,我们公司开发的应用软件就用的是这种固定表头的样式
CSS(Cascading Style Sheets)它是一种制作网页的新技术。与传统的html语言相比,CSS技术为网页设计提供了更丰富、更...结合几个实例详细介绍如何利用CSS来美化网页表格,使得网页增光添彩,从而能够吸引更多的浏览者
12.5 自动选择CSS样式 第3部分 CSS混合应用技术篇 第13章 CSS与JavaScript的综合应用 13.1 JavaScript概述 13.2 JavaScript语法基础 13.3 实例一:输入时高亮显示的Excel表格 13.4 实例二...
3.2.2 CSS 样式表书写顺序 3.3 怎样更好地应用CSS 3.3.1 块元素和内联元素 3.3.2 一些CSS 的实用技巧 3.3.3 怎样调试CSS 3.4 关于CSS 的学习 第4 章 网页头部元素的详细定义 第41 页 4.1 DOCTYPE 的选择 4.1.1 什么...
本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...
本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后...
找一个虽然不是很好看,但设置起来比较复杂的吧:彩色底纹-强调文字颜色6 Word中的效果如图示: 【样式分析】: Word中设置表格格式,主要是设置边框和底纹,可选定整个表格或者部分单元格右击→表格属性→边框和...
style1.css 名为style1的CSS样式文件。 style2.css 名为style2的CSS样式文件。 style3.css 名为style3的CSS样式文件。 第16章(源代码\第16章) 示例描述:本章演示字体属性用法。 间距与间隔....
5.4.2 表格样式控制 5.4.3 表单表格设计 第6章 CSS高级应用与技巧 6.1 id与class 6.1.1 什么是id 6.1.2 何时使用id 6.1.3 什么是class 6.1.4 何地使用class 6.1.5 同时使用多个类 6.1.6 id应用与网站结构 6.2 div与...
第6章 表格样式设计 150 6.1 变换背景色 151 6.1.1 变换表格背景色 151 6.1.2 变换表格行背景色 153 6.1.3 变换单元格背景色 154 6.2 CSS控制表格的颜色交替 155 6.3 CSS控制表格边框 156 6.4 制作圆角框 157 6.5 小...
div css汽车销售表格样式代码是一款带汽车分类,月销售统计,汽车销量表格table代码实例。
本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...
实例024 Dreamweaver中创建和附加CSS样式 42 实例025 Dreamweaver控制弹出信息 45 实例026 Dreamweaver控制浏览器的窗口 46 实例027 通过Dreamweaver创建站点 47 实例028 通过Dreamweaver开发第1个PHP程序 48 1.7 ...
系统地讲解了CSS层叠样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...