超漂亮的前台页⾯模板——html＋css＋js＋框架
由于要重新⼯作，所以做了⼀个⾃⼰的个⼈主页，觉得还好，所以分享出来，也算是⾃⼰的⼀些记录。
具体演⽰可以查看。
⼤体都是⼀些css3的应⽤，⼲货实在很少，做来玩乐罢了。
第⼀次写这⽅⾯的⽂章，⾏散神也散，望海涵。
⾸先，先列出less⽂件的公共部分以及常量。
公共类：
常量：
然后先把html 的代码写出来，总共是7个菜单的标签，以及5个区域的标签。
整个页⾯的展现形式最终会有五种，分别为 normal left right left right
。
9
⽤到了⼀些boot 的glyphicon 标签。⼤体的结构差不多就是这些代码就够了，下⾯我们来构建第⼀个页⾯。
⾸先是7个标签的css
样式：
cssclass属性30
然后是所有详细区域的样式：
area_main的样式：
注意现在的main_area 区域是隐藏在左侧的，由于是有五种形态，但是操作的都是这些标签，所以我把形态的标识放在了body上，⽐如normal就是 <body class="type_normal"></body>
所以css的样式还有这么⼀句：
3
这样整个第⼀种形态就差不多了。之后我们需要做的就是切换形态。我把形态的信息⽤data-type的形式写在了li标签⾥，这样如果想改的话也很⽅便。每次切换形态简单说来就是改变body的class。这样就会改变css样式，我们加了过渡和形变的样式就会呈现动画效果。这⾥我们应⽤js控制：
这样基本的框架就搭好啦，开始做left的⽅法，⾸先我们先看⼀下left形态的效果：
然后是left形态的跳转效果⽅法：
css样式：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。