Doctype HTML Public

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.
org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled Document</title> </head> <body> <div id="header_wrap"> <div id="header"> <a href="#"><img src="../../../logo.png" alt="logo" /></a> <ul id="tel"> <li>Contact Us by the telephone number bellow</li> <li><a href="#">12 (0) 1234 567890</a></li> </ul> <ul id="pages"> <li><a href="#" class="uppercase bold">Home</a></li> <li><a href="#" class="uppercase bold">About</a></li> <li><a href="#" class="uppercase bold">Donate</a></li> <li><a href="#" class="uppercase bold">Videos</a></li> <li><a href="#" class="uppercase bold">Contact</a></li> </ul>
<ul id="menu">
<li><a href="#" class="uppercase bold">Home</a></li> <li><a href="#" class="uppercase bold">Donate</a></li> <li><a href="#" class="uppercase bold">About us</a></li> <li><a href="#" class="uppercase bold">Tour</a></li> <li><a href="#" class="uppercase bold">Nature</a></li> <li><a href="#" class="uppercase bold">Tips</a></li> <li><a href="#" class="uppercase bold">Contact us</a></li> </ul>
</div> </div>
<div id="wrapper"> <div id="primary"> <div id="content"> <div id="baner"> <div id="slide"> <img src="../../../banner.jpg" alt="banner" /> <div id="new_tours_wrap"> <div id="new_tours"> <p id="our_new_tours">our<span>new tourn</span></p> <p id="intro"> n vi <span class="uppercase">nature tours</span>bn c th tham quan hoc tm kim thng tin v cc thng cnh bt k ni no trn th gii m bn mun. <a href="#" class="read_more">Continue reading...</a> </p>
<ul id="nav slide"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </div> </div>
</div> <div id="welcome"> <h1 class="uppercase">Lorem ipsum dolor sit amet</h1> <p> Blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis <a href="#" class="bold">tutorials guides</a>. </p> <img src="../../../people.png" alt="people" /> </div>
</div> <div id="post_content"> <ul id="nav_post"> <li><a href="#">By Destination</a></li> <li><a href="#">By Species</a></li>
<li><a href="#">By Tour Type</a></li> </ul> <div class="post_item"> <a href="#"><img src="../../../post_item_1.jpg" alt="post_item" /></a> <h3><a href="#">Lorem ipsum dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p> </div> <div class="post_item"> <a href="#"><img src="../../../post_item_2.jpg" alt="post_item" /></a> <h3><a href="#">Sed diam nonummy</a></h3> <p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</p> </div> <div class="post_item"> <a href="#"><img src="../../../post_item_3.jpg" alt="post_item" /></a> <h3><a href="#">Nam liber tempor</a></h3> <p>Nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait.</p> </div> <div class="post_item"> <a href="#"><img src="../../../post_item_4.jpg" alt="post_item" /></a> <h3><a href="#">Ut wisi enim</a></h3> <p>Lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur.</p> </div> <div class="post_item"> <a href="#"><img src="../../../post_item_5.jpg" alt="post_item" /></a>
<h3><a href="#">Duis autem vel</a></h3> <p>Legere me lius quod ii est etiam processus dynamicus, qui seacula quarta decima et quinta decima. Modo typi luptatum zzril delenit augue.</p> </div> <div class="post_item"> <a href="#"><img src="../../../post_item_6.jpg" alt="post_item" /></a> <h3><a href="#">Eodem modo typi</a></h3> <p>Anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> </div> </div> </div> <div id="slidebar"> <div id="holiday"> <h3 class="uppercase bold">Holiday search</h3> <p class="chosse">chn ni bn mun tham quan</p> <form action=""> <p><input type="text" value="chn khu vc ... " /></p> <p><input type="text" value="chn ngy du lch ... " /></p> <p><input type="text" value="chn ch ... " /></p> <p><input type="text" value="chn mc gi ... " /></p> <p><input type="submit" value="Search holidays" class="uppercase submit" /></p> </form> </div> <div id="quick"> <h3 class="uppercase bold">quick sreach</h3>
<p class="chosse">Tm thng tin ni bn tham quan :</p>
<form action=""> <p><input type="text" value="Country/Code..." class="short" /></p> <p><input type="submit" value="search" class="uppercase submit" /></p> </form> </div> <div id="newslettle"> <h3 class="uppercase bold">Newsletter search</h3> <p class="chosse">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet :</p>
<form action=""> <p><input type="text" value="Country/Code ..." /></p> <p><input type="text" value="search" class="short" /></p> <p><input type="submit" value="Sign up" class="uppercase submit" /></p> </form> </div> <div id="lastest_new"> <h3 class="uppercase">Lastest new</h3> <ul id="new"> <li> <h4><a href="#">Lorem ipsum dolor sit amet</a></h4> <p> Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores. </p>
</li> <li> <h4><a href="#">Lorem ipsum dolor sit amet</a></h4> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero. </p> </li> </ul> </div>
</div> </div> <div id="footer"> <div id="intro_footer"> <h3 id="title"> orem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. </h3> <ul id="info"> <li id="twitter"> <h3 class="uppercase bold">Follow on twitter</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat </p> <a href="#"><img src="../../../face.jpg" alt="facebook" /></a>
</li>
<li id="link"> <h3 class="uppercase bold">lin kt</h3> <ul> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Duis autem</a></li> <li><a href="#">Typi non habent</a></li> <li><a href="#">Odio dignissim</a></li> <li><a href="#">Accumsan et</a></li> </ul> <ul> <li><a href="#">Dolor sit amet</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Typi non habent</a></li> <li><a href="#">Odio dignissim</a></li> <li><a href="#">Accumsan et</a></li> </ul> <ul> <li><a href="#">BBC Vietnamese</a></li> <li><a href="#">Quarta decima et</a></li> <li><a href="#">Legere me lius</a></li> <li><a href="#">Contact Us</a></li> </ul> </li>
<li id="contact"> <h3 class="uppercase bold">Contact Us</h3> <p id="tel_number"> <span class="bold">Tel :</span> 12345 67890 </p> <p id="email"> <span class="bold">Email :</span>jerry2099tom@gmail.com<script type="text/javascript"></script> </p> <p id="address"> Nature tours. Your city. <span>Your state. 123 456 789</span> </p> </li> </ul> </div> <ul id="coryrigh"> <li>© Nature tours 2013.</li> <li>Copyright and design by <span class="uppercase bold">izwebz.com</span>. All right reserved.</li> </ul> </div> </div>
</body> </html>
Phn 1 : RESET CSS

