页面布局分为两种方式,一种是主站,另外一种是后台管理的页面布局,如下:
1、网页主站:
主站页面的布局格式:
<div class="pg_header">
<div style="width: 980px;margin: 0 auto">
内容自动居中
</div>
</div>
<div class="pg_body"> </div>
<div class="pg_bottom"> </div>
主站页面主要分为三个部分:头部,中部,底部
2、后台页面管理布局
后台页面布局的方式:
posistion:
fiexd -- 永远固定在窗口的某个位置
relative -- 单独无意义
absolute -- 第一次定位,可以在指定位置,滚轮滑动时,不在。。。
后台页面管理布局:
1、左侧滑动、右边滑动
2、左侧固定、右边滑动
3、左边滑动、右边滑动
这三种模式,可以在变动少的时候,进行切换。制作站点页面一般分为两种:一种是主站;一种是后台管理
插曲一下:使用CSS可以使字体变颜色,不需要捕获鼠标事件 (onlinck)操作。
如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item {
background-color: #dddddd;
}
.item:hover{
color: red;
}
.item:hover .b {
background-color: green;
}
</style>
</head>
<body>
<div class="item">
<div class="a">123 </div>
<div class="b">456</div>
</div>
</body>
</html>
效果:
主要应用的是html、css来实现。
一些小图标的按钮接口,参考:https://fontawesome.com/?from=io 。对应的代码,连接方式,先下载完下来。
模板如下:
<!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;
line-height: 48px; /* 使的文字居中 */
position: fixed;
right: 0;
left: 0;
top: 0;
}
.pg_header .logo{
background-color: blue;
text-align: center;
width: 200px; /* 参考左侧的菜单栏像素*/
}
.pg_header .icon {
padding: 0 20px;
}
.pg_header .icon:hover {
background-color: #2459a2;
}
.pg_header .user {
margin-right: 60px;
padding: 0 20px;
background-color:firebrick;
color: white;
height: 48px;
}
.pg_header .user:hover {
background-color:lemonchiffon;
}
.pg_header .icon .span_font {
border-radius: 50%;
display: inline-block;
padding: 3px 7px;
font-size: 12px;
color: white;
background-color: red;
line-height: 12px;
}
.pg_header .user .b{
z-index:20;
position: absolute;
top:48px;
right: 44px;
background-color: #804668;
width: 160px;
display: none;
}
.pg_header .user .b a{
display: block;
}
.pg_header .user:hover .b{
display: block;
}
.pg_content .menu{
/*position: fixed;*/
/*top:48px;*/
/*left: 0;*/
/*bottom: 0;*/
/*width: 200px;*/
/*background-color: #dddddd;*/
/*min-width: 100px;*/
/*overflow: auto;*/
position: absolute;
top:48px;
left:0;
bottom: 0;
width: 200px;
background-color: #dddddd;
}
.pg_content .content{
/*position: fixed;*/
/*top:48px;*/
/*right: 0;*/
/*bottom: 0;*/
/*left: 200px;*/
/*background-color: aliceblue;*/
/*overflow: auto;*/
position: absolute;
top:48px;
right: 0;
left:200px;
bottom: 0;
background-color: green;
overflow:auto;
z-index: 9;
}
</style>
<!-- 图表导入,https://fontawesome.com/icons-先从网站上面下载,下载图表样式,保持目录结构不变-->
<link rel="stylesheet" href="fontawesome-free-5.3.1-web/css/fontawesome.css">
</head>
<body>
<div class="pg_header" >
<div class="logo left">
<div>37互娱 </div>
</div>
<!-- 用户的位置往往是一张图片替代 -->
<div class="user right" style="position: relative">
<a href="###"> <!-- 设置点击图片设置跳转 -->
<!-- 设计图片为原型,设计为原型其实就是50% -->
<img style="height: 40px;width: 40px;margin-top: 4px;border-radius: 50%" src="1537511971641.jpg">
</a>
<div class="b">
<a>我的资料</a>
<a>信息设置</a>
<a>账单管理</a>
</div>
</div>
<div class="right icon">
<!-- 可以对应的网站中,找到对应 i节点标签 -->
<i class="fa fa-bell-slash" aria-hidden="true" style="font-size: 48px;"></i>
<span class="span_font">5</span>
</div>
<div class="right icon">
<i class="fa fa-comment-alt" aria-hidden="true" style="font-size: 48px;"></i>
</div>
</div>
<div class="pg_content">
<div class="menu left">a</div>
<div class="content left">
<!-- 测试宽度 -->
<p>faffasdasff</p>
<p>faffasdasff</p>
</div>
</div>
<div class="pg_footer"></div>
</body>
</html>
简单的模板页面布局,效果如下:
注意,右边图片还隐藏了一个下拉框的位置,模拟用户登录之后的后台页面。