1.position:（层级属性，多层应用） ***fiexd:固定在页面的某个位置（有top,bottom,left,right属性） 如：（悬浮在浏览器的标签） <div style="50px;height:50px;background-color:black;color:red; position:fixed;bottom:20px;right:20px">返回顶部</div> 如：（悬浮在浏览器顶部） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>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> margin:0 #自动取消页边距，必须放在body才有效果 ***relative+absolute: <div style="position:relative;"> <div style="position:absolute;top:0;left:0;"></div> </div> 如：（父级与子级标签的位置关系） <div style="position: relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;left:0;bottom:0; 50px;height: 50px;background-color: black;"></div> </div> <div style="position: relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;right:0;bottom:0; 50px;height: 50px;background-color: black;"></div> </div> <div style="position: relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;right:0;top:0; 50px;height: 50px;background-color: black;"></div> </div> ***多层标签 （z-index属性决定div层级关系，值越大，层级数越高，即越位于最顶层） （opacity属性的值范围是0-1，越接近0透明度越高） 示例：（下面例子的场景可以应用于弹出类似于登录窗口等的情景） （display:none 属性意味默认是不展示，等应用到按钮使其修改不为none时这两个标签会展示出来） <!DOCTYPE html> <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: -200px; background-color:white;height: 400px;500px; "> <!--margin属性使其整体的div根据位置变换--> <input type="text" /> <input type="text" /> <input type="text" /> </div> <div style="display:none;z-index:9; position: fixed;background-color: black; top:0; bottom: 0; right: 0; left: 0; opacity: 0.5; "></div> <div style="height: 5000px;background-color: green;"> asdfasdf </div> </body> </html> 2.overflow:（假设标签中的图片大小大于标签原本的宽高，那莪可以增加这个属性使其图片大小不超过标签范围） hidden值：如果超过了，就隐藏超过的部分 auto值：如果超过了，隐藏超过的部分，但带有滚动条可以查看隐藏的部分 示例：（下面例子的场景可以应用于弹出类似于登录窗口等的情景） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 200px; 300px;overflow: auto"> <img src="1.jpg"> </div> <div style="height: 200px; 300px;overflow: hidden"> <img src="1.jpg"> </div> </body> </html> 3.hover：（当鼠标移动到某位置时，其标签的样式会修改成hover定义中的样式） 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ background-color:blue; height:48px; line-height: 48px; position: fixed; /*窗口悬停*/ top:0; /*取消页边距*/ right:0; left:0; } .pg-body{ margin-top: 50px; /*pg-header标签的height是48px，下个标签起始内容如果不希望被覆盖到，其top值需要设置比它大*/ height:980px } .w{ 980px; margin: 0 auto; } .pg-header .menu{ /*此样式使得每个a标签之间有距离，但是和父级之间的上下不存在距离，f12查看*/ display: inline-block; padding: 0 10px 0 10px; /*分别是top,left,bottom,right*/ color: red; } /*当鼠标移动到当前标签上时，以下css属性才生效*/ .pg-header .menu:hover{ /*hover：使得鼠标移动到相应的位置时，显示该样式*/ background-color: white; } /*假设menu下面有多个div*/ .pg-header .menu:hover .b{ background-color:red; /*即当鼠标放到该menu标签时，整个是白色的，但是menu下class为b的标签背景为红色*/ } </style> </head> <body> <div class="pg-header"> <div class="w"> <a>LOGO</a> <a class="menu">登录</a> <a class="menu">查找</a> <a class="menu">日志</a> </div> </div> <div class="pg-body"> <div>这是下一个标签</div> </div> </body> </html> 4.background-image:（背景图） background-image:url('image/4.gif'); /*如果div大于图片，则图片会自动重复堆叠*/ background-repeat:repeat-y; /*只堆叠Y轴方向*/ background-position-x:10px; /*position属性可以选中图片中的某个部分，比如说一张图片里有很多小图标，可以根据像素大小单独选中,即所谓的抠图*/ background-position-y:10px; background-position:10px 10px; 5.小图标的引入： 下载font awesome后将整个文件夹放到相应的路径并在需要的网页制作中： 1.引入：<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" /> ---实例（输入框中添加小图标）（分层） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 35px; 400px;position: relative;"> <!--position是为了能够分层--> <input type="text" style="height: 35px; 400px;" /> <span style="position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px; 16px;display: inline-block;"></span> <!--inline-block是为了让行内标签转为块级标签，否则宽高无法应用！--> </div> </body> </html>