5 HTML CSS HTML CSS Ê Ê Ê Ê
5-1 nav css 5-2
5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3
style.css css 03 CH5/5-01/images 04 images index.html style.css 05 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> 5-01</title> <link href="css/style.css" rel="stylesheet" type="text/css"/> </head> <body> </body> </html> 5-4
5-1 5 HTML Sublime Text 5-1-2 wrapper index.html body id wrapper div 01 <body> <div id="wrapper"> </body> wrapper style.css 02 *{ margin: 0px; padding: 0px; body{ background-color: beige; font-family: Microsoft JhengHei; #wrapper{ margin: 0px auto; width: 1024px; 5-5
* margin padding margin padding 0px font-family: Microsoft JhengHei margin: 0px auto wrapper div wrapper wrapper 0px auto wrapper header id content div footer 03 <div id="wrapper"> <header></header> <divid="content"> <footer></footer> header content footer 5-1-3 header header id logo div 01 <header> <div id="logo"> </header> 5-6
5-1 5 id logo div img 02 <header> <div id="logo"> <img src="images/banner.jpg"/> </header> images banner.jpg id logo div 03 #logo{ height: 250px; logo 250px banner.jpg 250px header nav 04 <header> <div id="logo"> <img src="images/banner.jpg" /> <nav> </nav> </header> nav 5-7
nav 05 nav{ background-color: #B63D32; text-align: center; #B63D32 background-color: #B63D32 nav text-align nav nav ul li li a 06 <nav> <ul> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> </ul> </nav> ul li 07 ul{ display: inline-block; margin: 0px; li{ list-style-type: none; float: left; text-align: center; 5-8
5-1 5 li a{ display: block; padding: 15px 20px; color: #FFFFFF; text-decoration: none; li a:hover{ color: #FFC90E; display block inline block inline inline-block inline width height ul display block display inline-block ul nav list-style-type none hover li a #FFC90E index.html header 08 5-9
5-1-4 content content id content_in div 01 <header> <div id="logo"> <img src="images/banner.jpg" /> <nav> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> <li><a href="#"> </a></li> </nav > </header> <div id="content"> <div id="content_in"> content_in content content_in content content_in 02 #content_in{ padding: 30px 50px; text-align: center; background-color: #F4F4ED; 5-10
5-1 5 padding: 30px 50px 30px 50px content_in content_in padding content_in padding content_in h1 03 <div id="content"> <div id="content_in"> <h1> </h1> h1 04 #content h1{ color: #B63D32; margin-bottom: 10px; color: #B63D32 h1 margin-bottom h1 10px h1 h1 10px 5-11
h1 p 05 <div id="content"> <div id="content_in"> <h1> </h1> <p></p> <p></p> <p></p> <p></p> p 06 #content_in p{ font-size: 15px; margin-bottom: 20px; font-size margin-bottom p p 07 <div id="content"> <div id="content_in"> <h1> </h1> <p> ( )</p> <p> ( )</p> <p> ( )</p> <p> ( )</p> 5-12
5-1 5 p a 08 <div id="content"> <div id="content_in"> <h1> </h1> <p> ( )</p> <p> ( )</p> <p> ( )</p> <p> ( )</p> <a href="#"> </a> a 09 #content_in a{ display: block; width: 130px; height: 40px; line-height: 40px; margin: 0 auto; text-decoration: none; background-color: #B63D32; color: #FFFFFF; a display inline a a display block a 130px 40px a a line-height a height 40px a text-decoration textdecoration none 5-13
index.html content 10 5-1-5 footer footer p 01 <footer> <p>copyright 2017 Itoeat All rights reserved.</p> </footer> footer 02 footer{ background-color: #71552A; text-align: center; footer p{ font-size: 10px; color: #FFFFFF; padding: 10px 0px; 5-14
5-2 5 padding: 10px 0px 10px 0px p 10px index.html footer 03 5-2 5-1 5-3 5-15
5-2-1 Media Queries style.css 1024px 01 wrapper 80% @media screen and ( max-width: 1024px) { #wrapper{ width: 80%; 640px li a 02 10px @media screen and ( max-width: 640px) { li a{ padding: 10px; 5-2-2 Viewport index.html head Viewport 01 <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> 5-02</title> <link href="css/style.css" rel="stylesheet" type="text/css"/> <meta name="viewport" content="width=device-width; initial-scale=1.0"> </head> 5-16
5-2 5 5-2-3 img style.css logo img 100% 01 #logo img{ width: 100%; img 100% 5-2-4 style.css logo 01 logo 02 img 100% img img logo logo height 5-17
03 index.html 5-18
5-4 position form input checkbox button 5-30
5-4 5 5-4-1 5-04 css images 01 index.html 02 style.css css 03 index.html style.css 04 <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> 5-04</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> 5-31
5-4-2 wrapper index.html body id wrapper div 01 <body> <div id="wrapper"> </body> style.css 02 *{ margin: 0px; padding: 0px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; body{ background-color: beige; font-family: Microsoft JhengHei; #wrapper { width: 350px; height: 250px; border-radius: 3px; border: 1px solid #ccc box-sizing: border-box padding border box-sizing: border-box padding border box-sizing -webkit- -moz- 5-32
5-4 5 box-sizing: border-box padding border box-sizing: border-box padding border box-sizing -webkit- -moz- border-radius: 3px 3px border: 1px solid #ccc 1px solid #ccc border-width:1px border-style:solid border-color:#ccc css wrapper 03 <body> <div id="wrapper"> <header></header> <div="content"> </body> 5-4-3 header header p 01 <div id="wrapper"> <header> <p> </p> </header> <div="content"> 5-33
style.css header 02 header { background-color: #ECECEC; padding: 10px 15px; index.html header 03 5-4-4 content content form 01 <div id="wrapper"> <header> <p> </p> </header> <div="content"> <form> </form> 5-34
5-4 5 content 02 #content { padding: 15px; form class form-group div 03 <div id="content"> <form> <div class="form-group"> </form> form-group 04.form-group { margin-bottom: 15px; form-group input form-control 05 <div id="content"> <form> <div class="form-group"> <input class="form-control" placeholder="e-mail" name="email" type="email"> </form> 5-35
input placeholder type placeholder type : password email button class form-group div 06 <div id="content"> <form> <div class="form-group"> <input class="form-control" placeholder="e-mail" name="email" type="email"> <div class="form-group"> </form> form-group input form-control 07 <div id="content"> <form> <div class="form-group"> <input class="form-control" placeholder="e-mail" name="email" type="email"> <div class="form-group"> <input class="form-control" placeholder="password" name="password" type="password"> </form> 5-36
5-4 5 form-control 08 input.form-control{ display: block; width: 100%; height: 34px; font-size: 14px; color: #555555; background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 4px; padding: 5px; input.form-control padding: 5px class form-control input 5px form class checkbox div 09 <div id="content"> <form> <div class="form-group"> <input class="form-control" placeholder="e-mail" name="email" type="email"> <div class="form-group"> <input class="form-control" placeholder="password" name="password" type="password"> <div class="checkbox"> </form> 5-37
class checkbox div label 10 <div class="checkbox"> <label> </label> label input 11 <div class="checkbox"> <label> <input name="remember" type="checkbox"> </label> input type checkbox input label label input 12 index.html content 5-38
5-4 5 class btn button 13 <div class="checkbox"> <label> <input name="remember" type="checkbox"> </label> <button type="submit" class="btn"> </button> btn 14.btn{ display: block width: 100%; color: #FFFFFF; background-color: #B63D32; padding: 10px; text-decoration: none; border-radius: 3px; margin-top: 15px; text-align: center; button input btn display: block btn 100% text-decoration: none margin-top:15px 15px text-align: center 5-39
index.html content 15 5-4-5 div wrapper 01 #wrapper{ width: 350px; height: 250px; border-radius: 3px; border: 1px solid #ccc; position wrapper 02 #wrapper{ width: 350px; height: 250px; border: #CCCCCCsolid 1px; border-radius: 3px; position: absolute; top: 50%; left: 50%; 5-40
5-4 5 wrapper position: absolute wrapper wrapper wrapper top left top 50% body 50% left 50% body 50% index.html 03 top left 50% wrapper wrapper margin-top margin-left 5-41
margin-top margin-left wrapper 04 #wrapper{ width: 350px; height: 250px; border: #CCCCCC solid 1px; border-radius: 3px; position: absolute; top: 50%; left: 50%; margin-top: -125px; margin-left: -175px; wrapper 250px margin-top wrapper 125px wrapper margin-top: -125px wrapper 350px margin-left wrapper 175px wrapper margin-left: -175px 05 index.html wrapper 5-42