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却没 ...
随机推荐
- iOS开发系列-线程状态
概述 线程从创建到销毁中间存在很多种状态. 线程的状态 通过NSThread创建一条线程,开发者需要负责线程的创建和执行,线程的销毁由系统决定.创建一个继承NSThread的FMThread类,重写d ...
- css3 随记
1 让子元素对其的方式 box-pack 2 -webkit-text-size-adjust 解决字体大小失效问题http://www.frontopen.com/273.html 3 disp ...
- 【JZOJ3236】矮人排队
description 在七山七海之外的一个小村庄,白雪公主与N个矮人住在一起,所有时间都花在吃和玩League of Legend游戏.白雪公主决心终结这样的生活,所以为他们举办了体育课. 在每节课 ...
- js '' ""的嵌套使用
1.我需要拼接一个字符串,但是其中 单引号内包含了双引号,双引号内又包含了单引号变量 这时我们想到了可以用到HTML特殊转义字符 2.如下拼接 return '<input type=" ...
- ps命令详解-转
名称:ps使用权限:所有使用者使用方式:ps [options] [--help]说明:显示瞬间行程 (process) 的动态参数:ps的参数非常多, 在此仅列出几个常用的参数并大略介绍含义-A ...
- SDOI2019 R2退役记
还是退役了呀 Day -1 早上loli发了套题结果啥都不会 之后胡爷爷就秒了道数据结构 不过也没什么人做,于是全机房都在愉快的划水 下午来机房打了场luogu的\(rated\)赛,还是啥都不会 之 ...
- 架构发展史Spring Cloud
转自:https://www.iteye.com/news/32734 Spring Cloud作为一套微服务治理的框架,几乎考虑到了微服务治理的方方面面,之前也写过一些关于Spring Cloud文 ...
- [转][Prism]Composite Application Guidance for WPF(6)——服务
[Prism]Composite Application Guidance for WPF(6)——服务 周银辉 在Ioc和DI中,最熟悉的 ...
- html常用标签详解2-图片标签详解
<img /> 1.图片标签的属性 图片标签属于行内块元素,它自身的属性有一下几个,听我娓娓道来: src:图片资源的路径(resourse),可以使绝对路径,也可以是相对路径 绝对路径: ...
- ROS 日志消息(C++)
1.日志级别 日志消息分为五个不同的严重级别宏,与Android的Log定义的严重级别类似,如下基础宏: ROS_DEBUG_STREAM.ROS_INFO_STREAM.ROS_WARN_STREA ...