div+css普通表格样式
2024-05-20 09:42:18
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
body,td,th {font-size: 12px; font-family:"新宋体";}
img{ border:0;}
ul ,li{ margin:0; padding:0; list-style:none;}
ul.table1{ height:30px; border-bottom:1px solid #fff; clear:both;}
ul.table1 li{ background:#999;float:left; border-right:1px #fff solid; line-height:30px; text-align:center; font-weight:bold;}
ul.table2{ height:30px; border-bottom:1px solid #fff; clear:both;}
ul.table2 li{ background:#ccc;float:left; border-right:1px #fff solid; line-height:30px; text-align:center;}
.name1{ width:50px;}
.name2{ width:150px;}
.name3{ width:350px;}
.name4{ width:100px; text-align:left; }
ul.table1 li.name4{ width:100px; text-align:left; }
ul.table1 li .taxis{ float:right; margin-right:5px; width:12px; text-align:right; margin-top:8px; _margin-top:4px; vertical-align:middle;}
ul.table1 li .taxis_title{ float:left; margin-left:5px; text-align:left; }
.liter{ margin:0;margin-bottom:4px;_margin-bottom:-2px;}
.drop{ margin:0;}.table_left{ width:30%; overflow:hidden; float:left;}
.table_right{ width:70%; overflow:hidden; float:right;}
.table_left div{ background:#ececd8;margin-right:1px;margin-bottom:1px; text-align:right; padding:3px 5px;}
.table_right div{ background:#eee; margin-bottom:1px; padding:3px 5px;}
.table_height_30{ height:30px; line-height:30px;_line-height:25px; }
.table_height_100{ height:100px; display:block; }
.table_height_100_left{ height:100px; line-height:100px; }.table_height_301 {height:30px; line-height:30px;_line-height:25px; }
</style></head><body>
<h3>简单的表格列表</h3>
<ul class="table1"><li class="name1">序号</li><li class="name2">名称</li><li class="name3">内容</li>
</ul>
<ul class="table2"><li class="name1">1</li><li class="name2">测试文件</li><li class="name3">测试文件内容。。。。。</li>
</ul>
<ul class="table2"><li class="name1">2</li><li class="name2">测试文件</li><li class="name3">测试文件内容。。。。。</li>
</ul>
<ul class="table2"><li class="name1">3</li><li class="name2">测试文件</li><li class="name3">测试文件内容。。。。。</li>
</ul>
<ul class="table2"><li class="name1">4</li><li class="name2">测试文件</li><li class="name3">测试文件内容。。。。。</li>
</ul>
<ul class="table2"><li class="name1">5</li><li class="name2">测试文件</li><li class="name3">测试文件内容。。。。。</li>
</ul>
<h3>带有排序功能的表格列表</h3>
<ul class="table1"><li class="name1">序号</li><li class="name2">名称</li><li class="name3">内容</li><li class="name4"><span class="taxis_title">排序</span><span class="taxis"><div class="liter"><a href="#"><img src="data:images/desc.gif" width="10" alt="升序" /></a></div><div class="drop"><a href="#"><img src="data:images/asc.gif" width="10" alt="降序"/></a> </div></span> </li>
</ul>
<ul class="table2"><li class="name1">1</li><li class="name2">测试文件</li><li class="name3">测试文件内容。。。。。</li><li class="name4">测试文件内容</li>
</ul>
<ul class="table2"><li class="name1">2</li><li class="name2">测试文件</li><li class="name3">测试文件内容。。。。。</li><li class="name4">测试文件内容</li>
</ul>
<div style="clear:both;"></div>
<h3>百分比复杂的表格列表</h3>
<div class="table_left"><div><span class="table_height_30">带宽：</span></div><div><span class="table_height_100_left">扩展 IP地址：</span></div>
</div>
<div class="table_right"><div><span class="table_height_30">下行：<input /> <select ><option>Mbit</option></select><label><input name="checkbox" type="checkbox" />限制总下行 </label><input name="button" type="button" class="sys_botton input2_hand" value="确定" /></span>半行高错误，则需把所在的div高度去掉即可。</div><div><span class="table_height_100"><div style="width:200px;padding:0; float:left;"><textarea name="textarea" id="textarea" style="width:100%; height:85px;"></textarea></div><div style="float:left; width:250px;padding:0; margin-left:10px;"><div style="float:left; width:80px; overflow:hidden;padding:0;"><div class="table_height_30" style="text-align:right;">用户名：</div><div class="table_height_30" style="text-align:right;">密码：</div></div><div style="float:right; width:170px;padding:0;"><div class="table_height_30" style="padding:0; margin-top:5px;"><input style="vertical-align:middle;" /></div><div class="table_height_30" style="padding:0; margin-top:5px;"><input style="vertical-align:middle;" /></div></div></div></span></div></div>
<div style="clear:both"></div></body>
</html>div+css普通表格样式相关推荐
- div做表格 html5,div+css制作表格
本章给大家介绍如何用div+css制作表格,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. html: 花名册: 序号 姓名 年龄 footer footer footer 1 Jo ...
- CSS的表格样式和列表样式
-----------------------------------------------CSS的表格样式和列表样式---------------------------------------- ...
- html表格与CSS控制表格样式
表格是HTML网页中的重要标签,利用表格可以对网页进行排版,使网页信息有条理地显示出来. 这就是一个表格 ,清清楚楚的列出了英雄们的排名. 思维导图 <table>标签 用<tabl ...
- div+css使用padding样式和 important标记实现Firefox和IE6处理带float样式的margi
div+css使用padding样式和!important标记实现Firefox和IE6处理带float样式的margin尺寸上的兼容 [示例代码] <html> <body ...
- html设置表格字体样式表,CSS：表格样式（设置表格边框/文字/背景的样式）
使用CSS可以制作出十分精美的表格. 效果图: 代码: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo ...
- div css 制作表格
<div class="table"> <h2 class="table-caption">花名册:</h2> <di ...
- div+css 制作表格
<div class="table"> <h2 class="table-caption">花名册:</h2> <di ...
- 仿Word自动套用格式，用CSS设置表格样式
找一个虽然不是很好看,但设置起来比较复杂的吧:彩色底纹-强调文字颜色6 Word中的效果如图示: [样式分析]: Word中设置表格格式,主要是设置边框和底纹,可选定整个表格或者部分单元格右击→表格属 ...
- HTML如何改变表格浮动位置,css控制表格 样式 css布局 浮动及定位
一.制作一张商品信息表,内容自定,要求用到行与列的合并 实例 html> 饮料商品信息表 table caption { font-family:"宋体"; font-siz ...
最新文章
- 【免费获取】80+页PPT全方位解读半导体行业
- python字典输出_Python字典/循环输出
- 如何查看某个ABAP user针对某个authorization object的assignment status
- [转]XHTML+CSS兼容性解决方案小集
- 基于modelsim的十个Verilog入门试验程序（1）（7人表决器+算术逻辑单元）—程序+测试代码+波形+结果分析
- 几个linux监测工具
- SQL 2005 带自增列 带外键约束 数据导入导出
- javascript 正则
- 如何避免gradle插件下载：Gradle、Android Plugin、Build Tools
- twitter 授权过程
- 以阿里云服务器为例理解docker端口映射
- 2023福州大学计算机考研信息汇总
- Nodejs Blob流方式下载
- 流量高峰时期的性能瓶颈有哪些、以及如何来解决
- python爬取豆瓣读书简单_Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
- c语言printf格式限定符,c – 1字节有符号数的printf格式
- 用命令操作方式创建和管理数据库
- SQL审核 | 如何利用 OpenAPI 实现自己的扫描任务
- 2.1.4 选择器处理网络请求
- java 字符串转utc时间_Java中转UTC时间字符串(含有T Z)为local时间