这里做了一个简易的模板,用到了一个获取图标的小工具,可以到这个网站下载:http://fontawesome.io/
色彩搭配也许不好看,我不是专门搞这个的。
由于时间原因没有写入JS,可以自己加入。
<!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> body { margin: 0; } /*这里是为了填满页面*/ .left { float: left; } .right { float: right; } /*这里为了方便设置的两个float属性*/ .header { height: 48px; background-color: blue; color: white; line-height: 48px; } /*设置最上面的头部一栏*/ .header .icons { padding: 0 30px; } /*设置头部图标内左右边距*/ .header .icons:hover { background-color: navy; } /*设置鼠标移动到图标的效果*/ .header .logo { width: 200px; background-color: seagreen; text-align: center; } /*设置左边的logo*/ .header .user { margin-right: 60px; padding: 0 20px; background-color: blueviolet; color: wheat; height: 48px; } /*头部右边用户一块的设置*/ .header .user:hover { background-color: navy; } /*当鼠标移动到用户的效果*/ .header .user .a img { height: 40px; width: 40px; margin-top: 4px; border-radius: 50%; } /*设置插入头像的效果,注意这里的border-radius:50%设置成圆形的*/ .header .user .b { z-index: 20; position: absolute; top: 48px; right: 0; background-color: aqua; color: black; width: 160px; display: none; } /*鼠标接触到头像设置弹出栏,display设置成none,默认不可见*/ .header .user:hover .b { display: block; } /*这里是一个重点,当鼠标碰到头像时候,头像弹出栏的改变*/ .header .user .b a { display: block; } /*这里设置头像弹出栏里面的a标签*/ .content .menu { position: absolute; top: 48px; left: 0; bottom: 0; width: 200px; background-color: darkgray; } .content .menu .m{ padding: 20px 0; text-align: center; } /*设置鼠标移动到菜单栏的效果*/ .content .menu .m:hover{ background-color: blue; } /*这里设置左侧菜单栏*/ .content .content { position: absolute; top: 48px; right: 0; bottom: 0; left: 200px; overflow: auto; z-index: 9; } /*这里设置最大的文本一块内容*/ .content .return { z-index: 10; height: 50px; width: 80px; position: fixed; background-color: black; color: white; bottom: 20px; right: 20px } </style> </head> <body> <!--设置头部--> <div class="header"> <div class="logo left"> 制作管理页面 </div> <div class="user right" style="position: relative"> <a class="a" href="#"> <img src="6666.jpg"> </a> <div class="b"> <a href="#">我的资料</a> <a href="#">查询</a> <a href="#">设置</a> <a href="#">注销</a> </div> </div> <div class="icons right"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <!--注意这里用来一个工具里面的图标,fontawesome的图标工具--> <span>5</span> </div> <div class="icons right"> <i class="fa fa-bell-o" aria-hidden="true"></i> </div> <div class="icons right"> <i class="fa fa-battery-three-quarters" aria-hidden="true"></i> </div> <div class="icons right"> <i class="fa fa-apple" aria-hidden="true"></i> </div> </div> <!--设置菜单和内容部分--> <div class="content"> <div class="menu left"> <div class="m">菜单1</div> <div class="m">菜单2</div> <div class="m">菜单3</div> <div class="m">菜单4</div> <div class="m">菜单5</div> <div class="m">菜单6</div> </div> <div class="content left"> <div style="background-color: palegreen"> <p style="margin: 0">内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> </div> <button οnclick="GoTop();" class="return">返回顶部</button> </div> </body> </html>
效果就是这样:
鼠标移动到相应的地方效果:
这样: