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. intellij idea svn 切换分支

    原文地址:https://blog.csdn.net/wangjun5159/article/details/75137964 切换分支 更新/切换svn的快捷键是ctrl+T,这个快捷键还是很好用的 ...

  2. [转载收藏]C#基础知识梳理系列十一：垃圾回收机制

    摘 要 基于.NET平台的开发语言中,最让开发人员爽的一点就是垃圾回收处理机制,在编码过程中,终于可以解放你的双手来关注更重要的事情.很多的资料中在讲到.NET中的垃圾回收机制时都说"CLR ...

  3. mysql5.7的基本使用

    mysql的基本使用:最简单的增删改查 (建议用类似记事本的东西写代码,错了容易改) 以下就是这篇文章的代码 一,增和查   CREATE DATABASE one; 新建了一个名为one的数据库 S ...

  4. FLASK 三剑客 request jinjia2

    Flask Web 框架Django 15 优势 : 组件全 - admin - Model ORM - Forms 教科书式 劣势 : 加载所有组件 - 占用资源较高 重型框架 Flask 3 优势 ...

  5. PDO和Mysqli的区别

    参考:http://www.cnblogs.com/feng18/p/6523646.html 人家写的不错

  6. ts和nts的区别 (redis中碰到)

    [TS指Thread Safet y线程安全 NTS即None-Thread Safe 非线程安全] 区别:[TS   NTS] TS指Thread Safety,即线程安全,一般在IIS以ISAPI ...

  7. Linux(Centos)安装Java JDK及卸载

    步骤一.下载安装包 a.   因为Java JDK区分32位和64位,所以安装之前需先判断一下我们操作系统为多少位·,命令如下: uname -a 解释:如果有x86_64就是64位的,没有就是32位 ...

  8. Springboot+SpringSecurity实现图片验证码登录问题

    这个问题,网上找了好多,结果代码都不全,找了好多,要不是就自动注入的类注入不了,编译报错,要不异常捕获不了浪费好多时间,就觉得,框架不熟就不能随便用,全是坑,气死我了,最后改了两天.终于弄好啦; 问题 ...

  9. python学习Day04--列表

    [主要内容] 1.列表的索引: lst=[1,2,3,4,5,6] print(lst[0])      #获取第一个元素 lst[1]='你好'    #改变列表中的值 2.列表的切片: lst=[ ...

  10. 【WPF学习】第三十八章 行为

    样式提供了重用一组属性设置的实用方法.它们为帮助构建一致的.组织良好的界面迈出了重要的第一步——但是它们也是有许多限制. 问题是在典型的应用程序中,属性设置仅是用户界面基础结构的一小部分.甚至最基本的 ...