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. php excel文件导出之phpExcel扩展库

    php Excel  文件导出 phpExcel 官网 http://phpexcel.codeplex.com/ /** * 导出特定文件 * 依据详细情况而定 */ public function ...

  2. Oracle APEX 4.2公布RESTful Webservice

    Purpose This tutorial covers creating a RESTful Web Service and accessing the Web Service through an ...

  3. js22--链式调用

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

  4. js-轮播图的总结

    /*两种播放行为:(一种自动播放,一种控制播放),一个定时器控制. *一个定时器控制两种播放状态. * 布局说明:装图片的盒子足够宽,让图片左浮,排成一排,最后一张重新放置第一张. * 定时器里执行自 ...

  5. 读书笔记-Java设计模式

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! Java的封装性很好,拿访问控制符来讲,没有权限的类或方法是不能访问的.如public,都可访问:p ...

  6. [NPM] Test npm packages locally in another project using npm link

    We will import our newly published package into a new project locally to make sure everything is wor ...

  7. log4j的总结

    概述 log4j是日志处理的框架,相当于.net中的log4net.因为之前在.net中学习过log4net.所以.在学习log4j上,感觉很的亲切.本篇博客主要是讲一个图,好了进入正题. log4j ...

  8. Java Web学习总结（13）——JSP入门

    一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...

  9. amazeui学习笔记--css（常用组件11）--分页Pagination

    amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...

  10. jvisualvm 工具使用

    VisualVM 是Netbeans的profile子项目,已在JDK6.0 update 7 中自带(java启动时不需要特定参数,监控工具在bin/jvisualvm.exe). https:// ...