1. CSS Icons: 網址： https://materializecss.com/icons.html （與CSS Collection結合)
2. CSS Collection:學習網址 https://materializecss.com/collections.html (未來大作業，圖片類型）
語法：
<ul class="collection">
<li class="collection-item avatar">
<img src="https://picdn.gomaji.com/products/766/209766/209766_1_r.jpg" alt=""
class="circle"> //如果網址沒有.jpg不要自己亂加，複製網址就好
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li> //<li>就是一個區塊
<li class="collection-item avatar">
<i class="material-icons circle">3d_rotation</i>
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
<i class="material-icons circle green">add_box</i> 可以在從icon那個網址自由更改
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
<i class="material-icons circle red">play_arrow</i>
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
</ul>
3.For LOOP 迴圈： 學習網址： https://www.w3schools.com/js/js_loop_for.asp
語法：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Loops</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = ""; // ” “ 兩個雙引號就是空字串
var i; //變數i
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";} //<br>代表換行 //text += cars[i] 代表 text=text+car[i].
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
用在Collection的部分 這樣每增加一個人 就不用再多寫幾行程式 把照片放到陣列就好
迴圈控制圖片的版本
<!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"/>
</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>
<ul class="collection" id="demo">
</ul>
<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>
<script>
var photoes=["https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg",
"https://pub-static.haozhaopian.net/static/web/site/features/tw/crop/images/crop_20a7dc7fbd29d679b456fa0f77bd9525d.jpg",
"https://free.com.tw/blog/wp-content/uploads/2014/08/Placekitten480-g.jpg",
"https://i.imgur.com/qzY7BJ9.jpg"];
var names =["bridge","images2","cat","mad"] ;
var text = "";
var i;
for (i = 0; i < photoes.length; i++) {
text += '<li class="collection-item avatar">';
text += ' <img src= ' + photoes[i] + ' alt="" class="circle"">'; //加號兩旁要空格，單引號
text += ' <span class="title">' + names[i] + '</span>';
text += ' <p>First Line <br>';
text += ' Second Line';
text += ' </p>';
text += ' <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>';
text += '</li>';
} //整組程式碼都由for來執行
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
有了超連結的程式碼：
<!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"/>
</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>
<ul class="collection" id="demo">
</ul>
<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>
<script>
var photoes=["https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg",
"https://pub-static.haozhaopian.net/static/web/site/features/tw/crop/images/crop_20a7dc7fbd29d679b456fa0f77bd9525d.jpg",
"https://free.com.tw/blog/wp-content/uploads/2014/08/Placekitten480-g.jpg",
"https://i.imgur.com/qzY7BJ9.jpg"];
var names =["bridge","images2","cat","mad"] ;
var websites=["https://www.google.com/?client=safari&channel=iphone_bm",
"https://www.apple.com/tw/",
"https://www.icloud.com",
"https://ioh.tw"];
var text = "";
var i;
for (i = 0; i < photoes.length; i++) {
text += ' <a href="' + websites[i] + '">';
text += '<li class="collection-item avatar">';
text += ' <img src="' + photoes[i] + '" alt="" class="circle"">';
text += ' <span class="title">' + names[i] + '</span>';
text += ' <p>First Line <br>';
text += ' Second Line';
text += ' </p>';
text += '</li>';
text += '</a>';
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
以Gomaji為例子 網址有pid
<!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"/>
</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>
<ul class="collection" id="demo">
</ul>
<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>
<script>
var photoes=["https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg",
"https://pub-static.haozhaopian.net/static/web/site/features/tw/crop/images/crop_20a7dc7fbd29d679b456fa0f77bd9525d.jpg",
"https://free.com.tw/blog/wp-content/uploads/2014/08/Placekitten480-g.jpg",
"https://i.imgur.com/qzY7BJ9.jpg"];
var names =["bridge","images2","cat","mad"] ;
//中文字要換模式才可以顯示
var websites=["216438", 設定ｐｉｄ的數字
"216493",
"216312",
"69441"];
var text = "";
var i;
for (i = 0; i < photoes.length; i++) {
text += ' <a href="test2.html?pid=' + websites[i] + '">'; 在另創一個檔案裡面放程式碼
//要記住放的位置 哪裡有引號要注意
text += '<li class="collection-item avatar">';
text += ' <img src="' + photoes[i] + '" alt="" class="circle"">'; 加號前後要有
text += ' <span class="title">' + names[i] + '</span>';
text += ' <p>First Line <br>';
text += ' Second Line';
text += ' </p>';
text += '</li>';
text += '</a>';
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
一個電商的商品有很多個 ，如果每個商品都要再做一個網站那會很耗時間
所以大部分都是用ｉd來代表不同的網站
製造pid的程式碼 http://jsfiddle.net/2x80jm8a/
上機練習，最終程式碼，自創pid
<!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"/>
</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>
<ul class="collection" id="demo">
</ul>
<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>
<script>
var photoes=["https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg",
"https://pub-static.haozhaopian.net/static/web/site/features/tw/crop/images/crop_20a7dc7fbd29d679b456fa0f77bd9525d.jpg",
"https://free.com.tw/blog/wp-content/uploads/2014/08/Placekitten480-g.jpg",
"https://i.imgur.com/qzY7BJ9.jpg"];
var names =["bridge","images2","cat","mad"] ;
var websites=["0",
"1",
"2",
"3"];
var text = "";
var i;
for (i = 0; i < photoes.length; i++) {
text += ' <a href="test2.html?pid=' + websites[i] + '">';
text += '<li class="collection-item avatar">';
text += ' <img src="' + photoes[i] + '" alt="" class="circle"">';
text += ' <span class="title">' + names[i] + '</span>';
text += ' <p>First Line <br>';
text += ' Second Line';
text += ' </p>';
text += '</li>';
text += '</a>';
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
沒有留言:
張貼留言