标签：color 前端 50% radius 015 详细 呈圆形 border 90px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css后台布局</title>
<link rel="stylesheet" href="fontawesome-free-6.2.1-web/css/v5-font-face.min.css">
<style>
body{ margin:0}/* 去掉边框，*/
.page-header{
height: 90px;
background-color: #8e908c;
}
.page-content .menu{
position: absolute;
top: 90px;
left: 0;
bottom: 0;
width: 300px;
background-color: #e75e15;
}
.page-content .content{
padding-left:20px ;
position: absolute;
top: 90px;
right: 0;
bottom: 0;
left: 300px;
background-color: #a8acad;
min-width: 780px;/*加上最小宽度，不让浏览器变小时，破坏其布局*/
overflow: auto;/*出现滚动条*/
}
h1{margin:0}/* h1有外边距，要去掉*/
.head-div{
width: 300px;
height: 90px;
line-height: 90px;
font-size: 36px;
}
.head-message{
margin: 0 30px;
width: 90px;
height: 90px;
line-height: 90px;
font-size: 36px;
}
.head-div:hover{
background-color: #a8acad;
font-size: 50px;
color: red;
}
.user img{
height: 60px;
width: 60px;
margin: 15px 30px;
border-radius: 50%;/* 图片呈圆形*/
}
.page-header .user .more{
position: absolute;top:90px;right: 30px;z-index: 9;display: none;
}
.more{
height: 160px;
width: 200px;
background-color: wheat;
}
.user:hover .more{
display:block;
color: red;
}
.user:hover {
background-color: #e75e15;
}
.text-c{
text-align: center;
}
.f-left{float: left;}
.f-right{float: right;}
</style>
</head>
<body>
<div class="page-header">
<div class="head-div text-c f-left">LOGO</div>
<div class="user text-c f-right" style="position: relative">
<a href="">
<img src="img.png">
</a>
<div class="more" >
<div>详细信息</div>
<div>退出</div>
</div>
</div>
<div class="head-message f-right">
<a>fsfasfa</a>
<i class="fa-solid fa-bell"></i>
</div>
<div class="head-message f-right">
<a>ljkljl</a>
<i class="fa-solid fa-bell"></i>
</div>
</div>
<div class="page-content">
<div class="menu">
<h1>菜单一</h1>
<h1>菜单一</h1>
<h1>菜单一</h1>
<h1>菜单一</h1>
<h1>菜单一</h1>
<h1>菜单一</h1>
</div>
<div class="content">
<!-- //背景颜色加在这个DIV就可以填满了-->
<h1>后台布局4--absolute+overflow-详细版</h1>
<h1>主要用第3种布局。</h1>
<h1>border-radius: 50%;/* 图片呈圆形*/</h1>
<h1>.user:hover .more{
display:block;
color: red;
}</h1>
<h1>https://fontawesome.com/download 小图标网站</h1>
<h1>border-radius: 50%;/* 图片呈圆形*/</h1>
<h1>border-radius: 50%;/* 图片呈圆形*/</h1>
<h1>border-radius: 50%;/* 图片呈圆形*/</h1>
<h1>border-radius: 50%;/* 图片呈圆形*/</h1>
<h1>border-radius: 50%;/* 图片呈圆形*/</h1>
<h1>border-radius: 50%;/* 图片呈圆形*/</h1>
<h1>border-radius: 50%;/* 图片呈圆形*/</h1>
<h1>border-radius: 50%;/* 图片呈圆形*/</h1>
<h1>border-radius: 50%;/* 图片呈圆形*/</h1>
<h1>border-radius: 50%;/* 图片呈圆形*/</h1>
<h1>border-radius: 50%;/* 图片呈圆形*/</h1>
</div>
</div>
<div class="page-footer"></div>
</body>
</html>
标签：color,
前端,
50%,
radius,
015,
详细,
呈圆形,
border,
90px
From： https://www.cnblogs.com/lfyxys/p/16916106.html