1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--引入css样式--> 7 <link rel="stylesheet" href="fontawesome-free-5.0.13/web-fonts-with-css/css/fontawesome.min.css"> 8 <style> 9 /*设置body样式*/ 10 body { 11 margin: 0; /*去掉蓝色边框两侧的空白因为body默认属性两边有缝隙*/ 12 } 13 14 /*设置头部样式*/ 15 .pg_header { 16 background-color: #2459a2; 17 height: 48px; 18 line-height: 48px; /*设置header中的内容根据高度上下居中(文字)*/ 19 20 min-width: 980px; /* 设置最小宽度*/ 21 } 22 23 /*设置logo样式*/ 24 .pg_header .logo { 25 background-color: #3b5998; 26 27 width: 200px; 28 height: 48px; 29 color: white; 30 font-size: 20px; 31 text-align: center; /*设置在这个div中左右居中*/ 32 33 } 34 35 /*设置用户标签样式*/ 36 .pg_header .user { 37 margin-right: 80px; 38 padding: 0 20px; 39 height: 48px; 40 position: relative; 41 } 42 43 /*设置当鼠标放到这个标签上时变色，并且把*/ 44 .pg_header .user:hover { 45 background-color: steelblue; 46 47 } 48 49 /*设置头像下面的下拉框，鼠标放上去弹出下拉框，其实就是当鼠标放上去的时候让b去掉以前设置的的display=none*/ 50 .pg_header .user:hover .b { 51 display: block; 52 } 53 54 /*设置头像样式*/ 55 .pg_header .user .a img { 56 width: 40px; /*设置头像宽度*/ 57 height: 40px; /*设置头像高度*/ 58 margin-top: 5px; /*设置图片距离上顶的距离是多少像素*/ 59 border-radius: 50%; /*border-radius: 50%让方形的图片变成圆的*/ 60 } 61 62 /*设置下拉框样式*/ 63 .pg_header .user .b { 64 position: absolute; /*和user中的relative同用*/ 65 top: 48px; 66 right: 0; 67 background-color: #bbbbbb; 68 z-index: 20; 69 width: 160px; 70 margin-right: -39px; 71 margin-top: 0; 72 display: none; 73 74 } 75 76 .pg_header .user .b a { 77 display: block; 78 } 79 80 /*设置左侧边框样式*/ 81 .pg_content .menu { 82 position: absolute; /*使用position后top等属性就可以使用了，就可以使用这些属性将一个DIV固定到某个位置*/ 83 top: 48px; 84 left: 0; 85 bottom: 0; 86 width: 200px; 87 background-color: #ff3955; 88 min-width: 200px; /* 设置最小宽度也就是当网页窗口缩小到一定程度的时候，*/ 89 /*这个div就会永远执行它的宽度是200px,注意：并不是所有浏览器都适用于本方法*/ 90 } 91 92 /*设置右侧边框样式*/ 93 .pg_content .content { 94 position: absolute; /*使用position后top等属性就可以使用了，就可以使用这些属性将一个DIV固定到某个位置*/ 95 top: 48px; 96 left: 200px; 97 bottom: 0; 98 right: 0; 99 background-color: #0aa770; 100 overflow: auto; /*用了overflow之后当这个div中纵向内容过多时会出现下拉框*/ 101 min-width: 980px; /* 设置最小宽度*/ 102 z-index: 9; 103 104 } 105 106 /*设置往左飘浮样式*/ 107 .left { 108 float: left; 109 } 110 111 /*设置往右飘浮样式*/ 112 .right { 113 float: right; 114 } 115 </style> 116 </head> 117 <body> 118 <!--头部--> 119 <div class="pg_header"> 120 <div class="logo left">老男孩</div> <!--这个设置往左飘浮--> 121 <i class="fab fa-500px"></i> 122 <div class="user right"> <!--这个设置往右飘浮--> 123 124 <a class=‘a‘ href="#"> 125 <img src="88.jpeg"> 126 </a> 127 <div class="b" style=""> 128 <a>我的资料</a> 129 <a>退出</a> 130 </div> 131 </div> 132 133 134 </div> 135 136 <!--中间--> 137 <div class="pg_content"> 138 <!--左侧边框（菜单栏）--> 139 <div class="menu left">a</div> 140 <!--左侧边框（内容栏）--> 141 <div class="content left"> 142 <p>dsdf</p> 143 <p>dsdf</p><p>dsdf</p> 144 <p>dsdf</p><p>dsdf</p><p>dsdf</p> 145 <p>dsdf</p><p>dsdf</p> 146 <p>dsdf</p><p>dsdf</p> 147 <p>dsdf</p><p>dsdf</p> 148 <p>dsdf</p><p>dsdf</p><p>dsdf</p> 149 <p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p> 150 <p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p> 151 <p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p> 152 <p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p> 153 <p>dsdf</p><p>dsdf</p><p>dsdf</p><p>dsdf</p> 154 <p>dsdf</p> 155 156 157 </div> 158 </div> 159 160 161 <!--底部--> 162 <div class="pg_footer"></div> 163 164 165 </body> 166 </html>
效果如下图
原文：https://www.cnblogs.com/topzhao/p/9189347.html