html 5ノート

33051 ワード
一、ヘッダ情報の設定(適応)
1、宣言メッセージ
2、コード設定
3、モバイル機器特別設定(
重要な声明!
)
　　　 
二、携帯電話の手動スライド効果
1、タッチパネル効果スクロールユニット(jsに含まなければならない部分)
  1. <!-- -->
  2.  <script type="text/javascript" src="./js/touch.js"></script>
  3.  <script type="text/javascript" src="./js/zepto.extend.js"></script>
  4.  <script type="text/javascript" src="./js/zepto.ui.js"></script>
  5.  <script type="text/javascript" src="./js/slider.js"></script>
  6.  <!-- end-->
4 js ， 。
2、 （html ）
  1. <div class="head_nav_C" id="hongye_nav" style="height:60px;">
  2.             <div style="background-color:white;">
  3.                     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  4.             </div>
  5.             <div style="background-color:white;">
  6.                       bbbbbbbbbbbbbbbbbbbbbbbbbbb
  7.             </div>
  8.             <div style="background-color:white;">
  9.                         cccccccccccccccccccccccccccc
  10.             </div>
  11.             <div style="background-color:white;">
  12.                          ddddddddddddddddddddddddd
  13.             </div>
  14.         </div>
3、js （ html ）
  1. <script>
  2.     Zepto(function($){// zepto
  3.         $("#hongye_nav").slider({// html  id slider
  4.             autoPlay    : false, //
  5.             showDot     : false,
  6.             loop        : true,//
  7.         });
  8.     })
  9.  </script>
4、 slider.css
  1. <link rel="stylesheet" type="text/css" href="css/slider.css" />
：
( )
html
<div id=”fla”>
　　<img lazyload=”images/img2.jpg” />
　　<img lazyload=”images/img3.jpg” />
</div>
2、js
<script>
// slider
$('#fla').slider();
</script>

：
、
color:#FFF
text-shadow:0 0 2px #146F61;(css3.0 )
CSS3.0 text-shadow
：text-shadow: h-shadow v-shadow blur color;

text-shadow：【x （x offset） y （Y offst） （Blur） （color）】
：text-shadow: 5px 5px 5px #FF0000;

、
border-radius
：
div
{
border:2px solid;
border-radius:25px;
}
：
div{
border:2px solid;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

}

、 jQuery

<script type="text/javascript" src="http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.min.js">
</script>
<script type="text/javascript" src="http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.touchSwipe.min.js">
</script>

、 div

<div style="background:url('img/wy_logo_bg01.jpg') no-repeat;width:100%;height:10%"></div>


html 5でcss 3が新しく追加したアニメーション効果
golang range遍歴