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却没 ...
随机推荐
- CAS机制详解
目录 1. 定义 2. 实现原理 3. 无版本号CAS实战说明 4. CAS机制在Java中的应用 5. CAS的缺点 1. CPU开销过大 2. 不能保证代码块的原子性 3. ABA问题 6. JA ...
- 踩坑记-java mysql 新增获取主键、DIY主键、UUID
java mysql 获取主键.DIY主键.UUID,简单粗暴,代码如下: mapper.xml insert id="add" parameterType="com.x ...
- web.xml中多个Servlet执行顺序的问题！
1.两个servlet或者两个servlet-mapping,其中的servlet-name名称不能存在相同. 2.所有的servlet-mapping标签下,url-pattern中包含的文本不能相 ...
- 廖雪峰Java11多线程编程-3高级concurrent包-8CompletableFuture
使用Future可以获得异步执行结果 Future<String> future = executor.submit(task); String result = future.get() ...
- php链表笔记：单链表反转
<?php /** * Created by PhpStorm. * User: huizhou * Date: 2018/12/1 * Time: 11:41 */ /** * 1.链表的反转 ...
- 利用R语言制作出漂亮的交互数据可视化
利用R语言制作出漂亮的交互数据可视化 利用R语言也可以制作出漂亮的交互数据可视化,下面和大家分享一些常用的交互可视化的R包. rCharts包 说起R语言的交互包,第一个想到的应该就是rCharts包 ...
- PAT甲级——A1077 Kuchiguse
The Japanese language is notorious for its sentence ending particles. Personal preference of such pa ...
- 02_springmvc处理器映射器和适配器（补充）
一.非注解的处理器映射器 HandlerMapping 负责根据request请求找到对应的Handler处理器及Interceptor拦截器,将它们封装在HandlerExecutionChain ...
- Mac下使用Pecl安装PHP的Swoole扩展实践
一.背景 前段时间把Mac系统重装了,PHP的一些扩展都没了,昨天需要调试一个swoole开发的项目,发现命令行中的PHP是系统自带的,如果安装swoole扩展很不方便:需要自己手动去下载swoole ...
- mysql表时间戳字段设置
创建时间 修改时间