页面布局分为两种方式,一种是主站,另外一种是后台管理的页面布局,如下:
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>
简单的模板页面布局,效果如下:
注意,右边图片还隐藏了一个下拉框的位置,模拟用户登录之后的后台页面。