CSS补充以及后台页面布局
CSS补充
position:
fixed ===> 固定在页面的某个位置
top: 0 离上下左右还有多少
left: 0
right: 20px
bottom: 20px
absolute 单独的absolute只会固定在某个位置上，如果滚动滑轮它也会移动。应用场景不多
relative 单独的relative并没有太大的意义
relative + absolute 绝对位置+相对位置，相结合使用的场景较多
opacity: 0.8 透明度
z-index:9 层级的顺序
overflow：比如当div中有张图片比较大，超过定义的高度和宽度。此时的div中定义的高度和宽度将失效，怎么办
hidden 超出的部分将被隐藏
auto 出现滚动条，可以通过滚动条完全显示出来
hover： 当鼠标移动到此处时，将会生效的属性
background-image: url('image/4.git'); # 默认，div大，图片重复访
background-repeat: repeat-y; 纵轴重复
no-repeat 不重复
background-position-x:
background-position-y:
background-position: 10px 10px;代表x轴和y轴 # 一定要理解'抠洞原理'，即取一张图片其中的一部分
针对以上还有一个简化的写法：
background: url("image/4.jpg") -20px -30px no-repeat
下面看几个例子
1，返回顶部，重点是position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onclick="GoTop();" style="background-color: black;color: white;width: 50px;height: 50px;
position: fixed;right: 0;bottom: 20px ">
返回顶部
</div>
<div style="height: 2000px;background-color: #bc8e66">正文</div>
<script>
function GoTop() {
document.body.scrollTop=0;
}
</script>
</body>
</html>
# 如果在mac 上 上述代码可能无效，需要改正 。document.documentElement.scrollTop=0
2，悬浮菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 50px;
background-color: black;
color: white;
position: fixed;
top: 0;
right: 0;
left: 0;
/*width: 100%;*/
}
.pg-body{
height: 3000px;
background-color: #dddddd;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>
# 注意事项：
1,设置完postion之后，此时的悬浮标签并没有占一行。此时需要让左右距离等于0或者宽度等于100%
2，此时内容会被悬浮标签所有覆盖掉，因此要把“内容”的部分往下移动，需要设置margin-top
3：postion之relative和absolute进行相结合，进行定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="position: relative;width: 300px;height: 300px;border: 1px solid black;margin:0 auto"> <div style="position: absolute;right: 0; bottom: 0; height: 50px;width: 50px;background-color: crimson"> </div> </div> </body> </html>
4，三层会话框的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="z-index:10; width: 500px;height: 400px; background-color: white; top: 50%; left: 50%; position: fixed; margin-left: -250px; margin-top: -200px;; "> <input type="text" name="student"> <input type="submit" value="提交"> 第三层 </div> <div style="z-index:9; background-color: black; position: fixed; top:0; left: 0; right: 0; bottom:0; opacity: 0.8; "> 第二层 </div> <div style="height: 5000px;background-color: aqua;"> 第一层 </div> </body> </html>
注意事项：
1，position中 opacity(透明度),z-index(层级优先级)的使用
2，如何让第三层白色对话框位于屏幕的中间部位。（百分比的使用以及左右移动）
# 细想一下：为什么第三层 top: 50% left:50%,之后还要左右移动呢？
因为 左边50%和上面的50%，是以第三层左上角哪个点来判断的。第三层是长方形，应该以几何中心来判断，所以要上移50%＊自身高度，左移50%＊自身宽度
3，如果以后让用户点击某个按钮时，让三层会话框来回切换。需要用到display:none就可以，后面js的时候可以实现这个功能。
5，当内层定义的图片超出外层定义的宽高，出现滚动条或者隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 300px;height: 300px;overflow: hidden"> #超出的部分将被隐藏 <img src="苹果.jpg"/> </div> <div style="width: 300px;height: 300px;overflow: auto"> # 出现滚动条，可以通过滚动条完全显示出来 <img src="苹果.jpg"/> </div> </body> </html>
6， ：hover的应用
<!DOCTYPE html>
<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: 1014px;
margin: 0 auto;
}
.logo{
display: inline-block;
height: 48px;
padding: 0 10px 0 10px;
line-height: 48px;
}
.pg-header .menu{
color: white;
display: inline-block;
height: 48px;
padding: 0 10px 0 10px
/*上右下左*/
}
/*当鼠标移动到当前标签上时，以下CSS属性才生效*/
.pg-header .menu:hover{
background-color: #2568aa;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo" href="9,hover应用.html">
<img src="抽屉logo.png"/>
</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">图片</a>
<a class="menu">挨踢1024</a>
<a class="menu">你问我答</a>
</div>
</div>
<div class="pg-body">
特朗普你好
</div>
</body>
</html>
7，抠洞原理（如何在一张有很多小图标的图片上选中一个）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style=" background-image: url(pwd-icons-new.png); background-position-x: 0; background-position-y: -100px; height: 37px;width: 39px"> </div> <div style=" background-image: url(pwd-icons-new.png); background-position-x: -48px; background-position-y: -100px; height: 37px;width: 39px"> </div> 简化的写法 <div style=" background: url(pwd-icons-new.png) -48px -100px; height: 37px;width: 39px"> </div> </body> </html>
8，实现登录时用户名和密码上的小图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 400px;height: 35px; position: relative;line-height: 35px;margin: 0 auto"> <input type="text" value="用户名" style="height: 35px;width: 350px;padding-right: 39px"/> <span style="position: absolute;right: 8px;top: 3px;bottom: 0; background: url(pwd-icons-new.png) 0 -100px;height: 35px;width: 35px;display:inline-block;"> </span> </div> <div style="width: 400px;height: 35px; position: relative;line-height: 35px;margin: 0 auto"> <input type="password" style="height: 35px;width: 350px;padding-right: 39px"/> <span style="position: absolute;right: 8px;top: 3px;bottom: 0; background: url(pwd-icons-new.png) 0 -100px;height: 35px;width: 35px;display:inline-block;"> </span> </div> </body> </html>
注意事项：
这个例子用到了好几个知识点：position,background-image,挖洞原理(以上的两个小图标都是通过"挖洞"原理来实现的)，display:inline-block
后台页面布局
posttion： fixed ----永远固定在窗口某个位置 relative ----单独使用无意义 absolute ----第一次按照窗口进行定位在指定位置，当拖动滚轮时不在。 1, 上面不动，左边不动，右边随滚动条的滚动而滚动。（用的比较少）fixed 2, 左侧、上侧、右侧菜单跟随滚动条的滚动而滚动 absolute 3, 左侧以及上侧不动，右侧随滚动条的滚动而滚动 absolute overflow:auto（重点掌握） 第三种只需在2的基础上，在右侧CSS中加入overflow：auto即可实现两种布局。 原因分析： 第一次定位之后，整体页面并没有往下移动。因为在右侧中接入overflow:auto，相当于在右侧中接入滚动条，只对右侧生效，当右侧页面不下时就开始出现滚动条。其他的都不变还是固定在哪里。 注意：右侧的左右滚动条的问题，可以当右侧页面小于多少某个宽度让其出现，从而防止页面凌乱。只需要在右侧CSS加入 min-width:800px
下面我们用例子看一下是那种布局方式：
第一种布局： 上面不动，左边不动，右边随滚动条的滚动而滚动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.body{
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
background: blueviolet;
height: 48px;
color: #fff;
}
.pg-content .menu{
width: 200px;
background-color: #66bc71;
position: fixed;
top: 48px;
left: 0;
bottom: 0;
}
.pg-content .content{
background-color: #bc8e66;
position: fixed;
left: 200px;
top: 48px;;
bottom: 0;
right: 0;
overflow:auto;
}
</style>
</head>
<body class="body">
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">
<div>tom1</div>
</div>
<div class="content right">
<div>hello world</div>
</div>
</div>
</body>
</html>
用的比较少们主要用fixed，有侧用overflow：auto
第二种布局：左侧、上侧、右侧菜单跟随滚动条的滚动而滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.body{
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
background: blueviolet;
height: 48px;
color: #fff;
}
.pg-content .menu{
position: absolute;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background: fuchsia;
}
.pg-content .content{
position: absolute;
top: 48px;
left: 200px;
right: 0;
bottom:0;
}
</style>
</head>
<body class="body">
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">
<div>tom</div>
</div>
<div class="content right">
<div style="background: green">
<div>hello world</div>
</div>
</div>
</div>
</body>
</html>
这种布局主要使用absolute的方式进行布局的。
第三种布局：左侧以及上侧不动，右侧随滚动条的滚动而滚动 （重点掌握）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="Font-Awesome-master/Font-Awesome-master/css/font-awesome.min.css"/>
<style>
.body{
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
background: #2459a2;
height: 48px;
color: #fff;
}
.pg-header .logo{
width: 200px;
background: darkseagreen;
height: 48px;
line-height: 48px;
text-align: center;
}
.pg-header .user{
width: 250px;
height: 48px;
line-height: 48px;
background: #2459a2;
}
.pg-header .user .a img{
width:45px;
height: 45px;
border-radius: 50%
/*<!--图片是圆形的，也可以设置数值-->*/
}
.pg-header .user .b{
z-index: 20;
width: 250px;
position: absolute;
top:48px;
right: 0;
background: #fff;
color: #000000;
display: none;
}
.pg-header .user .icons{
padding: 0 15px;
}
.pg-header .user .icons:hover{
background: blue;
}
.pg-header .user .number{
display: inline-block;
padding: 1px 5px;
line-height: 1;
background: crimson;
border-radius: 50%;
font-size: 10px;
}
.pg-header .user:hover .b{
display: block;
}
/*这种方式可以让隐藏class='b'的内容显示出来*/
.pg-header .user .b a{
display: block;
}
.pg-header .user:hover{
background: palevioletred;
}
.pg-content .menu{
position: absolute;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background: paleturquoise;
}
.pg-content .content{
position: absolute;
top: 48px;
left: 200px;
right: 0;
bottom:0;
min-width: 800px;
overflow: auto;
z-index: 9;
}
</style>
</head>
<body class="body">
<div class="pg-header">
<div class="logo left">
小熊微店
</div>
<div class="user right">
<div class="left icons">
<i class="fa fa-bell" aria-hidden="true"></i>
</div>
<div class="left icons">
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<span class="number">
6
</span>
</div>
<a href="15,后台页面布局3---标准后台页面.html" style="display: block;" class="a left">
<img src="hang.jpg">
</a>
<a style="display: block;padding-left: 10px" class="left">
tom
</a>
<div class="b">
<a>我的资料</a>
<a>注销</a>
</div>
</div>
</div>
<div class="pg-content">
<div class="menu left">
<div>tom</div>
</div>
<div class="content right">
<div style="background: gainsboro">
<div>hello world</div>
<div>hello world</div>
</div>
</div>
</div>
</body>
</html>
第三种只需在2的基础上，在右侧CSS中加入overflow：auto即可实现两种布局。
实用的小技巧：
1，如果写网站时用到很多的小图标，可以直接利用http://fontawesome.io/上面的即可。
首先要下载下来然后在也title中进行引用。
<link rel="stylesheet" href="Font-Awesome-master/Font-Awesome-master/css/font-awesome.min.css">
min表示压缩版的
然后在在网站中把看到的css样式复制过来即可，用font-size来设置图标大小
2，如果利用css实现鼠标放在某个标签上实现弹窗的效果。
a:hovel .b{
display:block
}
因为一般弹窗在鼠标没有放上去之前都是隐藏起来的，所以当鼠标放上去之后将其设置为block即可。
3，border-radius: 50%; 把图片或者设置好标签框由方形，转换成圆形或者椭圆形。后面也可已设置数值，根据实际情况来进行调整。
拥抱不确定，未来可期！喜欢该文章请不吝点赞推荐，如有疑问欢迎留言，我们一起探讨。
