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. 安装mysql遇到的问题

    想在自己的PC上安装mysql服务器,首先在官网下载mysql的安装文件. MySQL安装文件分两种 .msi和.zip ,.msi需要安装,.zip文件需要配置环境变量. 我首先下载的是不需要安装的 ...

  2. 第二阶段冲刺个人任务——five

    今日任务: 合并程序(统计团队博客). 昨日成果: 优化统计团队博客结果界面的显示.

  3. 【Oracle】复制表结构和表数据

    1.既复制表结构也复制表数据:CREATE TABLE tab_new AS SELECT * FROM tab_old; 2.只复制表结构:CREATE TABLE tab_new AS SELEC ...

  4. CQBZOJ 避开怪兽

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

  5. a标签跳转小程序

    随着小程序应用的逐步广泛,与公众号之前的协同运营越来越重要,通过公众号的各个入口为小程序导流.最近在运营中发现,大家对公众号关注后回复.关键词回复,超链接小程序的需求.        首先把小程序绑定 ...

  6. IDEA更换banner(娱乐专用)

    1.佛祖保佑 永无bug _ooOoo_ o8888888o 88" . "88 (| -_- |) O\ = /O ____/`---'\____ .' \\| |// `. / ...

  7. flask使用blinker信号机制解耦业务代码解决ImportError: cannot import name 'app',以异步发送邮件为例

    百度了大半天,不知道怎么搞,直到学习了blinker才想到解决办法,因为之前写java都是文件分开的, 所以发送邮件业务代码也放到view里面,但是异步线程需要使用app,蛋疼的是其他模块不能从app ...

  8. 深浅拷贝 集合（定义，方法） 函数（定义，参数，return，作用域） 初识

    深浅拷贝 在python中浅拷贝 a=[1,2,3,4,]b=a.copy()b[0]='3333'print(a) #[1, 2, 3, 4] 浅拷贝一层并不会对a造成变化print(b) #[33 ...

  9. vue 新建脚手架项目npm命令

    使用国外原镜像 npm install -g @vue/cli   //yarn global add @vue/cli            使用淘宝镜像 cnpm install -g @vue/ ...

  10. Spring Boot入门简介-Maven配置

    一.简介 -- 简化Spring应用开发的一个框架: -- 整个Spring技术栈的一个大整合: -- J2EE开发的一站式解决方案. 二.背景: ① J2EE笨重的开发.繁多的配置.低下的开发效率. ...