3 / 27 高雄前端社群 響應式網頁實作坊 (Responsive web design workshop) 這是位於高雄前端社群的響應式網頁實作活動， 透過整天的課程，參與者將可以學會 RWD 網頁設計重要關鍵。

14. .box.left {
float: left;
height: 300px;
width: 50%;
}
.box.right {
float: right;
height: 300px;
width: 50%;
}
.wrap {
padding: 20px;
...
}

15. .box.left {
float: left;
height: 300px;
width: 50%;
}
.box.right {
float: right;
height: 300px;
width: 50%;
}

16. .box.left{
float: left;
height: 300px;
width: 50%;
}
.box.right {
float: right;
height: 300px;
width: 50%;
}

21. .box {
width: 200px;
height: 200px;
padding: 100px;
margin: 100px;
}

22. .box {
width: 200px;
height: 200px;
padding: 100px;
maring: 100px;
box-sizing: border-box;
}
box-sizing
padding

27. Menu Content
Header
Footer

31. Menu Content AD
Header
Footer

32. Menu Content AD
Header
Header
Header
Footer

33. Menu Content AD
Header
Footer

34. Menu
Content
Header

35. Menu
Content
Header

40. .col-**-* {
position: relative;
min-height: 1px;
}
padding-right: 15px;
padding-left: 15px;

45. @media not|only mediatype and (media feature) {
CSS-Code;
}
@media screen and (max-width: 600px) {
.col-onethird {
width: 100%;
}
}

46.
margin: 0 15px;

52. device-width
device-height
initial-scale
minimum-scale
maximum-scale
user-scalable

55. Menu Content AD
Header
Footer
Header
Content
Footer

56. Header
Content
Footer

58. @media not|only mediatype and (media feature) {
CSS-Code;
}

84. - <input type="date" />

86. <form action="" class="form">
<div class="form-group">
<label for="email">*Email Address</label>
<input id="email" type="email" class="form-control" placeholder="Email"
required/>
</div>
<div class="form-group">
<label for="password">*Password</label>
<input id="password" type="password" class="form-control"
placeholder="Password" required/>
</div>
<div class="form-group">
<label for="tel">Tel</label>
<input id="tel" type="tel" class="form-control" placeholder=" "/>
</div>
<div>
<button class="btn" type="submit"> </button>
</div>
</form>
<label for="email"> input id="email"
required
placeholder=" "
type="submit"

90. - inline
- block
- inline-block
- none

91. <p>
<strong>Sketch</strong> gives you the power, <strong>flexibility</
strong> and speed you always wanted in a lightweight and easy-to-use
package. Finally you can focus on what you do best: <strong>Design</
strong>.
</p>

92. strong {
display: block;
color: orange;
}

93. strong {
padding: 10px;
margin: 10px;
background-color: orange;
}
strong {
display: inline-block;
padding: 10px;
margin: 10px;
background-color: orange;
}

99. $(document).ready(function(){
$('.button-toggle').click(function(e){
e.preventDefault();
$('.navbar-menu').toggleClass('active');
});
});
href="#"

101. // jQuery
$(document).ready(function(){
$('.button-toggle').click(function(e){
e.preventDefault();
$('.navbar-menu').toggleClass('active');
});
});

110.
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;
}

111.
Header, Footer
Header
Content
Footer