Phn reset ny mnh gii thch rt k trong bi bussiness layout ri nn by gi mnh khng ni li na, nu c g khng hiu bn c th xem li bi hoc comment pha di hi nha !!! html,body,div,span,h1,h2,h3,h4,h5,h6, 1 p,a,font,img,b,u,i,ol,ul,li,fieldset,form { 2 margin: 0; 3 padding: 0; 4 border: 0; outline: 0; 5 font-size: 100%; 6 vertical-align: baseline; 7 background: transparent; 8 } 9 10 body { 11 font-size: 62.5%; tahoma, arial, sans-serif; 12 font-family: line-height: 2em; 13 background: url(images/bg.jpg) repeat left top; 14 } 15 16 ol,ul {list-style: none;} 17 18 a { text-decoration: none; 19 } 20 21 a:hover { 22 text-decoration: underline; 23 } 24 img { 25 a border: none; 26 } 27 28 img { 29 vertical-align: center; 30 } 31 :focus { 32 outline:0; 33 } 34 35 .uppercase { 36 text-transform: uppercase; 37 } 38 .bold { 39 font-weight: bold; 40 }
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
input[type="submit"]:hover { cursor: pointer; } #wrapper { width: 990px; margin: 0px auto; }
Trong phn trn mnh c thm phn
input[type="submit"]:hover
v mnh mun khi hover
cc input submit th con tr c dng bn tay. Width ca giao din ny l 990px nn mnh t width cho div#wrapper l 990px (bn lu l div#wrapper khng c phn header, lt na mnh style cho phn header sau).
Phn 2 : HEADER (demo)

