__x__(40)0909第五天__表格 table 的 css 样式 美化
如果就向下面的代码那样，不写 tbody ， 则浏览器自添加 tbody ， 并将所有的 tr 移入 tbody
意味着 tr 并非 table 的子元素，而是 tbody 的子元素。
所以 以后编写代码，尽可能地写上 tbody，防止混淆。
th 表头
是特殊的 td
“具有加粗，文字居中”的效果 。
为 table 添加边框：
1. 为 th，td 设置 border: 1px red solid;
2. 为 table 设置 /* 单元格之间的距离。*/
border-spacing: 0px;
3. 为 table 设置 /* 表格的边框合并。设置以后 border-spacing 自动失效*/
border-collapse: collapse;
关于行的 隔行变色 及 悬浮变色
css代码：
@charset "utf-8";
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #3e4e54;
}
table{
margin: 0px auto;
width: 40%;
/* 单元格之间的距离。*/
border-spacing: 0px;
/* 表格的边框合并。设置以后 border-spacing 自动失效*/
border-collapse: collapse;
}
#mytb th,td{
border: 1px red solid;
}
/* 隔行变色 IE8 及以下不支持 :nth-child() */
tr:nth-child(even){
background-color: #666;
}
/* 悬浮变色 IE6及以下不支持 a 以外的元素使用 :hover */
tr:hover{
background-color: #bfc;
}
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title> <link rel="stylesheet" type="text/css" href="css/table.css" />
</head> <body>
Hello Web!` <br />
table 是<b>块元素</b>，独占一行 <table id="mytb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr> <tr>
<td>刘备</td>
<td>35</td>
<td>男</td>
</tr> <tr>
<td>关羽</td>
<td>33</td>
<td>男</td>
</tr> <tr>
<td>张飞</td>
<td>30</td>
<td>男</td>
</tr> <tr>
<td>唐僧</td>
<td>27</td>
<td>男</td>
</tr> <tr>
<td>孙悟空</td>
<td>633</td>
<td>男</td>
</tr> <tr>
<td>猪八戒</td>
<td>830</td>
<td>男</td>
</tr> <tr>
<td>沙悟净</td>
<td>735</td>
<td>男</td>
</tr> <tr>
<td>白龙马</td>
<td>533</td>
<td>男</td>
</tr> <tr>
<td>白骨精</td>
<td>130</td>
<td>女</td>
</tr> <tr>
<td>蜘蛛精</td>
<td>135</td>
<td>女</td>
</tr> <tr>
<td>金角大王</td>
<td>430</td>
<td>男</td>
</tr> <tr>
<td>东海龙王</td>
<td>3000</td>
<td>男</td>
</tr>
</table>
</body>
</html>
__x__(40)0909第五天__表格 table 的 css 样式 美化的更多相关文章
- __x__(39)0909第五天__ 表格 table
表格 表示一种格式化的数据,如课程表,银行对账单... ... 在网页中,使用 table 创建一个表格. html代码: <!doctype html> <html> < ...
- __x__(41)0909第五天__长表格
长表格 银行流水,表格很长... 则需要将表格分为 表头 thead ,主体数据 tbody , 表格底部 tfoot 三个标签无顺序要求,易于维护:thead → tfoot → tbody 如果没 ...
- __x__(37)0909第五天__背景图按钮
link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Spri ...
- __x__(38)0909第五天__雪碧图的制作
1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .
- 表格CSS样式美化
1. 单像素边框CSS表格 这是一个很常用的表格样式. <!-- CSS goes in the document HEAD or added to your external styleshe ...
- __x__(29)0908第五天__高度塌陷 问题
高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...
- __x__(30)0908第五天__导航条的练习 <div>版本
效果图: html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...
- __x__(31)0908第五天__导航条的练习 <ul> 版本
效果图: html代码: <!doctype html> <html> <head> <meta charset="utf-8" /&g ...
- __x__(34)0908第五天__ 定位 position
position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static 没有定位,原始出现在正常的文档流中 可选值: static : 默认值,元素没有开启定位 ...
随机推荐
- matlab中randi代替randint生成随机均匀分布信号的用法
%%新函数 2*randi([0,1],2,1)-1 等价于老函数 2*randint(2,1)-1 函数形式:randi([imin,imax],m,n) 参数解释: [imin,im ...
- jQuery使用（九）：队列及实现原理、基于队列模拟实现animate()
开篇一张图之队列模型 queue()如何使用? queue()原理实现? 基于queue()模拟实现animate() 一.使用queuer方法.理解队列原理 queue() dequeue() cl ...
- ACM-ICPC 2018 沈阳赛区网络预赛 D Made In Heaven（第k短路，A*算法）
https://nanti.jisuanke.com/t/31445 题意 能否在t时间内把第k短路走完. 分析 A*算法板子. #include <iostream> #include ...
- npm cnpm yarn
npm 如何下载指定版本的组件 先确保文件目录下含有 package.json 文件, 没有的话,可以通过 npm init 创建, 然后只需要在组件的后面加上 @2.8.1 版本号即可, 例如:re ...
- 第30月第6天 git log
1. git log git log 96a6f18b1e0a1b7301cb4f350537d947afeb22bc -p -1 我们常用 -p 选项展开显示每次提交的内容差异,用 -2 则仅显示最 ...
- BMP文件解析
目录 BMP文件简介 BMP文件格式 位图头 位图信息 调色板 位图数据 C语言代码 获取文件大小 获取文件尺寸 获取文件偏移量 读取文件数据示例 一个问题 完整程序 BMP文件简介 BMP(全称Bi ...
- html(jQuery）替换字符串（全部替换）
var str= "a<br/>b<br/>c<br/>"; var Newstr = str.replace("<br/&g ...
- 【原创】大数据基础之Zookeeper（2）源代码解析
核心枚举 public enum ServerState { LOOKING, FOLLOWING, LEADING, OBSERVING; } zookeeper服务器状态:刚启动LOOKING,f ...
- Nginx配置https证书
目前的大趋势是升级HTTP为HTTPS 本章介绍怎样实装HTTPS证书 # 如果报 ssl 错误是Nginx安装时未安装ssl 请重新编译nginx 可以参考我之前的博客 申请/获取https 这里就 ...
- JDK 8 函数式编程入门
目录 1. 概述 1.1 函数式编程简介 1.2 Lambda 表达式简介 2. Lambda 表达式 2.1 Lambda 表达式的形式 2.2 闭包 2.3 函数接口 3. 集合处理 3.1 St ...