table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4缺一带你了解相对还是绝对抑或是固定定位，实现div绝对居中法/*父定位子绝对，子的坐标系是父的左上角；*/绝对定位和相对定位的相同点:脱离文档流，都在文档流的上方;不同点(1)绝对的坐标系在浏览器的左上角，相对的坐标系在自己的左上角(2)绝对不占位，相对占位;最后/*z-index定位层级高度，只能配合position属性*

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>11种常用css样式之表格和定位样式学习</title>

     <style type="text/css">

     table{

         width: 1000px;

         border: 1px inset skyblue;

         border-collapse: collapse;/*表格边框是否合并*/

         border-spacing: 10px;/*表格边框之间的距离*/

     }

     th,td{

         text-align: center;

         border: 1px inset skyblue;

     }

     .box2{

         position: relative;

         margin: 0 auto;

         background-color: #ccc;

         width: 600px;

         height:200px;

     }

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

     /* 父集不定位，坐标系是浏览器窗口的左上角 */

     .box2 img{

         position:absolute;

         left: 100px;

         top: 50px;

     }

     .box2 img:nth-child(1){

         z-index: 1;/*z-index定位层级高度，只能配合position属性*/

     }

     .box2 img:nth-child(2){

         z-index: 2;

     }

     </style>

 </head>

 <body>

     <!-- table表格 -->

     <table>

         <tr>

             <th>编号</th>

             <th>用户名</th>

             <th>密码</th>

         </tr>

         <tr>

             <td>1</td>

             <td>2</td>

             <td>3</td>

         </tr>

         <tr>

             <td>1</td>

             <td>2</td>

             <td>3</td>

         </tr>

     </table>

     <!-- position定位 -->

     <div class="box1">

         あなたのストレスは：自分を鍛えることができないが、一生懸命働くふりをする；現状があなたの内なる欲望に追いつくことができない；それであなたは不安でパニックになる

     </div>

     <div class="box2">

         <img src="data:images/bk.png" alt="">

         <img src="data:images/wq.png" alt="">

     </div>

     <div class="box3">

         Your stress comes from: unable to discipline yourself, but pretending to work hard;

     </div>

 </body>

 </html>

11种常用css样式之表格和定位样式学习的更多相关文章

  1. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  2. 11种常用css样式之鼠标、列表和尺寸样式学习

    鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...

  3. 11种常用css样式之border学习

    边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-st ...

  4. 11种常用css样式之background学习

    background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的backgroun ...

  5. 11种常用css样式之开篇文本字体学习

    常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...

  6. web中的CSS、Xpath等路径定位方法学习

    今天不到八点就到公司了,来的比较早,趁着有点时间,总结下web中的CSS.Xpath等路径定位定位的方式吧! 简单的介绍下xpath和css的定位 理论知识就不罗列了 还是利用博客园的首页.直接附上代 ...

  7. 常用CSS样式属性

    01.常用样式 1.1.background背景 设置元素背景的样式 background,更好的衬托内容. 属性 描述 值 background 背景属性简写.支持多组背景设置,逗号,隔开 back ...

  8. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  9. CSS 四种样式表 六种规则选择器 五种常用样式属性

    新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...

随机推荐

  1. tomcat启动时检测到循环继承而栈溢出的问题:Caused by: java.lang.IllegalStateException: Unable to complete the scan for annotations for web application [/test] due to a StackOverflowError. Possible root causes include

    最近在公司更新一个老项目的时候,发现部署项目后tomcat报错,错误如下: Caused by: java.lang.IllegalStateException: Unable to complete ...

  2. 【java基础】String、StringBuilder和StringBuffer的区别

    关于这三个类在字符串处理中的位置不言而喻,那么他们到底有什么优缺点,到底什么时候该用谁呢?下面我们从以下几点说明一下 1.三者在执行速度方面的比较:StringBuilder >  String ...

  3. 团队第一次作业（软工C#造梦厂）

    一.团队简介 a.团队名称:软工C#造梦厂 b.队员列表 姓名 学号 张旭(组长) 201731024123 周成杰 201731024136 邹扬锋 201731024134 赵俊安 2017310 ...

  4. Windows下安装Hadoop、Spark和HBase

    1.Hadoop 安装Hadoop:下载hadoop-2.7.1.tar.gz,并解压到你想要的目录下,我放在D:\Library\hadoop-2.7.1. 配置Hadoop环境变量:HADOOP_ ...

  5. c语言秋季作业3

    本周作业头 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 作业链接 我在这个课程的目标是 运用C语言编程解决一些简单的数学问题 这个作业在那个具体方面帮助我实现目标 学习if else ...

  6. H5 + WebGL 展示的3D无人机

    前言 近年来,无人机的发展越发迅速,既可民用于航拍,又可军用于侦察,涉及行业广泛,也被称为“会飞的照相机”.但作为军事使用,无人机的各项性能要求更加严格.重要.本系统则是通过 Hightopo 的   ...

  7. 如何更改cmd 编码为UTF-8

    如何将cmd编码改为UTF—8 如图输入chcp 65001即可更改 改完之后是这样的 更改回GBK 输入 CHCP 936即可

  8. SSH(一)

    系统程序架构:    整合思路        1.逆依赖方向而行,由Spring提供对象管理和服务        2.依次实现Spring与Hibernate.Spring与Struts2的集成 配置 ...

  9. nginx配置文件的通用语法介绍

    nginx的配置文件是ascii文本文件. 比如http{  }这种的是指令块,include  mime.types: 这种是指令,include是指令,mime.types指令的参数,指令和参数之 ...

  10. The Top 500 Worst Passwords (2008)

    Top 100 123456 password 12345678 1234 pussy 12345 dragon qwerty 696969 mustang letmein baseball mast ...