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表格样式

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         table{

             width:1000px;

             border:2px solid #00f;

             border-collapse:collapse;

         }

         td,th{

             text-align:center;

             border:2px solid #00f;

         }

     </style>

 </head>

 <body>

     <table>

         <tr>

             <th>编号</th>

             <th>用户名</th>

             <th>密码</th>

         </tr>

         <tr>

             <td>1</td>

             <td>小帅</td>

             <td>200111</td>

         </tr>

         <tr>

             <td>1</td>

             <td>小帅</td>

             <td>200111</td>

         </tr>

         <tr>

             <td>1</td>

             <td>小帅</td>

             <td>200111</td>

         </tr>

         <tr>

             <td>1</td>

             <td>小帅</td>

             <td>200111</td>

         </tr>

         <tr>

             <td>1</td>

             <td>小帅</td>

             <td>200111</td>

         </tr>

         <tr>

             <td>1</td>

             <td>小帅</td>

             <td>200111</td>

         </tr>

         <tr>

             <td>1</td>

             <td>小帅</td>

             <td>200111</td>

         </tr>

         <tr>

             <td>1</td>

             <td>小帅</td>

             <td>200111</td>

         </tr>

         <tr>

             <td>1</td>

             <td>小帅</td>

             <td>200111</td>

         </tr>

         <tr>

             <td>1</td>

             <td>小帅</td>

             <td>200111</td>

         </tr>

         <tr>

             <td>1</td>

             <td>小帅</td>

             <td>200111</td>

         </tr>

     </table>

 </body>

 </html>

父定位子绝对，子的坐标系是父的左上角

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             margin:0px;

         }

         .qp{

             width:700px;

             height:400px;

             background: #faf;

             margin:0 auto;

             margin-top:20px;

             position: relative;

         }

         .bk{

             position: absolute;

             left:10px;

             top:100px;

         }

     </style>

 </head>

 <body>

     <div class='qp'>

         <img src="bk.png" class="bk">

     </div>

 </body>

 </html>
 

css3-6 表格如何设置样式和定位样式是什么的更多相关文章

  1. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

  2. 关于element-ui表格table设置header-cell-class-name样式不起作用的原因分析

    在编写表格的时候想给表头添加样式,使用 header-cell-class-name怎么都添加不上样式,检查元素发现连class都没添加上,查了很多资料有人说element之前版本不支持这属性,但我使 ...

  3. style在进行图形绘制前，要设置好绘图的样式

    是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与css3权威指南>下面对其中最好玩的 ...

  4. Windows Phone 8初学者开发—第6部分：设置应用程序的样式

    原文 Windows Phone 8初学者开发—第6部分:设置应用程序的样式 Source Code: http://aka.ms/absbeginnerdevwp8  PDF Version: ht ...

  5. CSS3 : transform 与 transform-origin 属性可以使元素样式发生转变

    CSS3 : transform 用于元素样式的转变,比如使元素发生位移.角度变化.拉伸缩小.按指定角度歪斜 transform结合transition可实现各类动画效果 transform : tr ...

  6. [Xcode 实际操作]五、使用表格-(3)设置UITableView单元格图标

    目录:[Swift]Xcode实际操作 本文将演示如何给表格行设置图标. 打开资源文件夹[Assets.xcassets], 在资源文件夹中导入两张图片:一张彩色,一张灰色,作为单元格的图标. [+] ...

  7. 在使用element-ui搭建的表格中,实现点击"定位"按钮后,屏幕滚动到对应行的位置

    背景: 一个后台管理系统,当管理员登录之后,会存在一个自己的id值, 在一个表格中,当点击"定位"按钮后,屏幕滚动到拥有管理员id的这一行,并且给设置一个高亮的背景 相关知识点: ...

  8. WPF DevExpress 设置雷达图Radar样式

      DevExpress中定义的ChartControl很不错,很多项目直接使用这种控件. 本节讲述雷达图的样式设置 <Grid> <Grid.Resources> <D ...

  9. UITextField常用属性归纳：文本框样式、文字样式、键盘样式、左右视图样式、清除按钮设置等

    (1)可以根据需要设置文本框的样式(包括形状.边框颜色.背景等). (2)可以根据需要设置文字显示样式(包括输入密码时的密文显示.文字横向居中.纵向居中上下.输入的文字是否首席木大写.文字超过后是否缩 ...

随机推荐

  1. 负载均衡器&amp;http正向代理

    透明的负载均衡器&http正向代理 * master-workers架构,http正向代理由独立的dns请求以及缓冲进程  * 使用epoll(ET)模式,採用全异步方式(双缓存,实现双向同一 ...

  2. 漫话C++之string字符串类的使用（有汇编分析）

    C++中并不提倡继续使用C风格的字符串,而是为字符串定义了专门的类,名为string. 使用前的准备工作 在使用string类型时,需要包含string头文件,且string位于std命名空间内: # ...

  3. 根证书 CA

    根证书 CA 密钥没有密码,使用下面的指令添加密码 openssl rsa -aes256 -in cakey_nopw.pem -out cakey_pw.pem cacert.pem -----B ...

  4. js--07 编解码,eval

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  5. 11lession-class 类

    python既然也是面向对象编程的语言,自然也就跟java相似,它也有类的概念.今天就简单学习下.看如下代码 #!/usr/bin/python class cl_test: test = 0 def ...

  6. matlab 构建数据集实用 api

    我们当前有如下目录结构的图像数据集(用于图像分类): 1. imageDatastore imageDatastore:imds = imageDatastore('./images', 'Inclu ...

  7. 2.技巧: 用 JAXM 发送和接收 SOAP 消息—Java API 使许多手工生成和发送消息方面必需的步骤自动化

    转自:https://www.cnblogs.com/chenying99/archive/2013/05/23/3094128.html 技巧: 用 JAXM 发送和接收 SOAP 消息—Java ...

  8. BZOJ5394: [Ynoi2016]炸脖龙(欧拉广义降幂)

    就是让你求这个: 传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=5394 解题思路: NOIP2018后第一道题,感觉非常像那个上帝与集合的 ...

  9. (转)Linux下查看Nginx Apache MySQL的并发连接数和连接状态

    转自: http://www.ha97.com/4106.html 1.查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态:netstat -n | awk '/^tcp/ { ...

  10. 通过no-gui模式运行jmeter脚本与生成报告

    说明:使用NO-GUI 模式,即命令行模式运行 JMeter 测试脚本能够大大缩减所需要的系统资源. 步骤:在GUI(图形化界面)模式调整好脚本,通过FTP工具将需要测试的.jmx文件传输到linux ...