Mnh bc sang div#header_wrap, bn nhn trong file psd th thy phn background di ra ht c giao din lun, ngha l mnh s dng file header_bg.jpg lm background cho repeat-x ht c mn hnh, do set width cho n l auto th width s di ra ht chiu ngang mn hnh, m div#wrapper c width 990px ri, chnh v vy mnh phi t div#header_wrap nm ngoi div#wrapper. 1 #header_wrap { 2 width: auto; background: url(images/header_bg.jpg) repeat-x top left; 3 } 4 n div#header, mnh s cho width bng vi div#wrapper (990px), height l 150px (bng chiu cao ca file header_bg.jpg). Mnh cho position l relative v mnh s apply absolute position cho cc thnh phn con ca n : 1 #header { 2 width: 990px; height: 150px; margin: 0px auto; 3 position: relative; 4 } 5 n phn logo a img v ul#tel, mnh cho position l absolute : #header a img { 1 position: absolute; 2 top: 19px; left: 26px;
3 4 5 6 7 8 9
} #header ul#tel { position: absolute; top: 14px; right: 0px; }
Trong ul#tel, mnh ch nh dng text cho cc list, bn lu l mnh cho cc tag a float right n nm ngang nh trong file PSD : 1 2 #header ul#tel li { font-family: "tahoma", arial, sans-serif; 3 font-size: 12px; 4 color: #585755; 5 } 6 7 #header ul#tel li a { 8 font-family: "Trebuchet MS", tahoma, arial, sans-serif; font-size: 20px; 9 10 color: #373737; float: right; 11 } 12 13 #header ul#tel li a:hover { 14 color: #18991e; 15 } 16 Trong phn code trn mnh c s dng font Trebuchet MS, c th my bn khng c font ny nn mnh n vo trong source code lun ri !!! n ul#pages, mnh cng apply absolute position cho n, cn cc li th mnh cho display inline cho n nm ngang : 1 #header ul#pages { 2 position: absolute; 3 top: 70px; right: 0; } 4 5 #header ul#pages li { 6 display: inline; 7 } 8 n phn ul#pages li a, mnh bin n thnh block set height, cc li li nm dc nn mnh cho float right. Mnh set height v line-height l 27px (bng vi height ca file pages_bg.jpg lm background khi hover cho tag a), nh dng text font-family, size, color, margin, padding v border radius cho ging vi file PSD : 1 #header ul#pages li a { display: block; 2
3 4 5 6 7 8 9 10 11 12
float: left; height: 27px; line-height: 27px; font-family: "tahoma", arial, sans-serif; font-size: 13px; color: #209a28; border-radius: 4px; behaviour: url(border-radius.htc); padding: 0px 8px; margin-left: 14px; }
Sau mnh to hiu ng hover cho tag a v set background cho tag a u tin : 1 2 3 4 5
#header ul#pages li a:hover, #header ul#pages li:first-child a{ background: url(images/pages_bg.jpg) repeat-x top left; color: white; text-decoration: none; }
n ul#menu, mnh cng p dng absolute position, set width 100% bng width ca phn div#header(tc bng 990px). V phn background, ti set background l file menu_bg.jpg, y mnh dng k thut sprite image. Mnh cho background repeat-x vi background-position l bottom left (phn di ca tm hnh menu_bg.jpg). Cui cng l style v border v radius : 1 #header ul#menu { 2 position: absolute; 3 top: 107px; left: 0; 4 width: 100%; background: url(images/menu_bg.jpg) repeat-x bottom left; 5 border-radius: 5px; 6 behaviour: url(border-radius.htc); 7 border-left: 1px solid #0c932f; border-right: 1px solid #0c932f; 8 } 9 n li, mnh cng cho display inline : 1 2 3
#header ul#menu li { display: inline; }
n phn tag a, mnh cng style tng t nh phn ul#pages v nh dng thm radius : #header ul#menu li a { 1 display: block; 2 float: left; 3 padding: 0px 22px; 4 height: 41px; line-height: 41px; font-family: "tahoma", arial, sans-serif; 5
6 7 8 9 10 11 12 13
font-size: 15px; color: white; } #header ul#menu li:first-child a { border-radius: 5px 0px 0px 5px; behaviour: url(border-radius.htc); }
n hiu ng hover, mnh cng dng file menu_bg.jpg nhng cho background-position l top left : 1 #header ul#menu li a:hover { 2 background: url(images/menu_bg.jpg) repeat-x top left; color: #0c932f; 3 text-decoration: none; 4 } 5
Phn 3 : PRIMARY
Mt vi nh dng c bn cho div#primary nh width 990px, margin top 33px, overflow hidden (v mnh s float div#content v div#sidebar bn trong n), cui cng l border radius : 1 #primary { 2 width: 990px; 3 margin-top: 33px; overflow: hidden; 4 border-radius: 6px; 5 behaviour: url(border-radius.htc); 6 } 7
Bc 1 : CONTENT
Mnh cho div#content (trong div#primary) c width l 705px (mnh o trong photoshop), float l left, background white v padding 17px : 1 #primary #content { 2 width: 705px; 3 float: left; background: white; 4 padding: 17px; 5 } 6 Chuyn n div#banner trong div#content, mnh cho width 100% (bng vi width ca div#content l 705px) : 1 #primary #content #banner { width: 100%; 2 } 3
Vi div#slide ny mnh cho width 100% (bng vi width ca div#banner l 705px), height l 266px (o trong photoshop), overflow hidden v mnh s float cc thnh phn con ca n. Cui cng background color l ci mu en c m #251d14 : 1 #primary #content #banner #slide { 2 width: 100%; height: 266px; overflow: hidden; 3 background: #251d14; 4 } 5 n ci hnh slide img, tm hnh ny c width l 470px v mnh float left : 1 2 3 4
#primary #content #banner #slide img { float: left; width: 470px; }
n div#new_tours_wrap, mnh mun n float right nn cn phi set width sao cho tng cc width ca hnh img v div#new_tours_wrap ny bng vi width thnh phn parent div#slide, tc c tng l 705px. Nh vy mnh ly width ca div#slide tr width ca div#slide img, tc ly 705px 470px = 235px, chnh l width ca div#new_tours_wrap : 1 #primary #content #banner #slide #new_tours_wrap { 2 width: 235px; float: right; 3 } 4 By gi mnh thm padding cho div#new_tours (nm trong div#new_tours_wrap) : 1 #primary #content #banner #slide #new_tours { padding: 15px; 2 } 3 Bn lu l nu trong code HTML bn khng thm div#new_tours_wrap v set width chodiv#new_tours th khi thm padding vo width tht s ca n s khng cn l 235px trn na m s cng thm ci padding 15px 2 bn left v right, kt qu l tng width ca div#slide img v div#new_tourss ln hn width ca div#slide !!! Kt qu l div#new_tours s b trn, m li chu thm nh hngoverflow: hidden ca div#slide nn n s bin lun. Do vy mnh bt buc phi thmdiv#new_tours_wrap bao ngoi div#new_tours, khi mnh thm bt c padding hay margin ch no th vn khng nh hng n width 235px ca div#new_tours_wrap. n p#our_new_tours nm trong div#new_tours, mnh nh dng text cho n : #primary #content #banner #slide #new_tours p#our_new_tours { 1 color: white; 2 font-family: "tahoma", arial, sans-serif;
3 4 5 6 7
font-size: 24px; line-height: 1.3em; }
n ci span nm trong p#our_new_tours, mnh mun n nm trn 1 hng nn cho display: block, nh dng thm color v size cho ging vi file PSD. Tng t ci p#intro mnh cng nh dng text tng t: 1 #primary #content #banner #slide #new_tours p#our_new_tours span { 2 display: block; 3 color: #28b028; 4 font-size: 32px; 5 } 6 #primary #content #banner #slide #new_tours p#intro { 7 color: white; 8 font-family: "arial", tahoma, sans-serif; 9 font-size: 12px; 10 margin: 13px 0px 27px 0px; 11 } 12 n a.read_more, mnh ch to hiu ng hover : 1 #primary #content #banner #slide #new_tours p#intro a.read_more { 2 color: #28b028; 3 display: block; } 4 5 #primary #content #banner #slide #new_tours p#intro a.read_more:hover { 6 color: #5383fd; 7 } 8 Chuyn sang ul#nav_slide, mnh s bin cc li ca n thnh inline. n tag a trong li, cc thuc tnh nh dng mnh gii thch nhiu ri nn gi khng gii thch na, chng ta lt nhanh qua nh : #primary #content #banner #slide #new_tours ul#nav_slide li { 1 display: inline; 2 } 3 4 #primary #content #banner #slide #new_tours ul#nav_slide li a { 5 display: block; 6 float: left; width: 21px; height: 22px; 7 text-align: center; line-height: 22px; 8 font-family: "arial", tahoma, sans-serif; 9 font-size: 12px; 10 color: #cbcbcb; 11 background: transparent url(images/nav_banner_bg.png) no-repeat top left; 12 margin-right: 9px;
13 14 15 16 17 18 19 20 21 22
} #primary #content #banner #slide #new_tours ul#nav_slide li a:hover { width: 27px; height: 26px; line-height: 26px; background: transparent url(images/nav_banner_bg_hover.png) no-repeat top left; text-decoration: none; }
Vy l xong phn div#slide nm div#banner, mnh chuyn sang phn div cn li l div#welcome, mnh cho position l relative v margin top l 30px : 1 #primary #content #banner #welcome { 2 position: relative; margin-top: 30px; 3 } 4 n tag h1, mnh n thun cng ch cn style text nh font-family, size v color : 1 2 3 4 5
#primary #content #banner #welcome h1 { font-family: "tahoma", arial, sans-serif; font-size: 24px; color: #444137; }
Ci tag p cng tng t, y mnh cho thm width l 470px v mnh khng mun width ca n di ra bng ci div#banner : 1 #primary #content #banner #welcome p { 2 font-family: "arial", tahoma, sans-serif; 3 font-size: 12px; color: #595447; margin-top: 19px; 4 width: 470px; 5 } 6 Sau to hiu ng hover cho ng link a trong p : 1 2 3 4 5 6 7
#primary #content #banner #welcome p a { color: #28b028; } #primary #content #banner #welcome p a:hover { text-decoration: underline; }
Cn phn tag img, mnh cho n position: absolute, gi tr top -50px th thay v b y xung ci img s b y ln trn, nm vo phn div#banner (ging vi file PSD) : #primary #content #banner #welcome img { 1 position: absolute;
2 3 4
top: -50px; right: 46px; }
Xong phn div#banner, bn xem demo phn ny. Chng ta chuyn sang div#post_content !!! Set margin top div#post_content cch ra vi div#banner : 1 #primary #content #post_content { margin-top: 4px; 2 } 3 n ul#nav_post, mnh cho overflow hidden v s float cc tag a ca n, sau thm radius, cn cc li mnh mun n nm ngang nn cho n display thnh inline : 1 #primary #content #post_content ul#nav_post { 2 overflow: hidden; 3 border-radius: 6px; 4 behaviour: url(border-radius.htc); } 5 6 #primary #content #post_content ul#nav_post li { 7 display: inline; 8 } 9 By gi n tag a, cng style tng t nh my ln trc thi, lu khi set background mnh s dngsprite image nh : 1 #primary #content #post_content ul#nav_post li a { 2 display: block; 3 float: left; 4 font-family: "Trebuchet MS", tahoma, arial, sans-serif; 5 font-size: 18px; color: #444137; 6 width: 230px; height: 39px; 7 text-align: center; line-height: 39px; 8 background: url(images/nav_postitem_bg.jpg) repeat-x top left; 9 border-right: 1px solid #dad9d3; 10 } 11 Mnh cn cn thm border radius cho ci li u tin v cui cng, tng ng vi 2 b chn li:first-child a v li:last-child a : 1 #primary #content #post_content ul#nav_post li:first-child a { border-radius: 6px 0px 0px 6px; 2 behaviour: url(border-radius.htc); 3 } 4 5 #primary #content #post_content ul#nav_post li:last-child a { 6 border-radius: 0px 6px 6px 0px; behaviour: url(border-radius.htc); 7 } 8
9 Cui cng l to hiu ng hover cho tag a : 1 2 3 4 5 6

