html格式和保存方式,HTML格式与布局

一、position：fixed

锁定位置(相对于浏览器的位置)，例如有些网站的右下角的弹出窗口。

123

#a

{

border:5px soild blue;...........边线为5像素

width:100px;                     宽度与高度为5像素

height:100px;

margin:10px;

background-color:#0F3;

left:30px;

bottom:20px;      距离左边30像素，距离下边20像素

position:fixed;

}

a

二、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的除去一行的位置的左上或右上显示。

overflow：hidden；    //超出部分隐藏；scroll，显示出滚动条；

设置超链接的样式示例：

附：cursor：pointer    鼠标指到上面时的形状

&copy                  版权符号©

半透明效果：

透明区域

在样式表中的代码为：

.box

{

opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)

}

absolute:当使用时，表示在文档流中没有实际存在位置(浮动)，在不设置任何方位值时，只能按兵不动，当设置了方位值之后，会紧接着去寻找距离最近的能够将它包含住的父级元素，然后进行定位。

relative:当使用时，表示在文档中确实占有一定的空间，在不设置任何方位值时，会出现在应该出现的位置(空间)，当设置了方位值之后，会在应该出现的位置上进行上、下、左、右的形状位移，而实际上还是占有应该占有的位置(空间)

9月11日上午HTML有序列表、无序列表、网页的格式和布局

样式表 六.列表方块 1.有序列表变无序列表

1. 张店
2. 桓台
3. 淄川

   一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float

   很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

   css样式表 格式与布局

   1 样式表  内联样式表  内嵌样式表  外部样式表 2 选择器 标签选择器

   样式表分类: 1.内联样式表, 和html联合显示,例:

   内联样式表

   2.内嵌样式表 作为一个独 ...

   css样式，边界和边框，格式和布局

   1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...

   关于CSS格式与布局中的基础知识的简单操作

   90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...

   HTML基础(五)——-css样式表——样式属性——格式与布局

   一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute     绝对位置: 1.外层没有position:a ...

   从图片中提取html格式的布局

   制作界面的自动化 意义:对于程序设计人员来说,比较痛苦的是制作界面.从设计人员发送的稿件(通常为jpg格式),到完成html的布局,需要将图像转化为div标记,自动化这一过程十分有意义 1.设计一个工 ...

   HTML--CSS样式表--格式与布局

   一:position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角弹窗 例如:

   网页标题

   随机推荐

   [python]爬虫学习(二)

   ---恢复内容开始--- #python2 import urllib2 #python3 import urllib.request html=urllib.request.urlopen('htt ...

   获取Windows下某进程监听的TCP/UDP端口

   1.在Windows下用CMD netstat命令可以获得当前进程监听端口号的信息,如netstat -ano可以看到IP.port.状态和监听的PID. 那么可以执行CMD这个进程得到监听的端口号信 ...

   BizTalk动手实验(十五)AS2消息安全传输

   1 课程简介 本课程将配置AS2相关的安全传输配置,学员可以通过本课程熟悉相关的安全配置. 2 准备工作 为了模拟实际的B2B交互过程,本实验需要2台BizTalk Server 2010虚拟机(两两 ...

   iOS逆向分析app

   适合有一定的逆向编程基础的人看. 背景:自动抢红包的脚本工具:cyscript,reveal,class-dump,越狱的pod等. 这里先上一张reveal的分析图: 小结:获取到了真个软件的整体结 ...

   页面头部title、description、keywords标签的优化

   页面头部优化

   中间的区域中间的区域,我们称为网页的头部.在网页的头部中,通常存放一些介绍页面内容的信息,例如页面标题.描述及关键字等等.在头部优化中,除 ...

   js/bat批处理调用谷歌浏览器chrome批量打开网页测试web性能

   批处理批量打开网页 其实用java就可以搞定,但是这么一个轻巧的测试,js或者bat批处理去一次性打开几百个网页测试一下页面没必要上java 两者的区别,js的话,只能打开多个浏览器实例,不方便查看效 ...

   git简单使用教程

   git 的基本使用指令 我们先来简单熟悉一下 git 的简单使用的指令, 作为最基本的 git 指令一定要熟悉 12345678910111213141516171819202122232425262 ...

   DAY14(PYTHONS)生成器进阶

   def average(): sum = 0 count = 0 avg = 0 while True: #循环 num = yield avg #遇到yield就停止,防止一开始除数为0导致崩溃 s ...

   listView从底部回到顶部代码实现

   可用如下方法: 1.平滑的回到顶部,但是会划过中间的每一页 mListView.getRefreshableView().smoothScrollToPosition(0); 2.直接跳到顶部 if ...