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. Redis（四）：del/unlink 命令源码解析

    上一篇文章从根本上理解了set/get的处理过程,相当于理解了 增.改.查的过程,现在就差一个删了.本篇我们来看一下删除过程. 对于客户端来说,删除操作无需区分何种数据类型,只管进行 del 操作即可 ...

  2. C++ 引用分析

    引用 左值引用,建立既存对象的别名 右值引用,可用于为临时对象延长生命周期 转发引用,保持函数实参的类别 悬置引用,对象生命周期已经结束的引用,访问改引用为未定义行为 值类别,左值,纯右值,亡值 st ...

  3. 《大道至简》第一章Java伪代码读后感

    /*写程序,实际是一种方法论.从另外一个角度帮我们看待世界,看清事物的本质. 早在两千年前的寓言中,愚公和智叟的问答中就已体现整个工程的实现程序.*/ public class 移山{ string ...

  4. 无法解析导入javax.mail

    本文链接:https://blog.csdn.net/aaqian1/article/details/89357195下载地址: http://www.oracle.com/technetwork/j ...

  5. CQBZOJ 避开怪兽

    题目描述 给出一个N行M列的地图,地图形成一个有N*M个格子的矩阵.地图中的空地用'.'表示.其中某些格子有怪兽,用'+'表示.某人要从起点格子'V'走到终点格子'J',他可以向上.下.左.右四个方向 ...

  6. Exchange Server 2016 本地部署安装流程

    思路:一台Server 2016用作AD+DNS,一台Server 2016用作Exchange Server 2016 Exchange Server 2016 CU14 安装路径:安装路径:htt ...

  7. 使用ob缓存简单实现页面静态化

    <?php //接收新闻id,传统的方法查询数据库并显示数据 $id=intval($_GET['id']); //先判断该新闻对于的静态页面是否存在,如果有,则直接返回,如果 //没有,则查询 ...

  8. spring mvc 框架运行机制 + 数据绑定原理

    spring mvc 运行主要的组件: 1 前端控制器 (dispatchservlet) 相当于一个重要处理器,它用来调用其他功能模块来分工的效应一次请求,主要起调度的作用. 2. handler ...

  9. Java常见问题汇总

    1.String,StringBuffer,StringBulider的区别及应用场景 2.Servlet生命周期 3.向上转型与向下转型 4.Java的多态性 5.重写和重载的区别 6.深拷贝和浅拷 ...

  10. springboot-mybatis配置问题

    org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题