CSS中position和header和overflow和background
<!DOCTYPE html>
<!--CSS中position属性-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 50px;
background-color: black;
color: #dddddd;
position: fixed;
top:0;
right: 0;
left: 0;
}
.pg-body{
background-color: #dddddd;
height: 200px;
margin-top: 100px;
}
</style> </head>
<body> <div class="pg-header">头部 position: fixed;分层固定中页面某个位置</div>
<div class="pg-body">内容 margin-top: 100px 离顶部100像素</div> <div style="width: 40px;
height:40px;
background-color:red;
color:green;
position: fixed;
bottom:100px;
right: 100px;
">
-返回顶部
</div>
<div style="position: relative;width: 500px;height: 500px;border: 5px solid red;margin:0 auto;"> 父级position: relative配合子级position: absolute使用才有效果 <div style="position: absolute;left: 100px;bottom: 200px;width: 150px;height: 20px;background-color:gold; ">
以父级的位置做为起始点来偏移位置left加bottom，-------块的大小;width加height，---------块的颜色background-color
</div>
</div> <br/>
<br/> <div style="position: relative;width: 500px;height: 500px;border: 5px solid red;margin:0 auto;">
<div style="position: absolute;left: 0px;bottom: 0px;width: 50px;height: 50px;background-color:green; "></div>
</div> </body>
</html>
CSS中position属性
<!DOCTYPE html>
<!--CSS中position多层背景-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style=" <!--display: none;-->
z-index:10;
position: fixed;
top:50%;
left: 50%;
margin-left:-250px;
margin-top:-250px;
background-color: white;
height:400px;
width: 500px;
">
<!--注释--> display: none;让标签消失 z-index层级的顺序
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div> <div style="<!--display: none;-->
z-index:9;
position: fixed;
background-color: white;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5;
">
<!--注释--> display: none;让标签消失 opacity: 0.5控制透明度
</div>
<div style="height: 5000px;
background-color: green;
">
内容显示层
</div> </body>
</html>
CSS中position多层背景
<!DOCTYPE html>
<!--CSS中header应用-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
} /*hover当鼠标移动到当前标签时，以下CSS属性才生效*/
.pg-header .menu:hover{
background-color: #E80203;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">
<div class="w"> 其他内容 </div>
</div>
</body>
</html>
CSS中header应用
1.jpg
<!DOCTYPE html>
<!--CSS中overflow应用-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px;overflow: auto;">
overflow: auto超过设定就出滚动条
<img src="1.jpg">
</div>
<br/>
<div style="height: 200px;width: 300px;overflow: hidden;">
overflow: hidden超过设定就不显示，隐藏
<img src="1.jpg">
</div>
</body>
</html>
CSS中overflow应用
2.gif
3.png 
4.jpg 
<!DOCTYPE html>
<!--CSS在background的应用1-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-image: url(2.gif);
height:700px;">
堆叠图片 平铺效果
</div> <br/>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<br/> <div style="background-image: url(2.gif);
background-repeat:repeat-x;
height:700px;">
堆叠图片 X横向平铺效果
</div> <br/>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<div>--------------------分割-------------------</div>
<br/> <div style="background-image: url(2.gif);
background-repeat:repeat-y;
height:700px;">
堆叠图片 Y竖向平铺效果
</div> </body>
</html>
CSS在background的应用1
<!DOCTYPE html>
<!--CSS在background的应用2-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 100px;border: 2px solid green;"> 根据位置移动来显示 </div>
<div style="background-image:url(3.png);
background-repeat:no-repeat;
height: 18px;
width: 18px;
border: 2px solid red;
background-position-x: 0px;
background-position-y: 0px;
">
</div>
<br/>
<div style="height: 100px;border: 2px solid green;"> 根据位置移动来显示 </div>
<div style="background-image:url(3.png);
background-repeat:no-repeat;
height: 18px;
width: 18px;
border: 2px solid red;
background-position-x: 0px;
background-position-y: -15px;
">
</div>
<br/>
<div style="height: 100px;border: 2px solid green;"> 简单的写法 </div>
<div style="background: url(3.png) 1px -35px no-repeat;
height: 18px;
width: 18px;
border: 2px solid red;
"> </div>
<br/>
<div style="height: 100px;border: 2px solid green;"> 全图显示 </div>
<div style="background-image: url(3.png);
height: 178px;
width: 18px;
border: 2px solid red;
"> </div> </div> </body>
</html>
CSS在background的应用2
<!DOCTYPE html>
<!--CSS在background实例-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div style="height: 50px;width: 400px;position: relative;">
<input type="text" style="height: 50px;width: 360px;padding-right: 40px">
<span style="position: absolute;
right: 5px;
top: 5px;
background-image: url(4.jpg);
height: 40px;
width: 40px;
display: inline-block;
">
</span>
</div> </body>
</html>
CSS在background实例
CSS中position和header和overflow和background的更多相关文章
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS中"position:relative"属性与文档流的关系
前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- css中position:fixed实现div居中
上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...
- CSS中position的4种定位详解
大家都知道,css中的position有4种取值,分别是static.fixed.relative.absolute. 详细解释: static:相当于没有定位,元素会出现在正常的文档流中. fixe ...
- css中position与z-index
position属性 在css中,position属性用来控制元素的位置信息,其取值共有4种,即static.relative.absolute.fixed. 静态定位(static) 若没有指定po ...
- CSS中position:fixed的用法
我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...
随机推荐
- 1 环境搭建_及参考资料介绍_ASM驱动开发疑难解决
1 环境搭建 > 这里和 周壑老师不同:大家觉得哪中适合当前的物理机,就配置那种. 如下: win7 32 位: vs 2010; visualDDk 驱动项目插件: V A --- 代码高亮 ...
- 【笔记篇】C#笔记3
笔记目录:http://blog.csdn.net/enzymii/article/details/77169928 C#的接口有点意思,我们说过可以用来多重继承.. using System; na ...
- 关于电容与Q值
1, 电容模型 电容阻抗可以表示为: 可算得自谐振频率点为: 在该点,容抗与感抗差为0,电容表现出纯电阻性. 2, 阻抗曲线 自谐点是区分电容器呈容性还是感性的分界点.从阻抗曲线看,在自谐点附近阻抗较 ...
- 「题解」：[线性代数]：relays 奶牛接力跑
问题: relays 奶牛接力跑 时间限制: 1 Sec 内存限制: 256 MB 题面 题目描述 FJ的N(2 <= N <= 1,000,000)头奶牛选择了接力跑作为她们的日常锻炼 ...
- 笔试之const问题
1 . ; int *j=(int *)&i; *j=; cout<<i<<*j<<endl; 答案i为0,*j为1. 2. char * const p= ...
- <Python基础>类和对象(初级)---烧开水的例子
''' 类:模板(模子) 类的名称:类名(人) 类的属性:一组数据(年龄,身高) 类的方法:进行操作的方法(走,跑,吃,喝) 对象:实体 类的抽象:把现实中的物品用类去表示 ''' #创建一个类 cl ...
- mariadb ROW格式复制下从库结构变更引发1677错误
stop slave;set global slave_type_conversions=ALL_LOSSY;start slave; 详细度娘slave_type_conversions的参数说明
- 多线程同步锁和死锁以及synchronized与static synchronized 的区别
线程:线程是进程中的一个执行单元,负责当前进程中程序的执行,一个进程中至少有一个线程.一个进程中是可以有多个线程的,这个应用程序也可以称之为多线程程序.简而言之:一个程序运行后至少有一个进程,一个进程 ...
- Linux-c给线程取名字
https://blog.csdn.net/jasonchen_gbd/article/details/51308638 #define wtm_set_thread_name(n) ({ \ ] = ...
- 微信小程序注册使用流程
新开发微信小程序使用流程: 平时使用小程序较多,但是具体注册流程简单记录下: 第一步:通过邮箱注册 第二步:在邮箱进行激活 注册后,在邮箱会收到激活信息提示.点击激活地址进行激活. 第三步:信息登记 ...