http://fb.me/chihcheng.wang.3

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

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

.wrap{padding:20px; ...}

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

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

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

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

http://codepen.io/Wcc723/pen/bpVPGQ

http://codepen.io/Wcc723/pen/yOYdNB?editors=1100

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

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

box-sizing

padding

http://aia.org

Menu Content

Header

Footer

http://codepen.io/Wcc723/pen/VapKme

Menu Content AD

Header

Footer

Menu Content AD

Header

Header

Header

Footer

Menu Content AD

Header

Footer

Menu

Content

Header

Menu

Content

Header

http://codepen.io/Wcc723/pen/PNPrby

.col-**-*{position:relative;min-height:1px;

}

padding-right:15px;padding-left:15px;

http://codepen.io/Wcc723/pen/MyaMpw

@medianot|onlymediatypeand(mediafeature){CSS-Code;}

@mediascreenand(max-width:600px){.col-onethird{width:100%;}}

margin:015px;

http://codepen.io/Wcc723/pen/JXYQry

device-width

device-height

initial-scale

minimum-scale

maximum-scale

user-scalable

http://codepen.io/Wcc723/pen/pyymLL

Menu Content AD

Header

Footer

Header

Content

Footer

Header

Content

Footer

http://s.codepen.io/Wcc723/debug/bppyMR

@medianot|onlymediatypeand(mediafeature){CSS-Code;}

http://stephen.io/mediaqueries/

- <inputtype="date"/>

<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"

http://codepen.io/Wcc723/pen/XdmLVp

- inline- block- inline-block- none

<p><strong>Sketch</strong>givesyouthepower,<strong>flexibility</strong>andspeedyoualwayswantedinalightweightandeasy-to-usepackage.Finallyyoucanfocusonwhatyoudobest:<strong>Design</strong>.</p>

strong{display:block;color:orange;}

strong{padding:10px;margin:10px;background-color:orange;}

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

http://codepen.io/Wcc723/pen/BKzgeP

$(document).ready(function(){

$('.button-toggle').click(function(e){

e.preventDefault();

$('.navbar-menu').toggleClass('active');

});

});

href="#"

http://codepen.io/Wcc723/pen/NNrQqo

//jQuery

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

https://fortawesome.github.io/Font-Awesome/

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

Header,Footer

Header

Content

Footer

http://codepen.io/Wcc723/pen/mPENBG

http://codepen.io/Wcc723/pen/xVOvBp