HTML--CSS样式表--格式与布局
一：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样式表--格式与布局的更多相关文章
- css样式表 格式与布局
1 样式表 内联样式表 内嵌样式表 外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器 以.开头 ID选择器 以#开 ...
- CSS样式表——列表与布局
列表方块:针对<ol></ol>和<ul></ul> 属性style="list-style:none" ...
- CSS样式表——格式与选择器
1.分类 1)内联(写在标签内部) style="样式" 控制精确,代码重用性差 2)内嵌(在<head></head>中) <style type= ...
- css样式表：样式分类，选择器。样式属性，格式与布局
样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...
- HTML——CSS样式表&布局页面
CSS样式表: 一.作用:美化网页,页面布局. 二.分类: 内联,写在body里标签style=""里面的样式,优点是控制精确,可重用性差. 内嵌,嵌在网页的head里面,可重用性 ...
- CSS三种插入样式表格式
首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距. ...
- 网页 CSS样式表
昨天,我主要是对CSS样式表进行了一下复习. CSS样式表主要有三类:内联样式表.内嵌样式表.外部样式表,我们平时一般使用第二种样式表. 选择器主要包括:标签选择器.class选择器.ID选择器.复合 ...
- 【2017-03-24】CSS样式表
CSS样式表:层叠式样式表 一.样式表的分类 1.内联式 写在标记的属性位置,优先级最高,重用性最差. 格式: <div style="width:100px;height:100px ...
- HTML css 样式表
CSS样式表 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14 ...
随机推荐
- notepadd++正则表达式大小写转换
示例1:将语句 test this sentence 转为大写 查找:^.*$ 替换:\U$0 或------------ 查找:^(.*)$ 替换:\U\1 或 \U$1 示例2:将语句 TEST ...
- kafka笔记2
Kafka是使用java开发的程序,所以它可以运行在多种操作系统上,安装Kafka之前,需要先安装Java环境,再安装zookeeper broker常规配置 1.broker.id 每个broker ...
- 使用wireshark捕获SSL/TLS包并分析
原创博客,转载请注出处! TLS运作方式如下图:
- ParrotSec 中文社区 QQ群认证 Openssl解密
ParrotSec 中文社区 QQ群认证 Openssl解密 下载Key.txt 打开parrot 系统,复制文件到系统.打开命令行输入 openssl enc -aes-256-cfb -d -in ...
- Java上机题(封装)(编写student类)
今天帮大一的童鞋写Java上机题 题目虽然很简单,但是刚拿到题目的时候愣了一下,然后就疯狂get set QuQ 其实这是一个特别基本的封装的题目(之前实验室面试大二的时候竟然还有蛮多人不知道封装的概 ...
- Python:字典的高级知识
一.字典 是另一种可变容器模型,且可存储任意类型对象.字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中. 二.一些字典高级知识 ...
- HDU 1542：Atlantis（扫描线+线段树 矩形面积并）***
题目链接 题意 给出n个矩形,求面积并. 思路 使用扫描线,我这里离散化y轴,按照x坐标从左往右扫过去.离散化后的y轴可以用线段树维护整个y上面的线段总长度,当碰到扫描线的时候,就可以统计面积.这里要 ...
- Java第五次作业--面向对象高级特性(抽象类与接口)
Java第五次作业--面向对象高级特性(抽象类与接口) (一)学习总结 1.在上周完成的思维导图基础上,补充本周的学习内容,对Java面向对象编程的知识点做一个全面的总结. 2.汽车租赁公司,出租汽车 ...
- Redis 使用C#程序操作Redis
一.安装操作所需Nuget包 二.写入 redis只是按Key值设置过期时间,不是对value内部的某些值设过期 2.1 string类型 /// <summary> /// 向Redis ...
- 开设“C程序答疑解惑”的初衷
博主经常在QQ群里.论坛里看到好多C语言初学者,甚至是有一定编程经验的人,咨询在编程中遇到的一些稀奇古怪的问题.博主对这些问题做过分析汇总,有些问题确实隐蔽的非常深,像break关键字用的不对啦,局部 ...