一：position:fixed

锁定位置（相对于浏览器的位置），例如有些网站的右下角弹窗

例如：

<head>

<title>网页标题</title>

<style type="text/css">

#a

{

border:5px solid blue;     /*设置边框粗细，样式，颜色*/

width:100px;     /*设置宽*/

heigth:100px;    /*设置高*/

margin:10px;       /*设置边距*/

background-color:red;     /*设置背景色*/

left:30px;           /*距离左侧*/

bottom:20px;     /*距离底部*/

position:fixed;     /*锁定此位置*/

}

</style>

</head>

<body>

<div id="a">练习</div>

</body>

二：position:absolute(绝对的)

1）外层没有positon:absolute(或relative),那么div相对于浏览器定位。

2）外层有position：absolute（或relative），那么div相对于外层边框定位。

例如如下代码：

<head>

<title>页面标题</title>

<style type="text/css">

.b

{

border:5px solid blue;  /*设置边框线样式 颜色*/

width:100px;   /*设置宽*/

heigth:100px;   /*设置高*/

margin:10px;     /*设置边距*/

background-color:red;   /*设置背景色*/

right:50px;          /*距离右侧*/

bottom:20px;        /*距离底部*/

position:absolute;    /*设置定位，锁定此位置*/

}

.c

{

border:2px solid red;

width:400px;

heigth:200px;

}

</style>

<style type="text/css“>

.d

{

border:2px solid red;

width:400px;

heigth:200px;

position:absolute;

}

</style>

</head>

<body>

<div class="c">c

  <div class="b">b

  </div>

</div>

<div class="d">d

  <div class="bb">bb

   </div>

<div>

</body>

三.position:relative

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

相对于默认位置的移动。根据如下代码，a在用relative移动前的位置，aa为用relative移动后的位置，aa距原位置上部间距50像素，距原位置左边距20像素。

<head>

<title>网页标题</title>

<style type="text/css">

#a

{

border:5px solid red;

width:100px;

heigth:100px;

margin:10px;

background-color:#0F3;

position:fixed;

}

#aa

{

border:5px solid blue;

width:100px;

heigth:100px;

margin:10px;

background-color:red;

left:20px;

top:50px;

position:relative;

}

</style>

</head>

<body>

<div id="a">a

</div>

<div id="aa">aa

<div>

</body>

(上述代码中，如果aa不包含在a里面，则a是停留在上层，不随着滚动条滚动，会锁定位置；如果aa包含在a里面，则aa会随着a定位的位置移动）

四.分层（z-index）

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

在上面relative的示例中，我们看到了aa盖住了a，这是 因为后写的代码会盖住前面的代码，那么在不改变代码顺序的情况下，如何让a盖住aa呢，代码示例如下：

<head>

<title>网页标题</title>

<style type="text/css">

.a

{

border:5px solid red;

width:100px;

heigth:100px;

margin:10px;

background-color:blue;

position:fixed;

z-index:;   /*修改这里，默认情况下的index值是1，也就是都是第一层*/

}

.aa

{

border:5px solid blue;

width:100px;

heigth:100px;

margin:10px;

background-color:red;

left:20px;

top:50px;

position:relative;

}

</style>

</head>

<body>

<div class="a">a

</div>

<div class="aa">aa

</div>

</body>

五.float:left、 rigth （float：流式布局流式布局常用值：left、rigth）

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

overflow:hidden;  //超出部分隐藏；scroll，超出范围时出滚动条；

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

 <head>

<title>网页标题</title>

<style type="text/css">

#a

{

border:5px solid blue;

width:100px;

heigth:100px;

margin:10px;

background-color:red;

overflow:scroll;

float:rigth;

}

</style>

</head>

<body>

<div id="a">练习hi安居诶安居卡死的房价房价房价房价是打开v网号安居佛得角覅及覅手机覅工会卡少女夏萨</div>

</body>

超链接样式：

<style type="text/css">

a:link    /*一般链接*/

{

color:blue;

a:visited  /*被访问过的链接的格式*/

{

color:green；

}

a:hover /*设置鼠标指向链接时候的形式*/

{

color:red;

}

</style>

(以上链接，在定义这些状态时有个顺序 l v h a (必须按照这个顺序)，其中a:active：点击超链接时候的状态，可以省略不写，代表点击的时候没有任何状态)

cursor:pointer  表示鼠标指到上面时的形状。这里是小手形状的

半透明效果

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

//样式表中的代码：

.box

{

opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)
background-color:red;
width:200px;
heigth:200px;

}

opacity:填充效果  -moz-opacity:透明度

HTML--CSS样式表--格式与布局的更多相关文章

  1. css样式表 格式与布局

    1 样式表  内联样式表  内嵌样式表  外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器  以.开头 ID选择器 以#开 ...

  2. CSS样式表——列表与布局

    列表方块:针对<ol></ol>和<ul></ul> 属性style="list-style:none"               ...

  3. CSS样式表——格式与选择器

    1.分类 1)内联(写在标签内部) style="样式" 控制精确,代码重用性差 2)内嵌(在<head></head>中) <style type= ...

  4. css样式表：样式分类，选择器。样式属性，格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  5. HTML——CSS样式表&布局页面

    CSS样式表: 一.作用:美化网页,页面布局. 二.分类: 内联,写在body里标签style=""里面的样式,优点是控制精确,可重用性差. 内嵌,嵌在网页的head里面,可重用性 ...

  6. CSS三种插入样式表格式

    首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距. ...

  7. 网页 CSS样式表

    昨天,我主要是对CSS样式表进行了一下复习. CSS样式表主要有三类:内联样式表.内嵌样式表.外部样式表,我们平时一般使用第二种样式表. 选择器主要包括:标签选择器.class选择器.ID选择器.复合 ...

  8. 【2017-03-24】CSS样式表

    CSS样式表:层叠式样式表 一.样式表的分类 1.内联式 写在标记的属性位置,优先级最高,重用性最差. 格式: <div style="width:100px;height:100px ...

  9. HTML css 样式表

    CSS样式表 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14 ...

