网页制作之html基础学习4-格式与布局
1、position：fixed
锁定位置（相对于浏览器的位置），例如有些网站的右下角弹窗
例：
<head>
<title>123</title>
<style type="text/css">
#a
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:#0F3;
left:30px;
bottom:20px;
position:fixed;
}
</style>
</head>
<body>
<div id="a">a
</div>
</body>
显示如下
<!--[endif]-->
2、position：absolute
1）、外层没有position:absolute（或relative）;，那么div相对于浏览器定位，如下图中b（距离浏览器的右边框50像素，距离浏览器的下边框20像素）。
2）、外层有position:absolute（或relative）;，那么div相对于外层边框定位，如下图中bb（距离d的右边框50像素，距离d的下边框20像素）。
代码：
<head>
<title>123</title>
<style type="text/css">
.b
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:#0F3;
right:50px;
bottom:20px;
position:absolute; /**/
}
.c
{
border:2px solid red;
width:400px;
height:200px;
}
</style>
<style type="text/css">
.d
{
border:2px solid red;
width:400px;
height:200px;
position:absolute;
}
</style>
</head>
<body>
<div class="c">c
<div class="b">b
</div>
</div>
<div class="d">d
<div class="b">bb
</div>
</div>
</body>
显示如下：
3、position：relative
相对于默认位置的移动。如下图，a在用relative移动前的位置，aa为用relative移动后的位置，aa距原位置上部间距50像素，距原位置左边距20像素。
代码：
<
head>
<title>123</title>
<style type="text/css">
#a
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:#0F3;
position:fixed;
}
#aa
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:#0F3;
left:20px;
top:50px;
position:relative;
}
</style>
</head>
<body>
<div id="a">a
</div>
<div id="aa">aa
</div>
</body>
显示如下:
4、分层（z-index）
在Z轴方向分层，可以理解为分成一摞纸，层数越高越靠上。
在上面relative的示例中，我们看到aa盖住了a，这是因为后写代码的会盖住前面的，那么在不改变代码顺序的情况下如何让a盖住aa，如下：
<head>
<title>123</title>
<style type="text/css">
.a
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:#0F3;
position:fixed;
z-index:2; /*这里做一下修改，默认情况下，都是第1层*/
}
.aa
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:#0F3;
left:20px;
top:50px;
position:relative;
}
</style>
</head>
<body>
<div class="a">a
</div>
<div class="aa">aa
</div>
</body>
显示如下:
5、float：left，right
<div style="clear:both"></div> 截断流;
附：
overflow:hidden; /*超出范围时隐藏；scroll，超出范围时出滚动条。*/
超链接样式：
<style type="text/css">
a:link /*一般链接*/
{
color:blue;
}
a:visited /*访问过的链接的格式*/
{
color:green;
}
a:hover /*设置鼠标指向链接时的形式*/
{
color:red;
}
</style>
cursor:pointer 鼠标指到上面时的形状。
© 版权符号©
半透明效果
<div class="box">透明区域</div>
//样式表中代码：
.box
{
opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)
}
布局的三种方式：
1.自然布局
没有任何修饰的布局是自动靠左的。
2.流动布局
上面讲的float:left的情况。
3.定位布局
相对定位和绝对定位都是相对于父div标签的。
相对------以这个元素的本来应该在的位置为参照点
绝对——以父div标签的原点（左上角）为参照点。
由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只写position:relative，写上left,top这两个值，则表示以：以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。
还有一种情况是，只是一个position:absolute;外层没有position:relative，这时会找寻那个点为参考呢？这时候的原则是：如果某父级元素中有relative者，则以某父级元素为参考原点，如果没有position:relative，则以body为参考原点。如果position:absolute外层没有relative时，这两个布局上是没有区别的。
当然最后一种情况是：外层是：position:absolute;里边是position:relative，那会是什么情况？按着原来的原则，absolute会参考body为布局原点，relative会参考他本来应该在的位置为布局原点，这时候其实就是参考外层左上角为布局原点。
其它的要看实际情况而定。
网页制作之html基础学习4-格式与布局的更多相关文章
- 网页制作之html基础学习1-简介
学习网页制作主要分为三大块 1.HTML 超文本标记语言( 全称:Hyper Text Markup Language) 专门编辑静态网页 2.CSS 网页美化:是HTML控制的样式 ...
- 网页制作之html基础学习6-CSS浏览器兼容问题
初学html和css时,每天切图,总会遇到很多浏览器兼容性问题.最近一直关注移动平台开发,就html和css来说,不用考虑那么多浏览器兼容性问题.到现在,以至于很多浏览器兼容性几乎忘光了.今天把以前总 ...
- 网页制作之html基础学习3-css样式表
样式:CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 在样式里面用 /* */ 进行注释. 1.样式表的基本概念 1.1.样式表分类 1.内联样式表 和 ...
- 网页制作之html基础学习2-标签
一.html结构组成 <html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> & ...
- 网页制作之html基础学习5-background-position用法
我们知道在用图片作为背景的时候,css要这样写,以div容器举例子,也可以是body.td.p等的背景,道理一样. 代码: div{ background:#FFF url(image) no-rep ...
- Html JavaScript网页制作与开发完全学习手册
Html JavaScript网页制作与开发完全学习手册 篇 HTML技术章 HTML入门 1.1 什么是HTML 1.1.1 HTML的特点 1.1.2 HTML的历史 1.2 HTML文件的基本结 ...
- 零基础学习java------39---------json格式交互，Restful（不懂），静态资源映射，SSM整合（ssm整合思想，application.xml文件详解(声明式事务管理)，）
一. json格式交互(知道) 1 . 回顾ajax基本语法 $.ajax({ url:"", // 请求的后台路径 data:{"":"" ...
- IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作
学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...
- 学会网页制作，web app开发，必须先从语法基础开始学习
做软件开发,是从事编程开发工作,必须先从语法基础开始学习,通过语法组成产品效果. 前端开发的基础语法,由HTML+CSS+JavaScript组成,这是前端开发最基本的3个语言. ...
随机推荐
- android 支持分组和联系人展示的一个小样例
先看效果图: 要实现这个效果,activity必须实现ExpandableListActivity @Override public void onCreate(Bundle savedInstanc ...
- java结构与算法之冒泡排序
一.什么是冒泡排序:冒泡排序是在从相邻两个数之间进行比较,这里将前面一个值定义为before,后面一个值定义为after:当before>after时i,交换他们的值,如果before<a ...
- G - RPG的错排（错排）
Description 今年暑假杭电ACM集训队第一次组成女生队,其中有一队叫RPG,但做为集训队成员之一的野骆驼竟然不知道RPG三个人具体是谁谁.RPG给他机会让他猜猜,第一次猜:R是公主,P是草儿 ...
- C#调用C/C++动态库 封送结构体，结构体数组
因为实验室图像处理的算法都是在OpenCV下写的,还有就是导航的算法也是用C++写的,然后界面部分要求在C#下写,所以不管是Socket通信,还是调用OpenCV的DLL模块,都设计到了C#和C++数 ...
- Opencv 完美配置攻略 2014 (Win8.1 + Opencv 2.4.8 + VS 2013)下
前面说了一些在OpenCV在VS2013下的配置的过程,下面说一下其中的个别的知识点,了解一下这样配置的一点点更细节的过程.其实配置项目属性的时候,有两种方式: 一.通过项目属性管理器配置项目属性表 ...
- C#学习日记之数据库连接
一.webconfig设置和参数解释 在C#中新建一个网站时,webconfig文件中会有一个默认的数据库连接语句,如下 <connectionStrings> <add name= ...
- shell实例浅谈之六文件特定行打印的多种方法
一.问题 Sed和AWK在处理文件方面有很强的优势,还有head和tail等文件处理工具的使用,grep也可实现文本的搜索.上述命令都可以在后面直接加文件名,不需要在前面使用cat添加管道,cat会影 ...
- Winform 绘制圆形的图片
string filename = "icon.png";//如果不是png类型,须转换 System.Drawing.Bitmap bitmap = new System.Dra ...
- C# Thread Programming Start
引言 1.理解多线程 2. 线程异步与线程同步 3.创建多线程应用程序 3.1通过System.Threading命名空间的类构建 3.1.1异步调用线程 3.1.2并发问题 3.1.3线程同步 3. ...
- SQLite取值时的下标与创建表中字段的关系