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. absolute、relative，toggle()

    測试代码例如以下: <div> <div class="global">不应用样式</div> <div class="glob ...

  2. activity-启动动画的设定（下面弹出出现，弹入下面消失）

    1.今天为了把一个activity以dialog的形式显示,而且实现从开始的时候从底部往上弹出,结束的时候,从上往下消失,做了如下的工作. 1)如果把一个activity以dialog的形式显示? 这 ...

  3. android图片特效处理之光晕效果

    这篇将讲到图片特效处理的图片光晕效果.跟前面一样是对像素点进行处理,本篇实现的思路可参见android图像处理系列之九--图片特效处理之二-模糊效果和android图像处理系列之十三--图片特效处理之 ...

  4. Elasticsearch之插件扩展

    Elasticsearch之插件介绍及安装 Elasticsearch之head插件安装之后的浏览详解 Elasticsearch之kopf插件安装之后的浏览详解 Elasticsearch-2.4. ...

  5. BZOJ3926: [Zjoi2015]诸神眷顾的幻想乡（广义后缀自动机）

    Description 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热情,自发组织表演了一系列节目给幽香看. ...

  6. 【Python】用Python的“结巴”模块进行分词

    之前都是用计算所的分词工具进行分词,效果不错可是比較麻烦,近期開始用Python的"结巴"模块进行分词,感觉很方便.这里将我写的一些小程序分享给大家,希望对大家有所帮助. 以下这个 ...

  7. 14.inline与namespace使用

    #include <iostream> using namespace std; namespace all { //inline作用为默认调用 inline namespace V201 ...

  8. openGLES（二）

    顶点和着色器 ​ 我们使用独立的点集合构建物体,都是使用顶点,之后会使用着色绘制图性,以及告诉OpenGLES如何绘制的小程序. ​ 片段着色器,即每个小的像素的渲染, ​ 顶点着色器确定所绘制图像的 ...

  9. SqlParameter的用法

    SqlParameter的用法 关于Sql注入的基本概念,相信不需多说,大家都清楚,经典的注入语句是' or 1=1--单引号而截断字符串,“or 1=1”的永真式的出现使得表的一些信息被暴露出来,如 ...

  10. （JavaScript基础向）sort()方法里的排序函数的理解

    比较常见的解释可以看这里:js的sort()方法,这篇博客写得挺好的,一般的应用的理解已经足够了. 但是如果要活用sort()方法里面的参数——也就是排序函数的话,可能就比较难理解了. 然后我就总结出 ...