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却没 ...
随机推荐
- 在 /proc 里实现文件
所有使用 /proc 的模块应当包含 <linux/proc_fs.h> 来定义正确的函数. 要创建一个只读 /proc 文件, 你的驱动必须实现一个函数来在文件被读时产生数据. 当 某个 ...
- Luogu P2822 组合数问题(前缀和)
P2822 组合数问题 题意 题目描述 组合数\(C_n^m\)表示的是从\(n\)个物品中选出\(m\)个物品的方案数.举个例子,从\((1,2,3)\)三个物品中选择两个物品可以有\((1,2), ...
- leetcode-213-打家劫舍二
题目描述: 方法一: class Solution(object): def rob(self, nums): """ :type nums: List[int] :rt ...
- Ionic3 demo TallyBook 实例3
1.准备应用相关组件 echarts--直接 npm install 安装即可 2.home.ts import { Component,ViewChild,ElementRef } from '@a ...
- centos7.2安装apache比较简单，直接上代码
centos7.2安装apache比较简单,直接上代码 1.安装 yum install httpd 2.启动apache systemctl start httpd.service 3. ...
- .git文件夹太大问题及解决方法
最近我们做了自动化构建, 发现文件.git文件夹越来越大, 求后端小伙伴帮忙, 小伙伴指点了一下说周末弄了一下, 忘记命令的.大致的意思就是找到git 提交了哪些大文件. 然后重构git, 先分享给小 ...
- c语言学习笔记 - 指针和字符串
前面学习了字符串是一种字符数组,又知道了指针变量和数组的关系,这里来看一下指针和字符串的关系. #include <stdio.h> int main(void){ char str = ...
- （转）第02节：在Canvas上画简单的图形
我们现在已经可以在HTML中使用Fabric.js库了,那这节我们就详细的学习一下如何在canvas上画出简单的图形. 在画东西之前我们需要了解画任何东西的基本三个步骤: 声明画布(canvas),用 ...
- CheckBox自定义样式
效果: xmal代码: <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}"> & ...
- css3 做border = 0.5px的细线
参考: https://blog.csdn.net/Tyro_java/article/details/52013531