HTML基础（五）——-css样式表——样式属性——格式与布局
一、position：fixed
锁定位置（相对于浏览器的位置），例如有些网站的右下角的弹出窗口。
示例：
二、position：absolute
绝对位置：
1.外层没有position：absolute（或relative）；那么div相对于浏览器定位，如下图中b（距离浏览器右边框为50像素，距离下边框为20像素）。
2.外层有position：absolute（或relative）；那么div相对于外层边框定位，如下图中bb（距离d的右边框50像素，距离d的下边框为20像素）。
示例：
三、position：relative
相对位置：
如下图，相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的，那就相对于浏览器进行相对位置的固定。
示例：
四、分层（z-index）
在z轴方向分层，可以理解为分成一摞纸，层数越高越靠上。
在上面relative的示例中，我们看到了aa遮住了a，这是因为后写代码的显示级别越靠前，那么在不改变代码顺序的情况下如何让a盖住aa。如下：
示例：
五、float：left、right
Left、right时不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。
附加：1、 overflow：hidden； //超出部分隐藏；scroll，显示出滚动条；
<div style="clear:both"></div> //截断流
2、cursor：pointer 鼠标指到上面时的形状；
3、半透明效果：
<div class="box">透明区域<div>
在样式表中的代码为：
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}
综上练习实例：做毒霸网址大全的部分格式布局
html代码：
<!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">
.a
{
border:5px solid blue;
width:1000px;
height:100px;
margin:10px;
left:150px;
top:80px;
position:absolute;}
.b
{
border:5px solid blue;
width:240px;
height:200px;
margin:10px;
left:150px;
top:200px;
position:absolute;}
.c
{
border:5px solid blue;
width:740px;
height:300px;
margin:10px;
left:410px;
top:200px;
position:absolute;}
.d
{
border:5px solid blue;
width:740px;
height:200px;
margin:10px;
left:410px;
top:520px;
position:absolute;}
.e
{
border:5px solid blue;
width:240px;
height:1500px;
margin:10px;
left:150px;
top:420px;
position:absolute;}
.f
{
border:5px solid blue;
width:240px;
height:150px;
margin:10px;
left:150px;
top:1940px;
position:absolute;}
.g
{
border:5px solid blue;
width:740px;
height:1350px;
margin:10px;
left:410px;
top:740px;
position:absolute;}
.h
{
border:5px solid blue;
width:1000px;
height:200px;
margin:10px;
left:150px;
top:2110px;
position:absolute;}
.i
{
border:5px solid blue;
width:1000px;
height:200px;
margin:10px;
left:150px;
top:2330px;
position:absolute;}
</style>
</head> <body bgcolor="#F0F0F0">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
<div class="e">e</div>
<div class="f">f</div>
<div class="g">g</div>
<div class="h">h</div>
<div class="i">i</div>
</body>
</html>
网页运行显示效果图：
HTML基础（五）——-css样式表——样式属性——格式与布局的更多相关文章
- HTML-CSS样式表-★★★常用属性★★★及基本概念、分类、选择器
样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...
- PyQt(Python+Qt)学习随笔：Qt Designer中部件的样式表styleSheet属性
styleSheet属性是定义部件外观的属性样式表,在Qt中styleSheet样式表是类似于html的css样式一样的方法,只是时专门为Qt中的部件开发的.styleSheet的定义语法也是类似CS ...
- css样式表及属性
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- 第一周复习二 （CSS样式表及其属性）
样式表三种写法 1内联写法:style直接写在标签内.个人感觉多用于个别标签,一般情况优先级较高 style="font-size:16px;" 2内嵌写法:写在<head& ...
- 为什么有时候Css样式表某个属性引用不成功？
首次使用博客,很多东西都在探索,第一篇文章也不知道发布点什么,就随便写写,是在word里面写的,也懒得排版,将就这用吧. 闲着没事找了酷狗的API写了个简单的静态网页,完成了搜索,展示,播放功能.就想 ...
- css样式表----------样式属性（背景与前景、边界和边框、列表与方块、格式与布局）
一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...
- HTML_css样式表 样式属性 格式布局
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- css样式表--样式表分类
样式表分类 1.内联式.写在body里.控制精确,可重复性差. <body> <div style="color:#90F">更好发挥的返回结果还 < ...
- css样式表---样式表分类、选择器
一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; bo ...
随机推荐
- MySQL Workbench gnome-keyring-daemon错误的解决
在Fedora下安装了一个MySQL Workbench,运行,连接数据库,在Store in Keychain时出现了gnome-keyring-daemon错误,不能保存密码,也就连不上数据库. ...
- 百度地图自定义Marker
最近写了百度地图的Demo,所以总结下遇到的问题: 1.首先在百度地图中创建应用时用到 发布版SHA1是在Preferences下的Android下的Build中;2.在使用百度地图时,先要创建一个A ...
- SNAT，是源地址转换，其作用是将ip数据包的源地址转换成另外一个地址
SNAT,可能有人觉得奇怪,好好的为什么要进行ip地址转换啊,为了弄懂这个问题,我们要看一下局域网用户上公网的原理,假设内网主机A(192.168.2.8)要和外网主机B(61.132.62.131) ...
- Android开发跳槽、简历和面试的那些事
年后不久,就迎来了一年一度的招聘旺季,尤其,对于互联网行业来说,近些年的3月份被视为换工作的最高峰,已经没什么可以争议的了. 至今为止,在小组Android开发招聘这块,已经面试有近30人了.最后得出 ...
- 分布式环境下rabbitmq发布与订阅端
假设rabbitmq配置了集群,且客户端连接rabbitmq-server通过lvs实现HA但一般情况下不建议做LB.在分布式系统的环境下,由于节点的非预知性,使用spring amqp模板进行配置不 ...
- Atitit.excel导出 功能解决方案 php java C#.net版总集合.doc
Atitit.excel导出 功能解决方案 php java C#.net版总集合.docx 1.1. Excel的保存格式office2003 office2007/2010格式1 1.2. 类库选 ...
- Wami Map Project – 开源的 OSM API 服务
Wami 地图项目把 OSM 数据分享给所有的人,很容易使用.他们利用 MongoDB 的潜力进行大数据管理来实现从 OSM 数据来源搜索相关的数据.它们的 API 使人们有可能检索不同格式的 POI ...
- Ideal Forms – 帮助你建立响应式 HTML5 表单
Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...
- 免费 PSD 下载： 20个精美的登录和注册表单
注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...
- js、jquery获取当前url中各个参数
首先,先把获取各参数的方式再写一遍,相信大家都耳熟能详,就写几个常用的吧. 以此网址https://i.cnblogs.com/EditPosts.aspx?opt=1为例: 1. var url=w ...