如果想头部和尾部固定在窗口的位置使用position
css代码如下
header{position:fixedtop:0}footer{position:fixedbottom:0}
div1左浮动，后续的元素就会自动对它进行左环绕，意思就是说，div1靠左排列，div2和div3就会在右边的空白处围绕div1进行排列，只有空白处的尺寸无法容纳了才会排到div1的下面。这是“浮动”（float）的本意（经常用word进行图文混合排版的同学就应该清楚这是什么意思），后来被用作横向排版也算是歪打正着，不过如果使用不当很容易会造成版面混乱的。解决办法是在div2的后面清除浮动，div3就会被强行赶到div1的下面了，具体自己百度解决。
图片要想居中，它和它的父元素宽度不能是100%啊，否则都撑满了还怎么居中啊。
图片要想放在另一张图片中间，可以把其中一张图片作为css背景图，另一张正常显示；或者把图片各自放入层中，通过相对定位、绝对定位，把其中一张图放到另一张图的中间。
思路：一个矩形，一个正方形，将正方形的边框去掉两边，留两边，这样就形成了一个打开的三角形，然后旋转打开的三角形，利用相对定位移动到矩形右侧，接着将正方形的背景颜色设置白色，覆盖矩形右侧边框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<style>
body>div{
width: 300px
height: 200px
border: 1px solid red
padding: 10px
}
/* 矩形 */
#rectangle {
width: 80px
height: 20px
border: 1px solid #CEEBD4
float: left
padding: 5px 0 5px 10px
color: #808280
}
/* 三角形 */
#triangle {
width: 15px
height: 15px
border-left: 1px solid #CEEBD4
border-bottom: 1px solid #CEEBD4
float: left
position: relative
left: -8px
top: 8px
background-color: white
/* 旋转 */
-webkit-transform: rotate(-135deg)
}
</style>
</head>
<body style="padding:100px">
<div>
<div id="rectangle">扫码登录</div>
<div id="triangle"></div>
</div>
</body>
</html>
打开浏览器，访问该文件，效果如下图：
