CSS样式3
1.positon：fixed
可以实现网页浏览器上的返回顶部的功能。
positon:fixed 表示将当前div块固定在页面的某一个位置（默认为左上角）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin:0 auto;">
<div onclick='GoTop();' style="height:50px;width:50px;background-color: black;color:white;
position:fixed;
bottom:20px;
right:20px;
">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd;">
</div>
<script>
function GoTop(){
document.body.scrollTop=0;
}
</script> </body>
</html>
2.positon实现 网页头部在网页上面固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height:48px;
background-color: black;
color:#dddddd;
positon:fixed;
top:0;
left:0;
right:0; }
.pg-body{
height:500px;
backgound-color:blue;
margin-top:50px;
}
</style>
</head>
<body>
<div class="pg-header">头部内容</div>
<div class="pg-body">内容部分</div> </body>
</html>
3.position:absolute 绝对定位，一锤子买卖；自身的应用场景不多；
当其与relative+absolute一起结合着用，应用场景就会增加；
如下：
在一个div块中，将内部的div块固定在这个div块的某个位置。
<div style="width:500px;height:200px;background-color:black;position:relative;margin:0 auto;">
<div style="position:absolute;left:0;bottom:0;width:50px;height:50px;background-color: white;border:1px;"></div>
</div>
拓展：
<div style="width:500px;height:200px;background-color:black;position:relative;margin:0 auto;">
<div style="position:absolute;left:0;bottom:0;width:50px;height:50px;background-color: white;border:1px;line-height: 50px;text-align:center;">笑脸</div>
<div style="position:absolute;left:80px;bottom:0;width:50px;height:50px;background-color: white;border:1px;line-height: 50px;text-align:center;">哭脸</div>
</div>
解析：
在外层div中设置positon:relative，该div标签是不会发生任何变化的；但是内部的div里面的position:absolute可以指定放在父类标签的固定位置。
实例：用户登陆窗口的输入框右侧放置图片。
<!DOCTYPE html>
<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;top:8px;right:0;
background-image: url(userpic.jpg);
height:40px;width:40px;
display:inline-block"></span>
</div>
</body>
</html>
4.opacity透明度，z-index层级顺序；
实例：设计三层的页面，最上层为输入层，第二层为遮罩层（透明度）,第三层为正常页面；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="z-index:10;
position:fixed;
top:50%;
left:50%;
background-color: white;
width:50px;height:100px;
"> <form>
用户名：<input type="text" name="用户名" value="admin"/>
密码：<input type="password" name="密码" value="admin"/>
<input type="submit" name="提交"/>
</form>
</div> <div style="z-index:9;
position:fixed;
bottom:0;
top:0;
left:0;
right:0;
opacity:0.5;
background-color: #6e6568;
"><br/>
<br/>遮罩层</div>
<div style="background-color: #c81623;height:5000px;">正文内容</div> </body>
</html>
解析：z-index属性用来设置div的层级顺序；
opacity属性用来设置透明度，0-1（完全透明-完全不透明）
5.overflow
问题：当img标签内的图片大小超过外层div时，会将div设置的边界冲开，为了避免这个问题可以使用overflow属性设置。（或设置img大小）
overflow:hidden; 如果图片大小超过外层div设置，则隐藏大于部分，仅显示div设置的大小
overflow:auto; 如果图片大小超过外层div设置，则自动出线滚动条可以查看整个图片内容；
<div style="height:220px;width:300px;overflow:hidden">
<img src="1.jpg"/>
</div>
6.hover
当鼠标移动到当前标签上时，指定的css属性才会生效；
.pg-header .menu:hover{
background-color: red;
}
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position:fixed;
right:0;
top:0;
left: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;
}
.pg-header .menu:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">logo</a>
<a class="all">全部</a>
<a class="menu">首页</a>
<a class="news">新闻</a>
<a class="regarding">关于</a> </div> </div>
<div class="pg-body">
<div class="w">content</div>
</div>
</body>
</html>
7.background-image background-repeat
background-image:url('grey.png') 指定背景图片
background-repeat: no-repeat 指定当背景图片小于div大小时，是否自动堆叠填充；
no-repeat 不堆叠；
repeat-X 水平方向堆叠；
repeat-Y 竖直方向堆叠；
repeat 水平和竖直方向自动堆叠；
space
inherit
round
例:<div style="background-image:url('grey.png');height:5000px; width:250px;background-repeat: no-repeat"></div>
应用场景1：图片堆叠：指定的背景图片非常小，要堆满整个大块div，使用这种方法能够实现。
应用场景2：dig.chouti.com的点赞爱心小图片的获取。
<div style="background-image:url('chouti.png');
height:20px; width:20px;
background-repeat:no-repeat;
background-position-x:0px;
background-position-y:-20px;
"></div>
简要写法：
<div style="background:url(chouti.png) no-repeat 0 0;
width:20px;height:20px;
"></div>
作用：网页上加载这种小logo图示，使用一张图，用backgound-position和div的大小设置，调整在div中显示的图片的指定位置和内容，实现一次请求调用图片资源就可以实现相关的图示的加载。几乎所有的网站都用这种方式实现该功能。
CSS样式3的更多相关文章
- css样式让input垂直居中
css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...
- 深度理解CSS样式表，内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js设置css样式.
在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
- 脚本工具（获取某个文件夹下的所有图片属性批量生成css样式）
问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...
- jQuery所支持的css样式
jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...
- Yii2 assets注册的css样式文件没有加载
准备引入layui.css文件的,在LayuiAssets类中已经配置了资源属性 <?php namespace frontend\assets; use yii\web\AssetBundle ...
- 获取元素计算后的css样式封装
获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- CSS样式之优先级
说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分: 1.从CSS代码放置的位置看权重优先级: 内联样式 > 内部嵌入样式 >外联样式 2.从样式选择器 ...
随机推荐
- 33 File 文件及目录操作
/* * File:文件和目录路径名的抽象表示形式,File 类的实例是不可变的 * * 构造方法: * File(String pathname) 将指定的路径名转换成一个File对象 * File ...
- mysql 多个属性排序查询
查询 排序(order by) 语法:order by 字段 asc/desc asc 顺序,正序.数值 :递增,字母:自然顺序(a-z) desc 倒序 反序 数值:递减, 字母:自然反序 查询的宗 ...
- SIM900A 通过RS232串口进行短信的发送。
一.基本数据 1.SIM900A模块支持RS232串口和LVTTL串口.保留了232口,在学习或者开发时可以监听51低端单片机和模块指令执行情况,能更快的找出原因,节省开发和学习的时间. 2.此模块供 ...
- 数据结构和算法(Golang实现)(9)基础知识-算法复杂度及渐进符号
算法复杂度及渐进符号 一.算法复杂度 首先每个程序运行过程中,都要占用一定的计算机资源,比如内存,磁盘等,这些是空间,计算过程中需要判断,循环执行某些逻辑,周而反复,这些是时间. 那么一个算法有多好, ...
- [总结]最近公共祖先(倍增求LCA)
目录 一.定义 二.LCA的实现流程 1. 预处理 2. 计算LCA 三.例题 例1:P3379 [模板]最近公共祖先(LCA) 四.树上差分 1. 边差分 2. 点差分 3. 例题 一.定义 给定一 ...
- SVG 案例：动态去创建分支节点，当鼠标经过某个节点时，分支线会高亮
css: <style> #div1{ width:780px; height:400px; background:#fff; margin:20px auto; overflow:hid ...
- 用Python画的，5 种非传统的可视化技术，超炫酷的动态图
数据可以帮助我们描述这个世界.阐释自己的想法和展示自己的成果,但如果只有单调乏味的文本和数字,我们却往往能难抓住观众的眼球.而很多时候,一张漂亮的可视化图表就足以胜过千言万语.本文将介绍 5 种基于 ...
- L10机器
机器翻译和数据集 机器翻译(MT):将一段文本从一种语言自动翻译为另一种语言,用神经网络解决这个问题通常称为神经机器翻译(NMT). 主要特征:输出是单词序列而不是单个单词. 输出序列的长度可能与源序 ...
- 装机摸鱼日志--ubuntu16.04安装网易云音乐客户端
之前装的网易云音乐不指定啥原因不能用了,所以打算重新装一个,但是进官网只有deepin15和ubuntu18.04版本的安装包.然后我装了一下18.04的安装包,但是没有成功.甚至因为更换glibc差 ...
- OkHttp 优雅封装 OkHttps 之 回调线程魔变
第一篇:OkHttp 优雅封装 HttpUtils 之 气海雪山初探 第二篇:OkHttp 优雅封装 HttpUtils 之 上传下载解密 简介 HttpUtils 从 v2.3.0 之后便重命名了, ...