页面布局
S2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left {
float: left;
}
.right{
float: right;
}
.pg-header{
height:48px;
background-color: #2459a2;
color: white;
}
.pg-content .menu{
position: fixed;
top:48px;
left:0;
bottom:0;
min-width: 200px;
background-color: #dddddd;
}
.pg-content .content{
position: fixed;
top:48px;
right:0;
bottom:0;
left:200px;
background-color: purple;
overflow: auto;
}
</style>
</head>
<body style="margin: 0;">
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">aa</div>
<div class="content left">
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p></div>
</div>
<div class="pg-footer"></div>
</body>
</html>
S3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left {
float: left;
}
.right{
float: right;
}
.pg-header{
height:48px;
background-color: #2459a2;
color: white;
}
左侧菜单跟随着滚动条上下走动时用这个方法(左侧菜单内容多就用这种)
.pg-content .menu{
position: absolute;
top:48px;
left:0;
bottom: 0;
width:200px;
background-color: #dddddd;
}
.pg-content .content{
position: absolute;
top:48px;
right:0;
bottom:0;
left:200px;
}
</style>
</head>
<body style="margin: 0;">
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">aa</div>
<div class="content left">
<!--<div style="position: fixed;bottom: 0;right: 0;width: 50px;height: 50px;">返回顶部</div>-->
<!--<div style="position: absolute;bottom: 0;right: 0;width: 50px;height: 50px;">返回顶部</div>-->
<div style="background-color: purple;">
<p style="margin: 0;">ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p></div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
position:
fixed --永远固定在窗口的某个位置
relative -- 单独无意义
absolute --第一次定位可以在指定位置，滚轮滚动时不在了
<p style="margin: 0"> p标签默认有边距
S4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style>
.left {
float: left;
}
.right{
float: right;
}
.pg-header{
height:48px;
background-color: #2459a2;
color: white;
line-height: 48px;/*文字上下居中*/
}
.pg-header .logo{
width: 200px;
background-color: cadetblue;
text-align: center;/*左右居中*/
}
.pg-header .user{
/*width:160px;*/
/**/
margin-right: 60px;
padding:0 30px;
color: white;
height:48px;
}
.pg-header .user:hover{
background-color: #396bb3;
}
.pg-header .user:hover .b{
display: block;
}
.pg-header .user .a img{
height: 40px;width: 40px;margin-top: 4px;border-radius: 50%;
}
.pg-header .user .b{
z-index: 20;
position: absolute;
top: 48px;
right: 44px;
background-color:white;
color: black;
width: 160px;
text-align: center;
margin: 0 -76px;
display: none;
}
.pg-header .user .b a{
display: block;
}
.pg-header .icons{
padding: 0 20px;
}
.pg-header .icons:hover{
background-color: #396bb3;
}
/*左侧菜单以及上面不动 右侧content内容会建滚动条 这种用的最多*/
.pg-content .menu{
position: absolute;
top:48px;
left:0;
bottom: 0;
width:200px;
background-color: #dddddd;
}
.pg-content .content{
position: absolute;
min-width: 980px;
top:48px;
right:0;
bottom:0;
left:200px;
overflow: auto;
z-index: 9;
}
</style>
</head>
<body style="margin: 0;">
<div class="pg-header">
<div class="logo left">
腾讯网
</div>
<div class="user right" style="position: relative;">
<a class="a" href="#"> <!--点图标进行跳转-->
<img src="22.jpg">
</a>
<div class="b" >
<a>我的资料</a>
<a>注销</a>
</div>
</div>
<div class="icons right">
<i class="fa fa-bell-o" aria-hidden="true"></i>
</div>
<div class="icons right">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<span style="display: inline-block;line-height: 1px;padding: 10px 7px;background-color: red;border-radius: 50%;font-size: 12px;">6</span>
</div>
</div>
<div class="pg-content">
<div class="menu left">aa</div>
<div class="content left">
<!--<div style="position: fixed;bottom: 0;right: 0;width: 50px;height: 50px;">返回顶部</div>-->
<!--<div style="position: absolute;bottom: 0;right: 0;width: 50px;height: 50px;">返回顶部</div>-->
<div style="background-color: purple;">
<p style="margin: 0;">ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p></div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
position:
fixed --永远固定在窗口的某个位置
relative -- 单独无意义
absolute --第一次定位可以在指定位置，滚轮滚动时不在了
<p style="margin: 0"> p标签默认有边距
min-width: 980px; 当浏览器显示的最小宽度小于980px时,下边会出现滚动条
overflow: auto; 切换两种布局s3.html s4.html
border-radius: 50% 变成圆形
.pg-header .user:hover .b{
display: block;
}当鼠标放到user下时，自动设置user下的b标签显示出来
padding:0 20px; 上下0 左移20px
line-height: 1px 图标占自己的高度
S4-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style>
.item{
background-color: #dddddd;
}
.item:hover{
color: red;
}
.item:hover .b{
background-color: green;
}
</style>
</head>
<body>
<div class="item">
<div class="a">
<i class="fa fa-address-card-o" aria-hidden="true"></i>
</div>
<div class="b">456</div>
</div>
</body>
</html>
.item:hover .b{} 当鼠标上面这个hover时为b加上这个样式
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器