HTML格式布局

一、positionfixed

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

二、positionabsolute

  1.外层没有position:absolute(或relative);那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素)。

  2.外层有position:absolute(或relative);那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素)。

三、positionrelative

  相对位置。

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

四、分层(z-index

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

  在上面relative的示例中,我们看到了aa遮住了a,这是因为后写代码的显示级别越靠前,那么在不改变代码顺序的情况下如何让a盖住aa?如下:

五、floatleftright

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

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

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

设置超链接的样式示例:

附:cursor:pointer    鼠标指到上面时的形状

&copy                  版权符号©

半透明效果:

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

在样式表中的代码为:

.box

{

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

}

时间: 2024-12-27 18:40:28

HTML格式布局的相关文章

样式表 格式布局

一.样式表 1.分类 (1)内联样式表 即在body里面设置style. (2)内嵌样式表 即在head里面设置style. (3)外部样式表 即在CSS里面设置style. 2.选择器 (1)标签选择器.用标签名做选择器. (2)class选择器.都是以“.”开头. (3)ID选择器.以“#”开头. (4)复合选择器   用“,”隔开,表示并列. 用空格隔开,表示后代.相当于共有的. 筛选“.”. 二.样式属性 (一)背景与前景 2.前景字体: (二)边界和边框 (三) 链接的style:  

2016年10月27日--格式布局

格式布局 1.position:fixed 相对于浏览器窗口来对元素进行定位 position:fixed <html> <head> <style type="text/css"> p.one { position:fixed; left:5px; top:5px; } p.two { position:fixed; top:30px; right:5px; } </style> </head> <body> &

集算器如何优化复杂报表计算(2)格式布局及过程计算

布局格式 横向分栏 大多数报表工具都支持纵向分栏,但几乎没有报表工具支持横向分栏,我们可以用集算器把数据集事先摆好. A B C 1 =db.query("select a,b,c from T ") 2 =A1.step(3,1) =A1.step(3,2)|[null] =A1.step(3,3)|[null] 3 =A2.derive(B2(#).a:a2,B2(#).b:b2,B2(#).c:c2,C2(#).a:a3,C2(#).b:b3,C2(#).c:c3) 这段代码将3

Java 新手学习 CSS样式列表 排版 格式布局

1,样式表分为  内联样式表   内嵌样式表  外部样式表  三种. 内联样式表是直接写在标签里面的  比如 <p style=“”></p>  <div style=""></div> 内嵌样式表是必须写在head 标签里面的  比如 <style> p{样式} </style> 只针对body 里的p 标签 改变样式 也可以是 <style> div{样式(样式可以自己设定)比如 width:200

HTML_css样式表 样式属性 格式布局

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p  

样式表与格式布局

样式表 内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style > p   //格式对p标签起作用 { 样式: } </style> 外部样式表 新建一个CSS文件,用来放置样式表.如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表→附加样式表.一般用link连接方式. 把编剧都设为0像素: 第一种,class引出: 第二种,id引出,独一无二的 第三种:class引出 第四种main 的子标签是p标签 1.外层没有positio

1223格式布局!!!

布局大体分为:                             绝对坐标                                  相对坐标                                       锁定(广告)坐标 位置--position                        absolute                                 relative                                      

css样式表,格式布局。

今天不写知识了,这两天一直在练习,回想一下学习的内容,首先,你建立一个盒子,你得想到把盒子放在哪个位置,这时候就需要确定一下距离上下左右边框的距离,用什么定位,用相对定位还是绝对定位,一般默认的是相对定位,绝对定位有点死脑筋,也可以这样理解.你输入边距加一个position:fixed;把这个盒子定死了. 对于多个盒子的理解有时候需要用到流式布局,不建立流式布局,建立的盒子会从第一个盒子开始往下走,不会直着顺序走,一般都会用到流式布局.我自己理解的,定义一个盒子的位置很简单其实,你只要不粗心写错

【3-24】css样式表分类、选择器、样式属性、格式布局

一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> <div style="text-decoration:line-through;">第四格第三元</div> (二)内嵌样式表:将代码写在标签<style type="text/css"></style>之间,此标签一

表格式布局让每个列高度等于该行最大高度

通常横向布局时采用float浮动布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .left, .right { float: left; border: 1px solid #f40; } </style> </head> <body> <div cl