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. OpenCASCADE Job - 深圳鞋博士

    鞋博士 鞋博士经过8年沉淀,在鞋类工业4.0全流程平台上积累了相当的技术实力,获投资商亲睐. 新的一年,在投资商协助下,将踏上新的征途,因此诚邀您加盟顶层技术合伙人. 如果您具备以下实力,我们期待您的 ...

  2. 50行python代码实现个代理server（你懂的）

    之前遇到一个场景是这种: 我在自己的电脑上须要用mongodb图形client,可是mongodb的server地址没有对外网开放,仅仅能通过先登录主机A,然后再从A连接mongodbserverB. ...

  3. Linux下的led驱动程序，ok6410

    本程序採用动态映射的方法控制led.硬件平台为飞凌的ok6410 led.h:定义控制命令 #ifndef _LED_H #define _LED_H #define LED_MAGIC 'M' #d ...

  4. 使用Iperf调整网络

    使用Iperf调整网络     Iperf 是一个 TCP/IP 和 UDP/IP 的性能测量工具,通过调谐各种参数可以测试TCP的最大带宽,并报告带宽.延迟,最大段和最大传输单元大小等统计信息.Ip ...

  5. 【习题 6-4 UVA-439】Knight Moves

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] bfs模板题 [代码] /* 1.Shoud it use long long ? 2.Have you ever test sev ...

  6. WebService学习总结（5）——WebService常见开发框架比较

    在SOA领域,我们认为Web Service是SOA体系的构建单元(building block).对于服务开发人员来说,AXIS和CXF一定都不会陌生.这两个产品都是Apache孵化器下面的Web ...

  7. 洛谷——P1046 陶陶摘苹果

    https://www.luogu.org/problem/show?pid=1046 题目描述 陶陶家的院子里有一棵苹果树,每到秋天树上就会结出10个苹果.苹果成熟的时候,陶陶就会跑去摘苹果.陶陶有 ...

  8. 【微信】微信获取TOKEN,以及储存TOKEN方法，Spring quartz让Token永只是期

    官网说明 access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token.开发人员须要进行妥善保存. access_token的存储至少要保留512个字符空间.ac ...

  9. hadoop组件及其作用

    1.hadoop有三个主要的核心组件:HDFS(分布式文件存储).MAPREDUCE(分布式的计算).YARN(资源调度),现在云计算包括大数据和虚拟化进行支撑. 在HADOOP(hdfs.MAPRE ...

  10. Js里面的arguments

    了解这个对象之前先来认识一下javascript的一些功能: 其实Javascript并没有重载函数的功能,但是Arguments对象能够模拟重载.Javascrip中国每个函数都会有一个Argume ...