网站打开速度优化需要实现的改版

1.减少js的使用，用html5+css3代替

原理是利用一个隐藏的多选框的条件选择符进行CSS的覆盖，配合css3的缓动效果

#sideToggle{ display:none; }
#sideToggle:checked + aside{ left:0; }
#sideToggle:checked ~ #wrap{ padding-left:220px; }
body > aside{ position:absolute; top:0; bottom:0; left:-200px; width:200px; background:#f1103a; transition:0.2s ease-out; -webkit-transition:0.2s ease-out; }

<body>
<input type='checkbox' id='sideToggle'>
<aside><h2>Side Menu</h2></aside>
<div id='wrap'>
     <label id='sideMenuControl' for='sideToggle'>=</label>
    <p>HTML5/CSS3点击显示侧边框   </p>
  </div>
</body>

 

posted @ 2015-06-16 17:09  me春天  阅读(179)  评论(0)  编辑  收藏  举报