10/17 MIS (Class,Buttons,Navbar,Footer)

上週作業提點：Button，按一次停，按兩次呢？ （不正常操作行為 ）

在Setinterval裡面：按一次就有一個定時器  按兩次就會有另一個定時器，假設按了三次  （總共有1,2,3）個定時器 按下clear interval 只有停下三號 前面兩號停不下來。

Developer:胖手指原則，因此，不要用button

highestintervalid 

本週重點：CSS

資源網址：https://materializecss.com ; 
                    http://nchu-mis-html5.blogspot.com/2016/09/MaterializeCSS.htm


1.安裝CSS的配件： 安裝網址：https://materializecss.com/getting-started.html


2. Classes    學習網址： https://www.w3schools.com/html/html_classes.asp

用法：
The HTML class attribute is used to define equal styles for elements with the same class name.
So, all HTML elements with the same class attribute will have the same format and style.
Here we have three <div> elements that point to the same class name
語法： 
<!DOCTYPE html>
<html>
<head>
<style>
.cities {  //記得加上點
    background-color: black;              //這裡創建一個class叫做citites的模板
    color: white;
    margin: 20px;
    padding: 20px;
}
</style>
</head>
<body>

<div class="cities">                       //呼叫前面建立的Class的模板，因此會有一樣的配色，底色
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

3.CSS buttons 學習網址：https://materializecss.com/buttons.html

語法：
<a class="waves-effect waves-light btn">button</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a> <a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>


4.CSS Navbar 學習網址：https://materializecss.com/navbar.html
語法：
 <nav>
    <div class="nav-wrapper  brown darken-1">   //記得把顏色放在引號內
      <a href="#" class="brand-logo">Logo</a>   (沒強調就是左邊,要改就把right,center加後面）
      <ul id="nav-mobile" class="right hide-on-med-and-down"> (left,right自己改)
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

<補充> CSS extended navbar
語法：
<nav class="nav-extended">
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
    <div class="nav-content">
      <ul class="tabs tabs-transparent">
        <li class="tab"><a href="#test1">Test 1</a></li>
        <li class="tab"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
  </nav>

  <ul class="sidenav" id="mobile-demo">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">JavaScript</a></li>
  </ul>

  <div id="test1" class="col s12">Test 1</div>
  <div id="test2" class="col s12">Test 2</div>
  <div id="test3" class="col s12">Test 3</div>
  <div id="test4" class="col s12">Test 4</div>

5.CSS Footer 學習網址：https://materializecss.com/footer.html

語法：

 <footer class="page-footer">
          <div class="container">
            <div class="row">
              <div class="col l6 s12">
                <h5 class="white-text">Footer Content</h5>
                <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
              </div>
              <div class="col l4 offset-l2 s12">
                <h5 class="white-text">Links</h5>
                <ul>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="footer-copyright">
            <div class="container">
            © 2014 Copyright Text
            <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
            </div>
          </div>
        </footer>

6.CSS語法的各種顏色  補包網址：https://materializecss.com/color.html

7.CSS Collection 學習網址：https://materializecss.com/collections.html

8.要讓js跑動的素材 素材網址：https://materializecss.com/cards.html

                                                       https://cdnjs.com/libraries/materialize


期末作業是大作業 要介紹什麼 .... 可以開始思考

 點一個超連結 跳到另一個網址

以gomaji為例子

http://nchu-mis-html5.blogspot.com/2013/12/gomaji.html






10/17 上課內容實做 程式碼

 <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

      <script>
      i = 0;
      x = [ "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim5z3mhLlHbBBPwpFZia-9APA549-E1OYwsOcIbbKiUcXhwFaa74V9nW-WWOpJlBd6bMi8jXrmF3oK7h5izbUPSiLGiaKLPsfXY3kD7Xjuo-LAGyFMIaHHFpf0tFjaYMgjPoqC4UUcz_I/s1600/EUCL%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg",
          "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZEX_SS3yansYhHEelBexiVDwdFnEQBBs7z9BseKyAzeQeULVF8O0q8VkcIZG7lRjduBHrzHEI0DA9ITDsxQSQcJCXgatja0q9tMr9AR6saRXq5wX7DUdmgmeB1q9N0mq7I7o9El9MaZc/s1600/Frocius+Android%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg",
          "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn2Jl4Vg-n0c0qae6sZ9j-14-r0JRFrygYZCA2-5nWHF7X3mqpHq91l76gwTIdT1iylvckaYtFjGoA0QBEVC-ZmoxFdnzYjWjpPJux4PhN6WE_ySbw_1X4k9b-2u3Tx66oObxHQVY9lok/s1600/devabchb%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg",
          "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuNk-L0yrL1NGJF6LyNKsfBdWfebb6InMCCvHFkCmhRZrNhakoxoKtFJjFNX1TgGerFYIsl0fYkBECa26IgnuQZpV8qdTkDVuYFAkgpiWKg_Cuh4U0Hu4YduBLBsT_-6LepXWLRjlh-ho/s1600/A+Team%E5%B1%95%E7%A4%BA%E6%94%A4%E4%BD%8D01.jpg" ]
      function f(y)
      {
 
        i=(i+y+x.length) % x.length;
         document.getElementById("demo").innerHTML = "<img src='" + x[i] + "' width='100%'>"
 
 
           
      }
    </script>
    </head>

    <body>



      <nav>
    <div class="nav-wrapper  brown darken-1">   //記得把顏色放在引號內
      <a href="#" class="brand-logo">Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

  <div id="demo">
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim5z3mhLlHbBBPwpFZia-9APA549-E1OYwsOcIbbKiUcXhwFaa74V9nW-WWOpJlBd6bMi8jXrmF3oK7h5izbUPSiLGiaKLPsfXY3kD7Xjuo-LAGyFMIaHHFpf0tFjaYMgjPoqC4UUcz_I/s1600/EUCL%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg' width='100%'>
</div>



<a href="javascript:f(-1);"class="waves-effect waves-light btn ">Next</a>

<a href="javascript:f(1);" class="waves-effect waves-light btn" >previous</a>

<footer class="page-footer">
          <div class="container">
            <div class="row">
              <div class="col l6 s12">
                <h5 class="white-text">Footer Content</h5>
                <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
              </div>
              <div class="col l4 offset-l2 s12">
                <h5 class="white-text">Links</h5>
                <ul>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="footer-copyright">
            <div class="container">
            © 2014 Copyright Text
            <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
            </div>
          </div>
        </footer>
      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

Pages

Created By SoraTemplates | Distributed By Gooyaabi Templates