html学习3-CSS补充
position
fixed:把标签固定在页面的某处
例子:使用fixed制作“回到顶部”按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div onclick="GoTop();" style="width:50px;height:50px;background-color:black;color:white;
position:fixed;bottom:20px;right:20px">
返回顶部
</div>
<div style="height:5000px;background-color:#dddddd">
ddfdfdadfdf
</div>
<script>
function GoTop(){
document.documentElement.scrollTop = 0;
console.log(document.documentElement.scrollTop)
}
</script>
</body>
</html>
例子2:固定页面头部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.pg-header{
height:48px;
background-color:black;
color:#dddddd;
position:fixed;
top:0;
right:0;
left:0;
}
.pg-body{
background-color:#dddddd;
height:5000px;
margin-top:50px;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>
absolute:把标签固定在页面的某处,位置是绝对固定的
relative:通常和absolute一起用
<div style='position:relative;'>
<div style='position:absolut;top:0,right:0;'></div>
<div/>
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width:50px;height:50px;
background-color:black;
position:absolute;
right:0;
bottom:0;"> </div>
<div style="margin:0 auto;position:relative;width:500px;height:200px;border:1px solid red;">
<div style="position:absolute;left:0;bottom:0;width:50px;height:50px;background-color:black;"></div>
</div>
<div style="margin:0 auto;position:relative;width:500px;height:200px;border:1px solid red;">
<div style="position:absolute;right:0;bottom:0;width:50px;height:50px;background-color:blue;"></div>
</div>
<div style="margin:0 auto;position:relative;width:500px;height:200px;border:1px solid red;">
<div style="position:absolute;right:0;top:0;width:50px;height:50px;background-color:blue;"></div>
</div> <div style="height:5000px;background-color:#dddddd;">
ddfdfdadfdf
</div>
</body>
</html>
页面分层显示:
z-index
opacity 透明 值:0-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="display:none;z-index:10;
position:fixed;background-color:white;
height:100px;
width:500px;
top:50%;
left:50%;
margin-left:-250px;margin-top:-200px; ">
<input type="text">
<input type="text">
<input type="text">
</div> <div style="display:none;z-index:9;position:fixed;background-color:#dddddd;
top:0;
bottom:0;
left:0;
right:0;
opacity:0.5;
"></div> <div style="height:5000px;background-color:green;">
ddfdfdadfdf
</div>
</body>
</html>
overflow
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height:200px;width:300px;overflow:hidden;">
<img src="IMG_1980.JPG">
</div>
<p></p>
<div style="height:200px;width:300px;overflow:auto;">
<img src="IMG_1980.JPG">
</div>
</body>
</html>
hover
鼠标移动到标签时,属性才生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
} .pg-header .menu:hover{
background-color:blue;
}
</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">g</div>
</div>
</body>
</html>
background-color 背景颜色
background-image:url('xxx.gif')#默认。div大,图片重复放
background-repeat:no-repeat/repeat-x/repeat-y 图片重复加载
background-position:10px 10px/position-x/position-y 移动背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span style="background-image:url('微笑.gif');height:20px;width:20px;display:inline-block;"></span>
<div style="height:35px;width:400px;position:relative;">
<input type="text" style="height:35px;width:370px;padding-right:30px" />
<span style="position:absolute;right:0;top:10px;background-image:url('微笑.gif');height:25px;width:25px;display:inline-block;"></span> </div> <div style="width:200px;height:200px;border:1px solid red;
background-image:url('土拨鼠.gif');
background-repeat:no-repeat;
background-position-x:10px;
background-position-y:10px"></div>
</body>
</html>
结束
html学习3-CSS补充的更多相关文章
- jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...
- CSS补充与JavaScript基础
一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 ...
- CSS补充之--页面布局、js补充,dom补充
CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...
- css补充、JavaScript、Dom
css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码例子:(通过fixed标签将某些内容固定 ...
- 如何从零开始学习DIV+CSS
CSS是样式,DIV是层.DIV+CSS是网站标准(web标准),通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别.因为XHTML网站设计标准中,不再使用表格定位技术,而是采用D ...
- 学习完毕-css
最近零零散散学习了css 最后附带链接,里面有css的全部demo.有空的可以练习练习,下一步 --->js -----http://www.w3cschool.cc/css/css-examp ...
- ReactNative学习之css样式使用
前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...
- Learning ROS for Robotics Programming Second Edition学习笔记(三) 补充 hector_slam
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- HTML+CSS补充
1. HTML+CSS补充 - 布局: <style> .w{ width:980px;margin:0 auto; } </style> <body> <d ...
- 2016.01.22 前端学习 HTML/CSS
学习HTML/CSS http://edu.51cto.com/course/course_id-3116.html 明日实践
随机推荐
- 简单易用,用Powershell劫持Windows系统快捷键
POC: $WshShell = New-Object -comObject WScript.Shell $Shortcut = $WshShell.CreateShortcut("des ...
- PVE上安装黑裙辉6.2
参考文章:https://post.smzdm.com/p/a25r8mo2/ http://www.myxzy.com/post-488.html 环境介绍 1.Proxmox VE(以下简称PVE ...
- Application Comparison Of LED Holiday Light And Traditional Incandescent Lights
Obviously, LED holiday lights are leading the competition in economical Christmas decorations, but t ...
- 关于微信小程序
1.设置了tabBar的页面,好像用navigator跳不过去.
- MATLAB一些常用的function
在MATLAB中一些常用的算数符号与我们平时所用的不同,比如:根号,平方,e,以及对数函数等. (1)平方:a^2 意思为a的平方,亦可以写成a*a: (2)根号:sqrt(x)意思为对x开根号,x既 ...
- (转载)设置虚拟机桥接模式以及解决桥接模式上不了网以及ping不通主机的问题
解决问题的博客地址:设置虚拟机桥接模式以及解决桥接模式上不了网以及ping不通主机的问题 遇见的问题: 1.VMnet8无法设置为桥接模式 结论:只要主机网络可被桥接,VMnet8根本不需要设为桥接模 ...
- Federal Learning(联邦学习)认知
本人是学生党,同时也是小菜鸡一枚,撞运气有机会能够给老师当项目助理,在这个过程中肯定会学到一些有趣的知识,就在此平台上记录一下,在知识点方面有不对的还请各位指正. What(什么是联邦学习?) 联邦学 ...
- 【转】C#路径中获取文件全路径、目录、扩展名、文件名称
C#路径中获取文件全路径.目录.扩展名.文件名称 原文链接:https://www.cnblogs.com/JiYF/p/6879139.html 常用函数 需要引用System.IO 直接可以调 ...
- Flink系统配置
Flink 系统配置 Flink 提供了多个配置参数,用于调整Flink的行为与性能,所有参数均在flink-config.yaml 文件中.下面我们介绍一下几个主要配置. Java and Clas ...
- DOM深度优先遍历算法
通过深度优先遍历算法,可以依次获取每个后代节点的对象. 顺序:有子元素先获取子元素,再获取兄弟元素 主要有2步骤: //1.创建节点迭代器对象(parent是要遍历的节点) var iterator ...