#primary #content #post_content ul#nav_post li a:hover, #primary #content #post_content ul#nav_post li:first-child a { background: url(images/nav_postitem_bg.jpg) repeat-x bottom left; color: white; text-decoration: none; }
Chuyn sang style phn div.post_item, u tin l margin, ri n width, bn cn set width v margin mt cch thch hp sao cho c 3 div s nm trn cng mt hng, qun mt, nm trn mt hng th phi float ch !!! 1 #primary #content #post_content div.post_item { 2 margin-top: 26px; 3 margin-right: 13px; width: 222px; 4 float: left; 5 } 6 Tuy nhin ci div.post_item th 4 n li nm mt cch tro ho ging nh demo, l do v n b nh hng ca thuc tnh float. By gi mnh mun div ny xung hng mi, c ngha cn phi b nh hng ca ci float, tc l dng thuc tnh clear. Mnh float cc div v pha left nn phi cho div.post_item th 4ny clear l left. Nhng vn cha gii quyt xong, mnh mi ch fix c ci div th 4 thi, cn l nh sau ny bn a giao din ny vo CMS s dng th li b rt nhiu div sau ny na. khc phc n tho phn ny, trong phn vit code HTML, mnh s thm vo cc th div cn clear c class l clear : 1 #primary #content #post_content div.clear /*div.post_item*/ { clear: left; 2 } 3 n phn img ca mi post, mnh cho radius, padding v background cho ging vi file PSD : 1 2 3 4 5 6
#primary #content #post_content div.post_item img { border-radius: 6px; behaviour: url(border-radius.htc); padding: 5px; background: #e9e6df; }
Okay, n phn h3 tiu v on vn p th mnh style text ging nhau v font-family, size, color v margin, sau to hiu ng hover cho h3 :
1 2 3 4 5 6 7 8 9 10 11
#primary #content #post_content div.post_item h3 a, #primary #content #post_content div.post_item p { font-family: "arial", tahoma, sans-serif; font-size: 14px; color: #3a3731; margin-left: 5px; } #primary #content #post_content div.post_item h3 a:hover { color: #0c932f; }
Mnh cn nh dng li tag p mt cht cho ging vi phn design : 1 2 3 4

