格式与布局(定位)

1、position:fixed锁定位置(相对于浏览器的位置)
滚动条移动时,加position:fixed的标签不动。
2、position:absolute绝对定位
2.1外层没有position:absolute(或relative);,那么div相对于浏览器定位。
2.2外层有position:absolute(或relative);,那么div相对于外层边框定位。
外层会限制内层的定位。
3、position:relative相对定位
相对于默认位置的移动。
4、分层(z-index)
Z轴方向为电脑到人的方向,可以理解为分成一摞纸,层数越高越靠上。默认值为1。
值越大显示在上面。
5、float:left,right
float:left从左边开始放标签,
float:right从右边开始放标签。
横向放不下会起一行,排列方式同上一行。
overflow:hidden; 内层超出外层时超出部分隐藏;scroll,显示出滚动条;
<div style="clear:both"></div> 截断流
6超链接样式:
<style type="text/css">
a:link /*未指向时链接的格式*/
{
color:blue;
}

a:visited /*访问后链接的格式*/
{
color:green;
}

a:hover /*设置鼠标指向链接时的形式*/
{
color:red;
}

a:active /*点击超链接时的格式*/
{
color:red;
}
</style>

cursor:pointer 鼠标指到上面时的形状。

7半透明效果
<div class="box">透明区域</div>
样式表中代码:
.box
{
opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)
}

时间: 2025-01-04 09:40:55

格式与布局(定位)的相关文章

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

很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给div定位 1.position:fixed;锁定位置(相当于浏览器窗口的位置),默认层数最高.例如有些网站的右下角弹窗. 练习:在右下角做一个弹窗,锁定位置,不随网页滚动而滚动. 步骤: 一.先做一个文字的弹窗 <head> <meta http-equiv="Content-Typ

css样式表----------样式属性(背景与前景、边界和边框、列表与方块、格式与布局)

一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url(路径); /*设置背景图片(默认为平铺.)*/ background-repeat:no-repeat/repeat-x/repeat-y;no-repeat /*不平铺 repeat-x 橫向平铺 repeat-y 纵向平铺 */ background-position:center; /*背景图片居中

css样式表:样式分类,选择器。样式属性,格式与布局

样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立的区域内嵌在网页里,必须写在head里边. <style type="text/css"> p  //格式对p起作用 {样式: } </style> 3.外部样式表 新建一个CSS文件,用来放置样式表.如果要在HTML文件中调用样式表,需要在HTML文件中点右键→

0503格式与布局

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #cs_fixed{ width: 200px; height: 200px; background-color: orange; positi

ELF格式的重定位原理分析

前面有篇文章分析了ELF格式,也只是让我们对目标文件有了一个大概的了解,并没有说明一个十分重要的问题:重定位,今天重新看了下重定位的资料,终于弄懂了重定位的过程,下面来做一个分析. 我们将使用下面两个源代码中的文件a.c和b.c展开分析: //a.c extern int shared; int main() { int a=100; swap(&a,&shared); } //b.c int shared=1; void swap(int *a,int *b) { *a^=*b^=*a^

9.11上午 列表方块 格式和布局

样式表 六.列表方块 1.有序列表变无序列表 <ol>        <li>张店</li>        <li>桓台</li>        <li>淄川</li>    </ol> 网页上显示为1. 张店     2. 桓台   3. 淄川  (竖向显示) <ol style="list-style:none">        <li>张店</li>

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

1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图片的平铺方式.no-repeat:不平铺,repeat:平铺,repeat-x:水平平铺,repeat-y:垂直平铺 4)background-position:图片位置.center,left,right,top,bottom:eg:左上:left 20px top 20px 5)backgrou

css 三种布局定位

css有三种布局定位 1.流式布局 这是默认的布局方式,也叫标准文档流.页面标签元素自左向右,自上而下排布.行内元素自左向右,块级元素自上而下. 2.浮动布局--float属性 3个属性值:left,right,none 特点:元素会左移或者右移,知道碰到容器为止 设置浮动属性的元素依然处在标准文档流中,会对相邻元素产生影响,特指紧邻后面的元素 个人怀疑,是block属性变成了inline属性,留待验证 (下班了,第三中布局明天再说)

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

一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute     绝对位置: 1.外层没有position:absolute(或relative):那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素). 2.外层有position:absolute(或relative):那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素). 示