随机推荐

  1. 再谈Delphi关机消息拦截 -- 之控制台程序 SetConsoleCtrlHandler（控制台使用回调函数拦截，比较有意思）

    这里补充一下第一篇文章中提到的拦截关机消息 Delphi消息拦截:http://blog.csdn.net/cwpoint/archive/2011/04/05/6302314.aspx 下面我再介绍 ...

  2. BITED数学建模七日谈之一：参加全国大学生数学建模比赛前你需要积累哪些

    大家好,我是数学中国的版主magic2728,非常高兴能够借助数学中国这个平台分享一些自己的经验,帮助大家在国赛的最后备战中能够最后冲刺提高.分享一共分为七个部分,分七天写给大家,下面是第一个部分:参 ...

  3. 下载Cloudera Repo

    wget http://archive-primary.cloudera.com/gplextras5/redhat/6/x86_64/gplextras/cloudera-gplextras5.re ...

  4. Hadoop集群（第3期）机器信息分布表

    1.分布式环境搭建 采用4台安装Linux环境的机器来构建一个小规模的分布式集群. 图1 集群的架构 其中有一台机器是Master节点,即名称节点,另外三台是Slaver节点,即数据节点.这四台机器彼 ...

  5. Laravel --- Laravel5.3 和 Workerman结合使用（异步）

    网上查阅资料有现成和workerman结合的composer组件,但个人感觉不太靠谱,github上star太少,而且怕有问题也不好调,就想自己先试试. 我的办法因为修改要一点Workerman源码, ...

  6. Windows下OSGEarth的编译过程

    目录 1. 依赖 1) OpenSceneGraph 2) GDAL 3) CURL 4) GEOS 5) 其他 2. 编译 1) 设置参数 2) 配置路径 3) 生成编译 3. 参考文献 1. 依赖 ...

  7. spring cloud 系列第2篇 —— eureka 高可用注册中心的搭建 (F版本)

    源码仓库地址:https://github.com/heibaiying/spring-samples-for-all 一.项目结构 eureka-server为服务注册中心,负责服务的管理: eur ...

  8. java基础知识总结（一）

    满满的干货=-= (一)环境变量的作用: 每个人刚开始学习java的时候,肯定都是安装JDK,配置环境变量,怎么配置网上教程很多很多,但是为什么这么配置呢? 我配置的环境变量: JAVA_HOME:C ...

  9. Netty源码分析-- 处理客户端接入请求（八）

    这一节我们来一起看下,一个客户端接入进来是什么情况.首先我们根据之前的分析,先启动服务端,然后打一个断点. 这个断点打在哪里呢?就是NioEventLoop上的select方法上. 然后我们启动一个客 ...

  10. Python 爬虫从入门到进阶之路（十三）

    之前的文章我们介绍了一下 BeautifulSoup4 模块,接下来我们就利用 BeautifulSoup4 模块爬取<糗事百科>的糗事. 之前我们已经分别利用 re 模块和 Xpath ...