position格式布局
布局大体分为：
位置——position
绝对坐标
absolute
绝对定位的元素
不受其他位置影响
可通过z-index进行层次分级
body来定位自己
相对坐标
设置 top和left之后
relative
同级元素定位
实际占有页面
可通过z-index进行层次分级
锁定（广告）坐标
fixed
不会随滚动条滚动而滚动
全局去下划线
a<text-decoration:none>
指向下划线，用于超链接
a : hover
<texe-decoration:none>
指向隐藏与定位————战！111
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.aa {
width: 100px;
height: 50px;
background-color: #0FF;
position: relative;/*相对坐标*/
overflow: hidden; /*超出部分隐藏掉*/
cursor: pointer; /*指向变小手*/}
.aa:hover { /*当指向aa的时候*/
overflow: visible;/*超出部分显示*/
} .bb {
width: 100px;
height: 50px;
background-color: #C00;
position: relative;
top: 50px;
overflow: hidden;
} .bb:hover {
overflow: visible;
} .cc {
width: 100px;
height: 50px;
background-color: #F69;
position: relative;
margin-left: 100px;
} .ee {
width: 100px;
height: 50px;
background-color: #0F0;
position: relative;
top: 50px;
overflow: hidden;
} .ee:hover {
overflow: visible
} .ff {
width: 100px;
height: 50px;
background-color: #000;
position: relative;
left: 100px;
}
</style>
</head> <body>
<div class="aa">
<div class="bb">
<div class="cc"></div>
</div>
<div class="ee">
<div class="ff"></div>
</div> </div>
</body> </html>
position格式布局的更多相关文章
- CSS样式表与格式布局
样式表 CSS(Cascading Style Sheets 层叠样式表),作用是美化HTML网页. 内联样式表: 例:<p style="font-size:10px;" ...
- 3月23 格式布局及relative
主要是针对格式布局的一些内容: 1:position:fix 锁定位置(相对于浏览器的位置),例如网上弹出的一些广告 <style type="text/css"> # ...
- SWT中的布局之-----FormLayout(表格式布局)
表格式(FormLayout类) 表格式布局管理器,通过创建组件各个边的距离来布局组件,和GridLayout一样强大. 用GridLayout与FormLayout都可以实现相同的界面效果,但有时使 ...
- 一种移动端position:absolute布局：
一种移动端position:absolute布局: 1.他父级不需要加上 position:relative; 如果父级不是不是body,则加position:absolute; 2.红色加量部分 ...
- 有序列表和无序列表、流、格式布局：position
列表方块: 有序列表和无序列表 ol/ul 例如<ol: style:"list-style:"" "> 1.<ol: style:&quo ...
- Java 新手学习 CSS样式列表 排版 格式布局
1,样式表分为 内联样式表 内嵌样式表 外部样式表 三种. 内联样式表是直接写在标签里面的 比如 <p style=“”></p> <div style=& ...
- HTML_css样式表 样式属性 格式布局
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- HTML css 格式布局
CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...
- bootstrap内置网格式布局系统：
bootstrap分为12栏,若想要一个元素占用一定的栏数的宽度,可以在这个元素上用一个特定的类,就比如说span1.span2....类. 定义的布局: 定义page-header类,在这个类当中为 ...
随机推荐
- 发现的eval的一个小问题
首先我们来看五段代码: 第一段代码: function test(){ eval('var a = 1;'); alert(a); } test(); 第二段代码: function test(){ ...
- pygame 练习之 PIE game （以及简单图形训练）
简单的大饼游戏,掌握pygame中直线以及圆弧的画法,以及对输入的响应. import math import pygame, sys from pygame.locals import * pyga ...
- CentOS 7 系统的初始划配置
(1).主机名的更改 •临时生效:hostname 主机名 •永久生效:hostnamectl set-hostname 主机名 (2).网络的配置 •临时生效:ifconfig 网卡名 IP地址 ...
- Win7 64位 VS2015及MinGW环境编译矢量库agg-2.5和cairo-1.14.6
书接上文,昨天装了MinGW,主要原因之一是要用到MSYS,所以顺手把FFMPEG又编译了一遍. 回到主题,其实我是想编译矢量库,因为最近要学习一些计算几何算法,所以找个方便的2D画图库就很重要. 说 ...
- <转>ＭＦＣ注册系统/全局热键。
<转>MFC注册系统/全局热键. 1. BEGIN_MESSAGE_MAP(CRS232TESTDlg, CDialog) //{{AFX_MSG_MAP(CRS232TESTDlg) O ...
- (转)CentOs上配置samba服务
前 言 在我们使用 Windows 作为客户机的时候,通常有文件.打印共享的需求.作为Windows 网络功能之一,通常可以在 Windows 客户机之间通过 Windows Network 固有的功 ...
- C++中的注解理解
SAL: the Microsoft Source Code Annotation Language. SAL: the Microsoft Source Code Annotation Langua ...
- eclipse中输入中文为繁体
http://blog.163.com/guomaolin_gavin/blog/static/199618307201218104452930/ eclipse中输入中文为繁体! 2012-02-0 ...
- 为什么学习webdriver
http://www.boobooke.com/goods-37.html
- yii2 mpdf
安装 php composer.phar require kartik-v/yii2-mpdf "*" 或者把 "kartik-v/yii2-mpdf": &q ...