移动端常用的基本东西

xiaoxiao2021-02-27  265

<!DOCTYPE html> <html>     <head>         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />         <meta charset="utf-8" />         <title></title>         </head>     <body>         <!-- 宽高为100% 的背景图片。-->         <div class="container bgImg">             <!-- flex列表 -->             <ul class="flex_example">                 <li>                     <!-- 头像?? -->                     <div class="flex_example_div1"></div>                     <!-- 内容 -->                     <div class="flex_example_div2">                         <p>这里是主要内容??</p>                         <p>2016-07-18 12:12:12</p>                     </div>                     <!-- 其他一些什么东西??最右边的 -->                     <button class="flex_example_button">一个按钮</button>                 </li>                 <li>                     <!-- 头像?? -->                     <div class="flex_example_div1"></div>                     <!-- 内容 -->                     <div class="flex_example_div2">                         <p>这里是主要内容??</p>                         <p>2016-07-18 12:12:12</p>                     </div>                     <!-- 其他一些什么东西??最右边的 -->                     <button class="flex_example_button">一个按钮</button>                 </li>             </ul>             <!-- img 三列 -->             <ul class="mt30 float_img_three clearfix">                 <li>这</li>                 <li>里</li>                 <li>可</li>                 <li>换</li>                 <li>成</li>                 <li>图</li>                 <li>片</li>             </ul>             <!-- img 两列 -->             <ul class="mt30 float_img_two clearfix">                 <li>这</li>                 <li>里</li>                 <li>可</li>                 <li>换</li>                 <li>成</li>                 <li>图</li>                 <li>片</li>             </ul>             <!-- 文字列表 -->             <ul class="text_list mt30">                 <li><a href="javascript:;">右边的箭头可以用图片</a></li>                 <li><a href="javascript:;">我这用的是大于号</a></li>             </ul>             <!-- 固定头 -->             <header>                 <a href="javascript:;" class="header_left"></a>                 <p>敢不敢点左边那坨圆圆的东西??</p>                 <a href="javascript:;" class="header_right"></a>             </header>             <!-- 左侧隐藏栏 -->             <div class="left_hide">                                  <p>这里是左侧隐藏栏</p>                                  <p>点右边半透明的地方我会消失哦!</p>                         </div>             <!-- 透明层 -->             <div class="layer"></div>             <!-- 按钮 -->             <button class="fixed_button mt30">我一般被固定在底部不动哦!!!</button>             <button class="eight_button">80%宽度的按钮</button>             <button class="six_button">60%宽度的按钮</button>         </div>         <script src="http://www.caochao.cc/js/jquery-2.1.3.min.js"></script>         <script>             $(function(){                 $('.header_left').on('click', function(){                     $('.layer').fadeIn();                     $('.left_hide').animate({                         'left': '0'                     }, 500);                 });                 $('.layer').on('click', function(){                     $('.layer').fadeOut();                     $('.left_hide').animate({                         'left': '-50%'                     }, 500);                 });             })         </script>     </body> </html>
转载请注明原文地址: https://www.6miu.com/read-6079.html

最新回复(0)