css3-6 表格如何设置样式和定位样式是什么
css3-6 表格如何设置样式和定位样式是什么
一、总结
一句话总结：css可以解决所有属性设置的样式。
1、表格如何设置样式？
css样式可以解决一切问题，没必要在表格上面加属性来设置样式。
7 table{
8 width:1000px; 9 border:2px solid #00f; 10 border-collapse:collapse; 11 } 12 13 td,th{ 14 text-align:center; 15 border:2px solid #00f; 16 }
2、绝对定位和相对定位异同？
1.相同点
1)脱离文档流，都在文档流的上方
2.不同点
1)绝对的坐标系在浏览器的左上角，相对的坐标系在自己的左上角
2)绝对不占位，相对占位
3、布局实现中父子相对定位和绝对定位的关系是什么？
父相对，子绝对，这样子就相对于父亲来偏移了，不然就是相对窗口左上角
17 position: relative;
18 } 19 20 .bk{ 21 position: absolute; 22 left:10px; 23 top:100px; 24 }
二、表格如何设置样式和定位样式是什么
1、相关知识
表格:
border-collapse
border-spacing
定位:
1.position:absolute;
2.position:relative;
绝对定位和相对定位:
1.相同点
1)脱离文档流，都在文档流的上方
2.不同点
1)绝对的坐标系在浏览器的左上角，相对的坐标系在自己的左上角
2)绝对不占位，相对占位
2、代码
table表格样式
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>index</title>
6 <style>
7 table{ 8 width:1000px;
9 border:2px solid #00f;
10 border-collapse:collapse;
11 }
12
13 td,th{14 text-align:center;
15 border:2px solid #00f;
16 }
17 </style>
18 </head>
19 <body>
20 <table>
21 <tr>
22 <th>编号</th>
23 <th>用户名</th>
24 <th>密码</th>
25 </tr>
26 <tr>
27 <td>1</td>
28 <td>小帅</td>
29 <td>200111</td>
30 </tr>
31 <tr>
32 <td>1</td>
33 <td>小帅</td>
34 <td>200111</td>
35 </tr>
36 <tr>
37 <td>1</td>
38 <td>小帅</td>
39 <td>200111</td>
40 </tr>
41 <tr>
42 <td>1</td>
43 <td>小帅</td>
44 <td>200111</td>
45 </tr>
46 <tr>
47 <td>1</td>
48 <td>小帅</td>
49 <td>200111</td>
50 </tr>
51 <tr>
52 <td>1</td>
53 <td>小帅</td>
54 <td>200111</td>
55 </tr>
56 <tr>
57 <td>1</td>
58 <td>小帅</td>
59 <td>200111</td>
60 </tr>
61 <tr>
62 <td>1</td>
63 <td>小帅</td>
64 <td>200111</td>
65 </tr>
66 <tr>
67 <td>1</td>
68 <td>小帅</td>
69 <td>200111</td>
70 </tr>
71 <tr>
72 <td>1</td>
73 <td>小帅</td>
74 <td>200111</td>
75 </tr>
76 <tr>
77 <td>1</td>
78 <td>小帅</td>
79 <td>200111</td>
80 </tr>
81 </table>
82 </body>
83 </html>父定位子绝对，子的坐标系是父的左上角
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>index</title>
6 <style>
7 *{ 8 margin:0px;
9 }
10
11 .qp{12 width:700px;
13 height:400px;
14 background: #faf;
15 margin:0 auto;
16 margin-top:20px;
17 position: relative;
18 }
19
20 .bk{21 position: absolute;
22 left:10px;
23 top:100px;
24 }
25 </style>
26 </head>
27 <body>
28 <div class='qp'>
29 <img src="bk.png" class="bk">
30 </div>
31 </body>
32 </html>转载于:https://www.cnblogs.com/Renyi-Fan/p/9230278.html
css3-6 表格如何设置样式和定位样式是什么相关推荐
- vue 浏览器调试 样式如何定位样式_浏览器断点调试-程序员的必修课
一.源码调试/debugger方法 1.1控制台调试按钮介绍 Resume script execution恢复断点调试.常用在一个方法调用多个js文件(适用冗长js代码使用).点击这个会直接跳转到下 ...
- vue 浏览器调试 样式如何定位样式_Vue项目骨架屏注入实践和方法总结
相比于早些年前后端代码紧密耦合.后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业.然而在带来便利的同时,也带 ...
- css涟漪光圈扩散_CSS3动画之：水波涟漪般的定位样式
CSS3动画之:水波涟漪般的定位样式 Sponsor 近期工作要做一个用于图像定位的标识,为了让这个指示标识不死板,决定做个简单的动画,动画效果像波浪一样波动,这样标识就更美观好看了,喜欢的同学可以跟 ...
- css 涟漪,CSS3水波涟漪动画定位样式如何制作
CSS3水波涟漪动画定位样式如何制作 宝剑锋从磨砺出,梅花香自苦寒来.以下是小编为大家搜索整理的'CSS3水波涟漪动画定位样式如何制作,希望能给大家带来帮助!更多精彩内容请及时关注我们应届毕业生考试网 ...
- css基础：样式之定位、样式之隐藏、二级菜单、多个列表转表格、图片精灵技术
<html lang="en"> <head> <meta charset="UTF-8"> <tit ...
- css基础：样式之定位、样式之隐藏、二级菜单、多个列表转表格、图片精灵技术...
<html lang="en"> <head> <meta charset="UTF-8"> <tit ...
- python生成excel表格-Python生成excel表格并设置样式
python在做爬虫时会涉及到数据存储问题,下面说一下将数据存储在excel表格中,主要使用扩展类xlwt,下面详细说一下,主要涉及到了数据列,背景,名称等参数. 说明:python3.7.windo ...
- CSS设置表格行列,给bootstrap table设置行列单元格样式
1.根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center" ...
- Python生成excel表格并设置样式
python在做爬虫时会涉及到数据存储问题,下面说一下将数据存储在excel表格中,主要使用扩展类xlwt,下面详细说一下,主要涉及到了数据列,背景,名称等参数. 说明:python3.7.windo ...
最新文章
- 【干货】大数据和人工智能.pdf
- PMP-【第15章 PMP考试的难点与易点】2021-2-17（304页-312页）【完】
- 设计模式（命令模式）
- 04751计算机网络安全讲解,【19份】04751计算机网络安全自考试卷_历年真题自考答案及解析_湖南080901计算机科学与技术(原B080702计算机及应用)专业-自考生资料网...
- 关于asp.net利用mono部署到Linux上的一些说明
- php7 memcached sasl,Mac安装memcached扩展支持sasl
- labview入门系列2
- 硬盘写保护软件_三星T7 Touch 1TB移动固态硬盘评测：新奇又安全的加密方式普及？...
- ASP.Net Core 发布在IIS部署出现502.5错误的解决办法
- 拼多多，是漏洞的损失？还是营销的手段？
- 判断OS版本的几个方法
- npm install很慢（奇葩）解决方法
- Vue 获取当前日期
- HCIA/HCIP使用eNSP模拟VRRP配置实验（接入层 汇聚层 核心层 VLAN OSPF VRRP STP DHCP的综合应用）
- 基于asp.net706酒店客户关系管理系统
- 关于USB中文网的近况
- Day499500501502503504.马士兵22春招面试题① -面经
- 如何获取新浪股票行情查询接口？
- 2023 OPEN易支付系统开源源码
- 产品助理实习day2