#primary #content #post_content div.post_item p { font-size: 12px; margin-top: 10px; }
Bn xem demo phn post_content.
Bc 2 : SIDEBAR (demo)
Vi div#sidebar ny, mnh set background l #f4f2ec, mnh cn float right (div#content mnh cho float left), tuy nhin vn y l mnh cn xc nh c width ca n khi float right th n khng b chui xung di. Ta thy rng width div#sidebar = width div#primary width div#content, tuy nhin ci vn y l khi style mnh cho rt nhiu padding v margin cho cc div ny nn cn phi xc nh c ln tht s ca chng. Tht ra bn c th xem qua tt c cc thnh phn cng cc margin v padding ca chng li ra width, nhng lm vy n rt mt thi gian. C mt cch nhanh hn l dng jQuery !!! u tin, tt nhin l bn phi thm vo th head trong code HTML mt
th script link ti th vin jQuery bt k, v mt th scriptgm code ca mnh : 1 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/j <script type="text/javascript"> 2 3 </script> 4 Sau chng ta vit code nh sau : 1 2 3 4 5 6
<script type="text/javascript"> $(document).ready(function(){ var w_pri = $('#primary').outerWidth(); alert(w_pri); }); </script>
Trong on code jQuery trn, mnh hng n i tng l div#primary vi phng thc l outerWidth, c ngha l s ly ci width ca n bao gm tt c padding v margin, kt qu gn vo bin w_pri v alert chng ra mn hnh. Bn load li trang th n in ra s 990, tc width ca div#primary l 990px. Lm tng t xc nh width ca div#content : 1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 //var w_pri = $('#primary').outerWidth(); 4 //alert(w_pri); 5 var w_con = $('#primary #content').outerWidth(); 6 alert(w_con); 7 }); 8 </script> 9 Kt qu ca on code trn l trnh duyt alert ra 739, tc width ca div#content. T ta tnh c width ca div#sidebar bng 990px 739px = 251px. 1 #sidebar { 2 background: #f4f2ec; width: 251px; 3 float: right; 4 } 5 Mnh s thm padding cho tt c cc div con ca div#sidebar (gm 4 div l div#holiday, div#quick,div#newsletter v div#lastest_new) : 1 #sidebar #holiday, 2 #sidebar #quick, 3 #sidebar #newsletter, #sidebar #lastest_new { 4 padding: 20px; 5 } 6 Cc tag h3 trong div#sidebar mnh style ging nhau : 1 #sidebar h3 { 2 font-family: "Trebuchet MS", tahoma, arial, sans-serif; font-size: 14px; color: #3f3b30; 3 } 4 Trong phn code HTML, mnh c cho mt s tag p c class l choose, by gi mnh style cho n : 1 #sidebar p.choose { 2 font-family: "arial", tahoma, sans-serif; font-size: 12px; color: #3f3b30; 3 margin-top: 10px; 4 } 5
Chuyn sang cc tag input trong cc form, mt vi thuc tnh nh margin, font, th mnh xin b qua, ch yu l phn width th l 202px (ci ny phi o tron g photoshop), v height th mnh cho height l 25px bng height ca hnh input_bg.jpg, sau mnh set background l file input_bg.jpg cho repeat-x : 1 #sidebar form input { 2 margin-top: 19px; 3 width: 202px; height: 25px; line-height: 25px; 4 background: url(images/input_bg.jpg) repeat-x top left; 5 font-family: "arial", tahoma, sans-serif; 6 font-size: 11px; color: #999; 7 border: 1px solid #cfcdc5; 8 border-radius: 5px; 9 behaviour: url(border-radius.htc); 10 text-indent: 7px; 11 } 12 Mnh mun khi ngi dng click vo input th mu ch thay i, do phi dng b chn input:focus : 1 #sidebar form input:focus { color: #231f20; 2 } 3 By gi mnh style tip cho nhng ci input submit (mnh thm class l submit), u tin l input submit nm trong div#holiday. Mnh s dng file s_holidays_bg.jpg lm background cho n, mnh cn chnh li mt vi th nh width, height, font, : 1 #sidebar #holiday form input.submit { 2 width: 196px; height: 34px; 3 text-align: left; 4 line-height: 34px; text-indent: 12px; 5 border: none; background: url(images/s_holidays_bg.jpg) no-repeat top left; 6 font-family: "Trebuchet MS", tahoma, arial, sans-serif; 7 font-size: 15px; 8 color: white; 9 } 10 n cc input submit trong div#quick, div#newsletter, mnh dng file submit.jpg lm background v chnh li mt vi th ging nh trn : 1 #sidebar #quick input.submit, #sidebar #newsletter input.submit { 2 text-align: left; 3 height: 28px; line-height: 28px; 4 background: url(images/submit.jpg) repeat-x top left; 5 font-family: "Trebuchet MS", tahoma, arial, sans-serif; font-size: 15px; 6 color: white; 7
8 9 10
width: auto; }
Tip n input vi class l short, chng c width ngn hn cc input khc : 1 #sidebar form input.short { 2 width: 118px; float: left; 3 margin-right: 10px; 4 } 5 Phn cui ca div#sidebar l div#lastest_new, tag h3 th mnh khng cn style, ch c phn ul#new thi, cng ch mt vi style n gin v text, mnh cng ni nhiu ri nn gi xin lt qua lun phn ny (bi vit di qu cng hi mi tay, hihihihi :D) : 1 2 #sidebar #lastest_new ul#new li { margin-top: 20px; 3 } 4 5 #sidebar #lastest_new ul#new li h4 a, #sidebar #lastest_new ul#new li p { 6 font-family: "arial", tahoma, sans-serif; 7 font-size: 14px; 8 color: #3f3b30; } 9 10 11 #sidebar #lastest_new ul#new li h4 a:hover { color: #0c932f; 12 } 13 14 #sidebar #lastest_new ul#new li p { 15 font-size: 12px; 16 } 17 Mnh lm ht phn div#primary cha nh ? Vn cn mt vn na cn phi gii quyt, l 2 div content v sidebar c height khng bng nhau. Rt n gin, y mnh s p dng k thut faux columnvi file faux_column.jpg, bn quay li phn div#primary trn v g thm dng lnh nh sau l s khc phc c ci ny : 1 #primary { background: url(images/faux_column.jpg) repeat-y top left; 2 } 3 Chng ta chuyn qua phn cui cng ca giao din !!!
Phn 4 : FOOTER
Div#footer th c width l 990px v thm margin top : #footer { 1
2 3 4
width: 990px; margin-top: 20px; }
Bc 1 : INFO_FOOTER (demo)
Mnh thm background v border radius cho div#info_footer : 1 #footer #info_footer { 2 background: #f4f2ec; border-radius: 6px; 3 behaviour: url(border-radius.htc); 4 } 5 Vi tag h3#title, mnh cho width bng vi width ca div#info_footer lun, height l 41px (bng height ca file footer_title.jpg), mnh mun dng ch in nghing nn cho font-style: italic, tag h3 mc nh l in m, mnh mun b i ci in m ny nn cho font-weight: normal : 1 #footer #info_footer h3#title { 2 width: 990px; text-align: center; 3 height: 41px; line-height: 41px; 4 font-family: "arial", tahoma, sans-serif; 5 font-size: 16px; font-style: italic; font-weight: normal; background: url(images/footer_title.jpg) repeat-x top left; 6 color: white; 7 border-radius: 6px 6px 0px 0px; 8 behaviour: url(border-radius.htc); 9 } 10 Mnh s overflow: hidden v mnh s float cc li con ca n : 1 #footer #info_footer ul#info { overflow: hidden; 2 } 3 Mnh float left v thm border right cho cc li con ca ul#info, do cn dng b chn ul#info > li : 1 #footer #info_footer ul#info > li { 2 float: left; border-right: 1px solid #d8d6ce; 3 } 4 Tip theo mnh style cho cc tag h3 v p trong tng li : 1 2 3 4 5 6 7
#footer #info_footer ul#info li h3 { font-family: "tahoma", arial, sans-serif; font-size: 14px; color: #64522a; } #footer #info_footer ul#info li p { font-family: "arial", tahoma, sans-serif;
8 9 10 11
font-size: 11px; color: #757268; }
By gi mnh style cho tng li con mt ca ul#info. Theo nh design trong PSD, mnh cn chnh width, margin v padding thch hp cho cc li chng nm trn mt hng khi c float nh mnh lm trn. u tin l ul#info li#twitter, mnh set width, margin, padding right v cho lun padding cho tag p ca n : 1 #footer #info_footer ul#info li#twitter { 2 width: 230px; 3 margin: 17px; 4 padding-right: 10px; } 5 6 #footer #info_footer ul#info li#twitter p { 7 margin: 13px 0px 18px 0px; 8 } 9 Vi ul#info li#link, mnh thm margin v padding, ngoi ra cn cho thm overflow l hidden v mnh s float cc tag ul ca n : 1 #footer #info_footer ul#info li#link { 2 overflow: hidden; margin: 17px; 3 padding-right: 10px; 4 } 5 Mnh style cho cc ul ca li#link, mt vi style c bn nn c l mnh khng cn ni nh : #footer #info_footer ul#info li#link ul { 1 float: left; 2 margin-right: 70px; 3 margin-top: 14px; 4 } 5 #footer #info_footer ul#info li#link ul li { 6 line-height: 20px; 7 } 8 9 #footer #info_footer ul#info li#link ul li a { 10 font-family: "arial", tahoma, sans-serif; 11 font-size: 12px; 12 color: #757268; 13 } 14 #footer #info_footer ul#info li#link ul li a:hover { 15 color: black; 16 }
17 18 19 Cui cng l ul#info li#contact : 1 #footer #info_footer ul#info li#contact { 2 margin: 17px; 3 border: none; } 4 5 #footer #info_footer ul#info li#contact p#address { 6 margin: 30px 0px 0px 0px; 7 } 8 Vi tag span trong p#address, mnh mun n nm ring trn mt hng nn bin n thnh block : 1 #footer #info_footer ul#info li#contact p#address span { display: block; 2 } 3
Bc 2 : COPYRIGHT (demo)
Phn cui cng ca layout ny phn ul#coryright, mnh thm margin v text-align l center v mun tt c text ca n u cn chnh ra gia : 1 #footer ul#coryright { 2 text-align: center; margin-top: 16px; 3 margin-bottom: 36px; 4 } 5 Cui cng l style text cho li : 1 2 3 4
#footer ul#coryright li { font-family: "arial", tahoma, sans-serif; font-size: 11px; }

Doctype HTML Public

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Doctype HTML Public

Uploaded by

Copyright:

Available Formats

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.

</div> </div>

<p class="chosse">Tm thng tin ni bn tham quan :</p>

Phn 1 : RESET CSS

input[type="submit"]:hover { cursor: pointer; } #wrapper { width: 990px; margin: 0px auto; }

Trong phn trn mnh c thm phn

v mnh mun khi hover

Phn 2 : HEADER (demo)

} #header ul#tel { position: absolute; top: 14px; right: 0px; }

font-size: 24px; line-height: 1.3em; }

top: -50px; right: 46px; }

9 Cui cng l to hiu ng hover cho tag a : 1 2 3 4 5 6

Mnh cn nh dng li tag p mt cht cho ging vi phn design : 1 2 3 4

Bn xem demo phn post_content.

width: 990px; margin-top: 20px; }

font-size: 11px; color: #757268; }

You might also like