简易的后台管理页面布局(二)

这里做了一个简易的模板,用到了一个获取图标的小工具,可以到这个网站下载:http://fontawesome.io/

色彩搭配也许不好看,我不是专门搞这个的。

由于时间原因没有写入JS,可以自己加入。

html>
lang="en">

    charset="UTF-8">
    </span>Title<span style="color:#e8bf6a;">
    rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    



class="header">
class="logo left"> 制作管理页面
class="icons right"> class="fa fa-commenting-o" aria-hidden="true"> 5
class="icons right"> class="fa fa-bell-o" aria-hidden="true">
class="icons right"> class="fa fa-battery-three-quarters" aria-hidden="true">
class="icons right"> class="fa fa-apple" aria-hidden="true">
class="content">
class="menu left">
class="m">菜单1
class="m">菜单2
class="m">菜单3
class="m">菜单4
class="m">菜单5
class="m">菜单6
class="content left">
style="background-color: palegreen">

style="margin: 0">内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容


效果就是这样:

简易的后台管理页面布局(二)_第1张图片


鼠标移动到相应的地方效果:

简易的后台管理页面布局(二)_第2张图片


这样:

简易的后台管理页面布局(二)_第3张图片




你可能感兴趣的:(前端高阶知识,html)