文档章节

html 5 里外结构布局可以将 容器置身于整个页面的中央

我们取个名字叫珍惜
 我们取个名字叫珍惜
发布于 2016/10/10 18:34
字数 141
阅读 0
收藏 0

<head>

        <meta charset="utf-8" />

        <title></title>

<!--内部样式等同于cass文件-->

        <style>

            #parent

            {

            width: 200px;

            height: 200px;

            background-color: burlywood;

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%,-50%);

            }

            #child

            {

/*方法一:绝对定位position:absolute+left根据整个页面定位position: relative:相对定位根据容器 */

/*方法二:下面四行代码全上表示相对定位/*/

           1: position: relative;

          2:  top: 50%;

          3:left: 50%;

          4:  transform: translate(-50%,-50%);

            

            width: 100px;

            height: 100px;

            background-color: cadetblue;

            /*透明度*/

            opacity:0.5 ;    

            }

        </style>

    </head>

    <body>

        <div id="parent">

            <div id="child"></div>

        </div>

    </body>

© 著作权归作者所有

我们取个名字叫珍惜
粉丝 4
博文 48
码字总数 19405
作品 0
嘉兴
程序员
私信 提问
Web布局连载——两栏固定布局(五)

在上一篇《Web布局连载——两栏固定布局(四)》中留了一个下文,“No div, no float, no clear, no hack”。看起来很有意思,这种没有div,没有float,没有清除浮动和没有hack的布局,还是看...

大漠
2012/09/13
205
0
html5 新标签

在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式。而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器...

LorinLuo
2016/02/16
99
0
CSS3 弹性盒布局模型

弹性盒布局模型(Flexible Box Layout)是 CSS3 规范中提出的一种新的布局方式。 弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。 在该布...

945996501
2016/05/26
0
0
面向UI编程:ui.js 1.0 粗糙版本发布,分布式开发+容器化+组件化+配置化框架,从无到有的艰难创造

有朋友提出一看来是懵逼的,根本不知道什么是面向UI编程的思想,下面是我之前写的博客,描述的这中思想,下面为地址,参考下就明了很多了。 1. 前端思想实现:面向UI编程 2. 面向UI编程框架:...

仲强
2017/02/10
0
0
精读《用 css grid 重新思考布局》

1 引言 Flex 与 Grid 相比就像功能键盘和触摸屏。触摸屏的控制力相比功能键盘来说就像是降维打击,因为功能键盘只能上下左右控制(x、y 轴),而触摸屏打破了布局障碍,直接从(z 轴)触达,...

黄子毅
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Gradle 的项目导入到 IntelliJ 后子项目源代码不能导入

在一个 Gradle 项目中,有若干子项目。 当 Gradle 到如后,子项目不能被 IntelliJ 识别代码。 如下图的这个代码就没有被自动识别。 这个有可能是因为你的这个子项目没有被添加到父项目中。 ...

honeymoose
6分钟前
2
0
苹果cms下载地址及模板地址

https://github.com/magicblack/maccms10 程序下载: https://www.lanzous.com/b204882 教程下载: https://www.lanzous.com/b256378 模板下载: https://www.lanzous.com/b355667 插件下载:......

chenhongjiang
6分钟前
1
0
Java中使用HttpPost上传文件以及HttpGet进行API请求(包含HttpPost上传文件)

一、HttpPost上传文件 public static String getSuffix(final MultipartFile file){ if(file == null || file.getSize() == 0){ return null; } String......

codeobj
7分钟前
1
0
在Word中怎样批量删除空行,这些点主要注意

在工作中经常接触的办公软件就是Word了,熟练使用Word中的技能是准时下班的保证。这就要求我们对Word中的各项技能都熟练于心,很多朋友诉苦Word中的排版不熟悉,每次写一篇文章排版都要花费很...

干货趣分享
13分钟前
2
0
终端-Linux命令之非交互SSH密码验证-Sshpass

> Sshpass是使用SSH所谓的“交互式键盘密码身份验证”以非交互方式执行密码身份验证的工具 通俗来说就是 使用ssh密码登录 是需要在连接时手动输入密码的,没办法明文连接,如下图,需要交互的...

极客收藏夹
17分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部