文档章节

格式布局

badboy之1993
 badboy之1993
发布于 2016/05/12 14:08
字数 306
阅读 2
收藏 0

HTML格式布局

 

一、position:fixed

 

锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。

复制代码
#top
{
    border:1px solid #999;
    height:100px;
    width:966px;
    top:10px;
    left:200px;
    right:200px;
    background-color:#FFF;
    position:fixed;
    z-index:2;
    
    }
复制代码

二、position:absolute

1.外层没有position:absolute(或relative);那么div相对于浏览器定位。如图1

2.外层有position:absolute(或relative);那么div相对于外层边框定位。如图2

图1:

图2:

 

三、position:relative

相对位置。

  如下图,相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的,那就相对于浏览器进行相对位置的固定。

 

 

四、分层(z-index)

在z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。

 

五、float:left、right

Left、right时不用给他规定位置(left、top),直接相对于浏览器。若外部被包裹,相对于外部div的除去一行的位置的左上或右上显示。

  overflow:hidden;    //超出部分隐藏;scroll,显示出滚动条;

  <div style="clear:both"></div>   //截断流

 

 

半透明效果:

 

  <div class="box">透明区域<div>

 

在样式表中的代码为:

 

.box

 

{

 

opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)

 

}

© 著作权归作者所有

badboy之1993
粉丝 0
博文 42
码字总数 32545
作品 0
淄博
私信 提问
主谓宾打遍天下,如何设计产品需求用例标题

今天深深的意识到标题很重要,下午做了一个需求评审,其中的用例名“布局切换”,被我作为一个问题点做了详细的解析。 给了一个评语,请找出主谓宾,在标题里清楚地看出需要描述的需求是什么...

小魔怪妈妈
2017/12/19
0
0
android项目R.JAVA id 类不自动生成的原因

先不要着急,不要怀疑是软件的的问题。先按照一下的不走的操作。目前遇到的是一下两种问题,希望有读者分享,遇到其他id无法生成的问题的时候,我会进行补充。 第一步检查自己的id的格式是否...

愤怒的小岛
2014/10/12
4.7K
7
TextView文本折叠Two

上一篇有BUG,特地再来一个 1、 创建布局 collapsibletextviewlayout.xml 布局可以自己修改样式 <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.andr......

王先森oO
2018/05/09
15
0
存储、检索多种格式的表格

情景:现在有一系列格式各异(指的是表格的行列布局格式各异)的表格(比如EXCEL表格),如何设计一个系统,可以方便地存储、检索表格中的数据(比如根据关键词检索),并且可以根据新设定的...

casinozyz
2018/08/28
107
1
前端入门5-CSS弹性布局flex

声明 本系列文章内容全部梳理自以下四个来源: 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在...

请叫我大苏
2018/10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
18
0
浅谈java过滤器Filter

一、简介 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码、做一些业务逻辑判断如是否有权限访问页面等。其工作原理是,只要你在web.xml...

青衣霓裳
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部