纯css打造美丽的html表格
花了点时间，自己做了个美丽的html表格，採用技术有css,html，其它的废话我也不多说了，直接上图。上代码。
界面图片：
HTML代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<link type="text/css" rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="table_div">
<div class="div_clear">
<div class="left_top"></div>
<div class="center_top">
<div style="float:left">
<img src="./tab/images/tb.gif" width="16px" height="16px" style="vertical-align:middle"/>
<span style="font-weight:bold">你当前的位置</span>：[业务中心]-[我的邮件]
</div>
<div style="float:right;padding-right:6px">
<img width='16' height='16' src="./tab/images/22.gif" style="vertical-align:middle"/>
<a href="#">新增</a>
<img width='16' height='16' src="./tab/images/33.gif" style="vertical-align:middle"/>
<a href="#">改动</a>
<img width='16' height='16' src="./tab/images/11.gif" style="vertical-align:middle"/>
<a href="#">删除</a>
</div>
</div>
<div class="right_top"></div>
</div>
<div class="div_clear">
<div class="left_center"></div>
<div class="center_center">
<div class="table_content">
<table cellspacing="0px" cellpadding="0px">
<thead >
<tr>
<th width="16%">wo</th>
<th width="16%">ffe</th>
<th width="16%">ff</th>
<th width="16%">ff</th>
<th width="16%">ff</th>
<th wdith="20%" style="border-right:none">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td width="16%">ff</td>
<td width="16%">ff</td>
<td width="16%">f</td>
<td width="16%">fe</td>
<td width="16%">ew</td>
<td width="20%" style="border-right:none">
<img width='16' height='16' src="./tab/images/del.gif" style="vertical-align:middle"/>
<a href="#">改动</a>
<img width='16' height='16' src="./tab/images/edt.gif" style="vertical-align:middle"/>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td width="16%">ff</td>
<td width="16%">ff</td>
<td width="16%">f</td>
<td width="16%">fe</td>
<td width="16%">ew</td>
<td width="20%" style="border-right:none">
<img width='16' height='16' src="./tab/images/del.gif" style="vertical-align:middle"/>
<a href="#">改动</a>
<img width='16' height='16' src="./tab/images/edt.gif" style="vertical-align:middle"/>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td width="16%">ff</td>
<td width="16%">ff</td>
<td width="16%">f</td>
<td width="16%">fe</td>
<td width="16%">ew</td>
<td width="20%" style="border-right:none">
<img width='16' height='16' src="./tab/images/del.gif" style="vertical-align:middle"/>
<a href="#">改动</a>
<img width='16' height='16' src="./tab/images/edt.gif" style="vertical-align:middle"/>
<a href="#">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="right_center"></div>
</div>
<div class="div_clear">
<div class="left_bottom"></div>
<div class="center_bottom">
<span> 共同拥有 120 条记录，当前第 1/10 页</span>
<div style="float:right;padding-right:30px">
<input type="button" value="首页"/>
<input type="button" value="上页"/>
<input type="button" value="下页"/>
<input type="button" value="尾页"/>
<span>跳转到</span>
<input type="text" size="1"/>
<input type="button" value="跳转"/>
</div>
</div>
<div class="right_bottom"></div>
</div>
</div>
</body>
</html>
CSS文件代码：
/*******************************通用样式***********************/
body{
padding:0px;
margin:0px;
font-size:12px;
}
body a{
color:#03515d;
text-decoration:none;
}
body button{
color:#03515d;
}
body span{
color:#03515d;
}
.center_bottom input{
color:#03515d;
font-size:12px;
height:20px;
width:40px;
padding:2px;
vertical-align:middle;
text-align:center;
margin-bottom:6px;
}
/**************************布局部分********************/
.table_div{
width:1000px;
padding:10px;
margin:0 auto;
}
.div_clear{
clear:both;
}
.left_top{
background:url("./tab/images/tab_03.gif");
height:30px;
width:12px;
float:left;
}
.left_center{
background:url("./tab/images/tab_12.gif");
height:400px;
width:12px;
float:left;
}
.left_bottom{
background:url("./tab/images/tab_18.gif");
height:35px;
width:12px;
float:left;
}
.center_top{
background:url("./tab/images/tab_05.gif") repeat-x;
height:30px;
line-height:30px;
width:900px;
float:left;
}
.center_center{
height:400px;
width:900px;
float:left;
}
.center_bottom{
background:url("./tab/images/tab_19.gif") repeat-x;
height:35px;
width:900px;
float:left;
line-height:35px;
}
.right_top{
background:url("./tab/images/tab_07.gif");
height:30px;
width:15px;
float:left;
}
.right_center{
background:url("./tab/images/tab_15.gif");
height:400px;
width:15px;
float:left;
}
.right_bottom{
background:url("./tab/images/tab_20.gif");
height:35px;
width:15px;
float:left;
}
/**************************************表格内容***********************************/
.table_content{
margin:5px;
border:1px solid #B5D6E6;
width:890px;
height:390px;
overflow-x:hidden;
overflow-y:auto;
}
.table_content table{
width:100%;
border:0;
border-collapse:collapse;
font-size:12px;
}
.table_content table tr:hover{
background-color:#C1EBFF;
}
.table_content table th{
border-collapse:collapse;
height:22px;
background:url("./tab/images/bg.gif");
border-right:1px solid #B5D6E6;
border-bottom:1px solid #B5D6E6;
}
.table_content table td{
height:22px;
word-wrap:break-word;
max-width:200px;
text-align:center;
vertical-align:middle;
border-right:1px solid #B5D6E6;
border-bottom:1px solid #B5D6E6;
}
图片素材也给大家献上，几分钟就能够吧这个美丽的表格搞到手。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
纯css打造美丽的html表格的更多相关文章
- 【CSS Demo】纯 CSS 打造 Flow-Steps 导航
low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三 通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...
- Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float，实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写，小写转大写，数字保留，其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform
Expression构建DataTable to Entity 映射委托 1 namespace Echofool.Utility.Common { 2 using System; 3 using ...
- 纯CSS打造银色MacBook Air（完整版）
上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...
- 纯CSS打造可折叠树状菜单
1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...
- 纯CSS打造BiliBili样式博客主题
前言 一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果 ...
- HTML5 CSS3专题 纯CSS打造相冊效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...
- HTML5 CSS3专题 纯CSS打造相册效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...
- 学用纯CSS打造可折叠树状菜单
随着CSS3的发布,国外研究正如火如荼,但在国内还有很多人抱着IE不支持CSS3的想法,始终无动于衷不肯去学习.但是历史告诉我们,好的东西必将盛行,CSS3也终将也会替代CSS2,下面就和大家分享一个 ...
- 纯 css 打造一个小提示 tooltip
最后编辑:2019/11/26 前 无意间在寻找资料时候,发现一个不错的小提示,查看源码竟然是纯手工 css 编写(文章底部参考链接). 效果 使用的特性 css2 中的 attr 函数,所以现在(2 ...
随机推荐
- Solidworks如何替换工程图参考零件
不要在左侧树形图右击修改 而是要在右侧主视图上右击,替换模型 左侧浏览找到新的零件,然后打开 替换完成之后,会有一些尺寸变成黄色,只需要改动黄色部分即可,不需要每个尺寸重新标注
- C#.NET常见问题(FAQ)-如何判断某个字符是否为汉字
字符强制转换成int可以判断字符数值大小,在下面所示范围内的就是中文 此外还可以判断是否是数字或者字母,用char.IsLetter和char.IsDigit方法 从先这个范例可以看出,中文也 ...
- android中RecyclerView控件实现点击事件
RecyclerView控件实现点击事件跟ListView控件不同,并没有提供类似setOnItemClickListener()这样的注册监听器方法,而是需要自己给子项具体的注册点击事件. 本文的例 ...
- Spring MVC中使用errors标签
先创建一个实体类,后续的验证都基于这个实体类: public class Goods { private String goodsName; private String city; private ...
- Windows系统Ionic安装教程/Ionic环境配置
原文链接:http://blog.csdn.net/superjunjin/article/details/43412017 参考文章 Cordova 3.x 基础(1) -- 环境搭建(Window ...
- Centos7中firewalld防火锁墙的使用
一.服务控制 启动: systemctl start firewalld 查看状态: systemctl status firewalld 停止: systemctl disable firewal ...
- SHELL函数处理
SHELL函数调用分为两种: 第一种方式,有点像C语言调用函数的风格,直接把函数的执行结果复制给变量!不过,这个赋值过程和C语言的函数赋值是不一样的! C语言中,函数调用,是将函数的返回值返回给被调函 ...
- Pig拒绝连接错误
运行Pig时出现错误: Pig Stack Trace --------------- ERROR 1066: Unable to open iterator for alias visit. Bac ...
- NDK编译常用命令及不同版本so编译方法
工具说明 addr2line 把程序地址转换为文件名和行号.在命令行中给它一个地址和一个可执行文件名,它就会使用这个可执行文件的调试信息指出在给出的地址上是哪个文件以及行号. ar 建立.修改.提取归 ...
- 〖Network〗宿舍配置两路由器，同时访问校园内网和校园外网
环境: 校园宿舍, 10.x.x.x 和 172.16.x.x~172.31.x.x是校园内网,本科教务系统什么的都在上边 路由器: 路由器1(校园内网):水星MR807 路由器2(拨号上网):TP ...