響應式網頁實作坊
-
Upload
chih-cheng-wang -
Category
Education
-
view
2.101 -
download
0
Transcript of 響應式網頁實作坊
![Page 1: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/1.jpg)
![Page 2: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/2.jpg)
![Page 4: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/4.jpg)
![Page 5: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/5.jpg)
![Page 6: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/6.jpg)
![Page 7: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/7.jpg)
![Page 8: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/8.jpg)
![Page 9: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/9.jpg)
![Page 10: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/10.jpg)
![Page 11: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/11.jpg)
![Page 12: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/12.jpg)
![Page 13: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/13.jpg)
![Page 14: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/14.jpg)
.box.left{float:left;height:300px;width:50%;}
.box.right{float:right;height:300px;width:50%;}
.wrap{padding:20px; ...}
![Page 15: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/15.jpg)
.box.left{float:left;height:300px;width:50%;}
.box.right{float:right;height:300px;width:50%;}
![Page 16: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/16.jpg)
.box.left{float:left;height:300px;width:50%;}
.box.right{float:right;height:300px;width:50%;}
![Page 20: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/20.jpg)
![Page 21: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/21.jpg)
.box{width:200px;height:200px;padding:100px;margin:100px;}
![Page 22: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/22.jpg)
.box{width:200px;height:200px;padding:100px;maring:100px;box-sizing:border-box;}
box-sizing
padding
![Page 23: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/23.jpg)
![Page 25: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/25.jpg)
![Page 26: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/26.jpg)
![Page 27: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/27.jpg)
Menu Content
Header
Footer
![Page 28: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/28.jpg)
![Page 30: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/30.jpg)
![Page 31: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/31.jpg)
Menu Content AD
Header
Footer
![Page 32: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/32.jpg)
Menu Content AD
Header
Header
Header
Footer
![Page 33: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/33.jpg)
Menu Content AD
Header
Footer
![Page 34: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/34.jpg)
Menu
Content
Header
![Page 35: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/35.jpg)
Menu
Content
Header
![Page 36: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/36.jpg)
![Page 38: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/38.jpg)
![Page 39: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/39.jpg)
![Page 40: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/40.jpg)
.col-**-*{position:relative;min-height:1px;
}
padding-right:15px;padding-left:15px;
![Page 41: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/41.jpg)
![Page 43: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/43.jpg)
![Page 44: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/44.jpg)
![Page 45: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/45.jpg)
@medianot|onlymediatypeand(mediafeature){CSS-Code;}
@mediascreenand(max-width:600px){.col-onethird{width:100%;}}
![Page 47: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/47.jpg)
![Page 48: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/48.jpg)
![Page 50: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/50.jpg)
![Page 52: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/52.jpg)
device-width
device-height
initial-scale
minimum-scale
maximum-scale
user-scalable
![Page 54: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/54.jpg)
![Page 55: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/55.jpg)
Menu Content AD
Header
Footer
Header
Content
Footer
![Page 56: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/56.jpg)
Header
Content
Footer
![Page 58: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/58.jpg)
@medianot|onlymediatypeand(mediafeature){CSS-Code;}
![Page 59: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/59.jpg)
![Page 60: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/60.jpg)
![Page 61: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/61.jpg)
![Page 62: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/62.jpg)
![Page 63: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/63.jpg)
![Page 64: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/64.jpg)
![Page 66: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/66.jpg)
![Page 67: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/67.jpg)
![Page 68: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/68.jpg)
![Page 69: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/69.jpg)
![Page 70: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/70.jpg)
![Page 71: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/71.jpg)
![Page 72: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/72.jpg)
![Page 74: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/74.jpg)
![Page 75: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/75.jpg)
![Page 76: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/76.jpg)
![Page 77: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/77.jpg)
![Page 78: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/78.jpg)
![Page 79: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/79.jpg)
![Page 80: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/80.jpg)
![Page 81: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/81.jpg)
![Page 82: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/82.jpg)
![Page 83: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/83.jpg)
![Page 84: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/84.jpg)
- <inputtype="date"/>
![Page 85: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/85.jpg)
![Page 86: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/86.jpg)
<formaction=""class="form"><divclass="form-group"><labelfor="email">*EmailAddress</label><inputid="email"type="email"class="form-control"placeholder="Email"required/></div><divclass="form-group"><labelfor="password">*Password</label><inputid="password"type="password"class="form-control"placeholder="Password"required/></div><divclass="form-group"><labelfor="tel">Tel</label><inputid="tel"type="tel"class="form-control"placeholder=" "/></div><div><buttonclass="btn"type="submit"> </button></div></form>
<labelfor="email"> inputid="email"
required
placeholder=" "type="submit"
![Page 88: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/88.jpg)
![Page 89: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/89.jpg)
![Page 90: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/90.jpg)
- inline- block- inline-block- none
![Page 91: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/91.jpg)
<p><strong>Sketch</strong>givesyouthepower,<strong>flexibility</strong>andspeedyoualwayswantedinalightweightandeasy-to-usepackage.Finallyyoucanfocusonwhatyoudobest:<strong>Design</strong>.</p>
![Page 92: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/92.jpg)
strong{display:block;color:orange;}
![Page 93: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/93.jpg)
strong{padding:10px;margin:10px;background-color:orange;}
strong{display:inline-block;padding:10px;margin:10px;background-color:orange;}
![Page 94: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/94.jpg)
![Page 95: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/95.jpg)
![Page 97: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/97.jpg)
![Page 98: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/98.jpg)
![Page 99: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/99.jpg)
$(document).ready(function(){
$('.button-toggle').click(function(e){
e.preventDefault();
$('.navbar-menu').toggleClass('active');
});
});
href="#"
![Page 101: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/101.jpg)
//jQuery
$(document).ready(function(){$('.button-toggle').click(function(e){e.preventDefault();$('.navbar-menu').toggleClass('active');});});
![Page 102: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/102.jpg)
![Page 103: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/103.jpg)
![Page 104: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/104.jpg)
![Page 105: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/105.jpg)
![Page 107: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/107.jpg)
![Page 108: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/108.jpg)
![Page 109: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/109.jpg)
![Page 110: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/110.jpg)
html,body{line-height:1.6;font-size:16px;color:#333;}p{margin-bottom:12px;}ul{list-style-type:disc;margin-bottom:12px;margin-left:1em;}
![Page 111: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/111.jpg)
Header,Footer
Header
Content
Footer
![Page 113: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/113.jpg)
![Page 114: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/114.jpg)
![Page 115: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/115.jpg)
![Page 116: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/116.jpg)
![Page 118: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/118.jpg)
![Page 119: 響應式網頁實作坊](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab301a28abda6a8b5801/html5/thumbnails/119.jpg)