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. poj 1001 java大精度

    import java.io.* ; import java.math.* ; import java.util.* ; import java.text.* ; public class Main ...

  2. OpenGL核心技术之混合技术

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者.国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...

  3. thinkphp最简单路由

    thinkphp最简单路由 一.总结 1.路由应用场景(前台要,后台不要):前台所有人都可以看,所以前台的话设置路由,后台的话并不是所有人都进去,所以不需要设置路由 2.模块分离来实现路由场景应用:前 ...

  4. DNS Flood Detector让DNS更安全

    650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic.php?refimg=" ...

  5. HDU 2068 RPG的错排(错排公式 + 具体解释)

    RPG的错排 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  6. elasticsearch选举master

    数据节点确定了master以后.会开启MasterPinger线程来与其保持心跳通信的逻辑假设通信过程中链接断开,会通过MasterNodeFailureListener监听器进行回调处理处理过程中会 ...

  7. A题之拼音转数字

    输入是一个仅仅包括拼音的字符串,请输出相应的数字序列.转换关系例如以下: 描写叙述: 拼音 yi er san si wu liu qi ba jiu       阿拉伯数字 1 2 3 4 5 6 ...

  8. home-界面返回上一级功能

    1,这个主要是用在actionbar上home键,直接上代码 import android.view.MenuItem; /* Vanzo:zhangshuli on: Mon, 23 Mar 201 ...

  9. 3.lombok系列3：lombok的实验类特性

    转自:https://blog.csdn.net/54powerman/article/details/72516755 lombok除了已经推荐使用的基本功能,还维护了一个创新型的注解,有些功能有违 ...

  10. 开发板 Linux驱动视频 驱动是什么

    内存管理单元很重要. linux把设备看成文件,(open,read,write,ioctrl,close)主要写这几个函数. 哈弗结构,取指令和取数据同时进行. arm处理器体系架构以及发展方向 单 ...