一：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. 测试 Components 与 Controls 的区别（嵌套在Panel上的Edit，依然是Form1的Component）

    本例效果图: 代码文件: unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, ...

  2. Hadoop集群（第2期）虚拟机网卡的介绍和配置

    很多人安装虚拟机的时候,经常遇到不能上网的问题,而vmware有三种网络模式,对初学者来说也比较眼花聊乱,今天我就来基于虚拟机3种网络模式,帮大家普及下虚拟机上网的背景知识 虚拟机网络模式 无论是vm ...

  3. nice-validator表单验证插件的简单使用

    前言 前端表单校验是过滤无效数据.假数据.有毒数据的第一步,是数据安全的第一道关卡,虽然我们不能100%相信客户端提交的数据(真正的校验还得在服务端进行),但设置前端表单校验也是至关重要的,自己写逻辑 ...

  4. excel表格处理

    xlrd模块 ​ 是python中一个第三方的用于读取excle表格的模块,很多企业在没有使用计算机管理前大多使用表格来管理数据,所以导入表格还是非常常用的! exlce结构分析 ​ 一个excle表 ...

  5. iOS登录及token的业务逻辑(没怎么用过，看各种文章总结)

    http:是短连接. 服务器如何判断当前用户是否登录? // 1. 如果是即时通信类:长连接. // 如何保证服务器跟客户端保持长连接状态? // "心跳包" 用来检测用户是否在线 ...

  6. KNN算法——分类部分

    1.核心思想 如果一个样本在特征空间中的k个最相邻的样本中的大多数属于某一个类别,则该样本也属于这个类别,并具有这个类别上样本的特性.也就是说找出一个样本的k个最近邻居,将这些邻居的属性的平均值赋给该 ...

  7. 用composer安装php代码（以安装phpmailer为例）

    1.安装composer.exe软件 2.下载composer.phar 3.创建composer.json文件 { "require": { "php": & ...

  8. 【Linux杂记】screen命令

    screen命令: 解决的问题:有些进程启动后,一旦断开ssh容易断掉,所以新建一个screen(可以理解成窗口)并行运行 守护进程的方式:linux守护进程的方式实现开机启动某些特定的程序 屏幕命令 ...

  9. valet环境PHPstorm+xdebug调试

    1.安装xdebug 2.配置xdebug zend_extension="/usr/local/Cellar/php@7.2/7.2.18/pecl/20170718/xdebug.so& ...

  10. 阿里云ECS发送企业邮件

    <?phpuse PHPMailer\PHPMailer\PHPMailer;require '../vendor/autoload.php'; $mail = new PHPMailer(tr ...