Ngày nay việc thiết kế web đã trở nên quen thuộc và cần thiết cho mọi người. với những bạn không có điều kiện theo học các khóa học tại các trung tâm đào tạo vẫn có thể tự học và thiết kế website cho riêng mình. Từ các mẫu trang web ưa thích muốn chuyển nó thành giao diện Web cơ bản thì phải làm như thế nào? Tài liệu sẽ hướng dẫn từng bước chi tiết để các bạn có thể chuyển từ giao diện trong photoshop thành mẫu trang web một cách nhanh chóng mà không cần phải có kiến thức nhiều về lập trình web. Với tài liệu này bạn có thể vừa học, vừa thực hành thiết kế Web cơ bản, là nền tảng để bạn chuyển đổi giao diện trên các phần mềm thiết kế Web hiện nay. Đây là cách mà các nhà thiết kế Web hay làm. Sau khi đọc và thực hành theo tài liệu này chắc chắn bạn sẽ tự tay thiết kế cho mình một mẫu trang Web ưng ý và từng bước phát triển khả năng lập trình Web của bạn.
PSD sang HTML – NATURE LAYOUT Xin chào tất cả các bạn, rất vui được gặp lại các bạn trên izwebz, mình là Tommy. Lời đầu tiên tôi xin chân thành cảm ơn tất cả những comments góp ý cũng như ủng hộ của các bạn trong tutorial trước của tôi. Sau này tôi sẽ cố gắng làm thật nhiều tutorials hơn nữa để đáp lại sự ủng hộ nhiệt tình của các bạn. Trong tutorial thứ hai này, chúng ta sẽ convert từ PSD sang HTML một trang web môi giới du lịch. Dưới đây là giao diện lần này của chúng ta : Cấu trúc div của giao diện này được minh họa như hình sau : 1 2 Vì trong hình trên vẫn chưa thể hiện hết cấu trúc div nên mình xin nói thêm về việc chia div trong giao diện này. Đầu tiên mình có 2 div lớn là div#header_wrapper dùng bao quanh div#header và div#wrapper để bao quanh toàn bộ phần còn lại của trang web (mục đích mình để div#header_wrapper nằm ngoài div#wrapper thì đợi qua phần code CSS các bạn sẽ rõ), trong div#wrapper này gồm 2 div là div#primary và div#footer. Trong div#primary bao gồm 2 div là div#content và div#sidebar. Trong div#content gồm 2 div nhỏ là div#banner và div#post_content. Trong div#banner gồm 2 div nhỏ hơn nữa là div#slide và div#welcome. Trong div#post_content gồm các bài post, đối với mỗi post mình sẽ dùng 1 div với class là post_item. Trong div#sidebar mình sẽ dùng thêm một vài div nhỏ nữa là div#holiday, div#quick, div#newsletter và div#lastest_new. Cuối cùng là trong div#footer mình sẽ thêm một div nữa là div#info_footer. Bắt đầu đi xây dựng code HTML nào !!! Phần 1 : Mình viết các thẻ div trước : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Nature layout</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header_wrap"> <div id="header"> </div><! end #header > </div><! end #header_wrap > <div id="wrapper"> <div id="primary"> <div id="content"> <div id="banner"> </div><! end #banner > <div id="post_content"> </div><! end #post_content > </div><! end #content > <div id="sidebar"> </div><! end #sidebar > </div><! end #primary > <div id="footer"> </div><! end #footer > </div><! end #wrapper > </body> </html> Phần 2 : HEADER (demo) Cái phần header này cũng hao hao giống như phần header trong bài bussiness layout, mình sẽ cần một img với file hình logo.png (nằm trong tag a để sau này làm link về homepage) để làm logo. Sau đó cần 3 tag ul, ul#tel ghi thông tin về contact, ul#pages là các pages, ul#nav làm menu của trang. Phần code này bạn đặt trong div#header (nằm trong div#header_wrap) : <a href="#"><img src="images/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> 3 <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> Đó là phần div#header nằm trong div#header_wrap, chúng ta chuyển sang phần div#primary, đầu tiên là phần div#content : Phần 3 : CONTENT Trong div#content chúng ta gồm 2 div nhỏ : Bước 1 : BANNER (demo) Trong div#banner chúng ta gồm 2 div nhỏ : <div id="slide"> </div><! end #slide > <div id="welcome"> </div><! end #welcome > Thứ nhất là div#slide dùng để làm slider, mình cần 1 tag img với hình banner.jpg để làm hình slide, một div#new_tours để ghi thông tin bên phải hình banner, tuy nhiên ở đây mình lại bao quanh div#new_tours bằng 1 div#new_tours_wrap vì sau này code CSS mình sẽ set width cho div#new_tours_wrap rồi khi chỉnh margin, padding cho div#new_tours sẽ ko ảnh hưởng gì đến độ lớn của box div#new_tours_wrap. Đoạn code này trong div#slide : <img src="images/banner.jpg" alt="banner" /> <div id="new_tours_wrap"> <div id="new_tours"> <p id="our_new_tours">Our<span>New tours</span></p> <p id="intro"> Đến với <span class="uppercase">nature tours</span> bạn có thể tham quan hoặc tìm kiếm thông tin về các thắng cảnh ở bất kì nơi nào trên thế giới mà bạn muốn. <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><! end #new_tours > </div><! end #new_tours_wrap > Chuyển đến div#welcome chúng ta viết code như sau : <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="images/people.png" alt="people" /> </div><! end #welcome > Bước 2 : POST_CONTENT (demo) Đối với phần tabbed navigation (bạn thấy trong file PSD), mình dùng 1 tag ul#nav_post, đối với mỗi bài post mình sẽ bao quanh bằng div class là post_item, trong mỗi div.post_item gồm các tag là tag a img (mình lấy img làm link) để làm thumbnail cho mỗi bài post, tag h3 bao quanh tag a làm tiêu đề, cuối cùng là tag p cho đoạn paragraph. Trong div#post_content, bạn viết code như sau : <ul id="nav_post"> <li><a href="#">By Destination</a></li> 4 <li><a href="#">By Species</a></li> <li><a href="#">By Tour Type</a></li> </ul> <div class="post_item"> <a href="#"><img src="images/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><! end .post_item > <div class="post_item"> <a href="#"><img src="images/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><! end .post_item > <div class="post_item"> <a href="#"><img src="images/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><! end .post_item > <div class="post_item clear"> <a href="#"><img src="images/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><! end .post_item > <div class="post_item"> <a href="#"><img src="images/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><! end .post_item > <div class="post_item"> <a href="#"><img src="images/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><! end .post_item > Phần 4 : SIDEBAR Trong div#sidebar này, mình gồm 4 div nhỏ : <div id="holiday"> </div><! end #holiday > <div id="quick"> </div><! end #quick > <div id="newsletter"> </div><! end #newsletter > <div id="lastest_new"> </div><! end #lastest_new > Bước 1 : HOLIDAY (demo) Mình cần 1 tag h3, 1 tag p và 1 cái form : <h3 class="uppercase bold">Holiday search</h3> <p class="chosse">Chọn nơi bạn muốn tham quan :</p> <form action=""> <p><input type="text" value="Chọn khu vực " /></p> <p><input type="text" value="Chọn ngày du lịch " /></p> <p><input type="text" value="Chọn chủ đề " /></p> <p><input type="text" value="Chọn mức giá " /></p> <p><input type="submit" value="Search holidays" class="uppercase submit" /></p> </form> Bạn thấy với cái input submit tôi thêm class submit, vì sau này trong CSS tôi sẽ định dạng riêng cho các input này. Bước 2 : QUICK (demo) Phần div#quick cũng giống như div#holiday : <h3 class="uppercase bold">Quick search</h3> <p class="choose">Tìm thông tin nơi bạn tham quan :</p> 5 <form action=""> <p><input type="text" value="Country/Code " class="short" /></p> <p><input type="submit" value="Search" class="uppercase submit" /></p> </form> Bạn thấy với cái input submit tôi thêm class submit, vì sau này trong CSS tôi sẽ định dạng riêng cho các input này. Bước 2 : QUICK (demo) Phần div#quick cũng giống như div#holiday : <h3 class="uppercase bold">Quick search</h3> <p class="choose">Tìm thông tin nơi bạn 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> Lần này tôi lại cho trường input text có class là short vì bạn nhìn trong file PSD thì thấy những trường input này có width ngắn hơn những trường input khác. Bước 3 : NEWSLETTER (demo) <h3 class="uppercase bold">Newsletter search</h3> <p class="choose">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> Bước 4 : LASTEST_NEW (demo) Mình dùng một tag ul với id là new, đối với mỗi bài lastest post mình dùng 1 tag li, trong mỗi li gồm 1 tag h4 tiêu đề và đoạn tag p : <h3 class="uppercase">Lastest new</h3> <ul id="new"> <li> <h4><a href="#">Lorem ipsum dolor sit amet</a></h4> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut claritatem. Investigationes. </p> </li> <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> Phần 5 : FOOTER Trong div#footer mình gồm div#info_footer và ul#coryright : <div id="info_footer"> </div><! end #info_footer > <ul id="coryright"> </ul> Bước 1 : INFO_FOOTER (demo) Mình đặt tag h3 với id là title để làm cái đầu đề cho phần footer. Mình còn cần 1 tag ul#info để ghi các thông tin của phần footer : <h3 id="title"> Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. </h3> 6 <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="images/face.jpg" alt="facebook" /></a> </li> <li id="link"> <h3 class="uppercase bold">liên kết</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="#">Home</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Donate</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 </p> <p id="address"> Nature tours. Your city. <span>Your state. 123 456 789</span> </p> </li> </ul> Bước 2 : COPYRIGHT (demo) Trong ul này chỉ cần 2 list để ghi copyright và design : <ul id="coryright"> <li>© Nature tours 2013.</li> <li>Copyright and design by <span class="uppercase bold">izwebz.com</span>. All right reserved.</li> </ul> Vậy là xong code HTML, chúng ta được demo. Các bạn hãy tự validate code HTML nhé !!! Chúng ta chuyển sang phần tiếp theo là code CSS : Phần 1 : RESET CSS Phần reset này mình đã giải thích rất kĩ trong bài bussiness layout rồi nên bây giờ mình không nói lại nữa, nếu có gì không hiểu bạn có thể xem lại bài đó hoặc comment ở phía dưới để hỏi nha !!! html,body,div,span,h1,h2,h3,h4,h5,h6, p,a,font,img,b,u,i,ol,ul,li,fieldset,form { 7 margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { font-size: 62.5%; font-family: tahoma, arial, sans-serif; line-height: 2em; background: url(images/bg.jpg) repeat left top; } ol,ul {list-style: none;} a { text-decoration: none; } a:hover { text-decoration: underline; } a img { border: none; } img { vertical-align: center; } :focus { outline:0; } .uppercase { text-transform: uppercase; } .bold { font-weight: bold; } input[type="submit"]:hover { cursor: pointer; } #wrapper { width: 990px; margin: 0px auto; } Trong phần trên mình có thêm phần input[type="submit"]:hover vì mình muốn khi hover các input submit thì con trỏ có dạng bàn tay. Width của giao diện này là 990px nên mình đặt width cho div#wrapper là 990px (bạn lưu ý là div#wrapper không có phần header, lát nữa mình style cho phần header sau). Phần 2 : HEADER (demo) Mình bước sang div#header_wrap, bạn nhìn trong file psd thì thấy phần background dài ra hết cả giao diện luôn, nghĩa là mình sẽ dùng file header_bg.jpg làm background cho repeat-x hết cả màn hình, do đó set width cho nó là auto thì width sẽ dài ra hết chiều ngang màn hình, mà div#wrapper đã có width 990px rồi, chính vì vậy mình phải đặt div#header_wrap nằm ngoài div#wrapper. #header_wrap { width: auto; background: url(images/header_bg.jpg) repeat-x top left; } Đến div#header, mình sẽ cho width bằng với div#wrapper (990px), height là 150px (bằng chiều cao của file header_bg.jpg). Mình cho position là relative vì mình sẽ apply absolute position cho các thành phần con của nó : #header { width: 990px; height: 150px; margin: 0px auto; position: relative; } Đến phần logo a img và ul#tel, mình cho position là absolute : #header a img { position: absolute; top: 19px; left: 26px; 8 } #header ul#tel { position: absolute; top: 14px; right: 0px; } Trong ul#tel, mình chỉ định dạng text cho các list, bạn lưu ý là mình cho các tag a float right để nó nằm ngang như trong file PSD : #header ul#tel li { font-family: "tahoma", arial, sans-serif; font-size: 12px; color: #585755; } #header ul#tel li a { font-family: "Trebuchet MS", tahoma, arial, sans-serif; font-size: 20px; color: #373737; float: right; } #header ul#tel li a:hover { color: #18991e; } Trong phần code trên mình có sử dụng font Trebuchet MS, có thể máy bạn không có font này nên mình đã để nó vào trong source code luôn rồi !!! Đến ul#pages, mình cũng apply absolute position cho nó, còn các li thì mình cho display inline để cho nó nằm ngang : #header ul#pages { position: absolute; top: 70px; right: 0; } #header ul#pages li { display: inline; } Đến phần ul#pages li a, mình biến nó thành block để set height, các li lại nằm dọc nên mình cho float right. Mình set height và line-height là 27px (bằng với height của file pages_bg.jpg làm background khi hover cho tag a), định dạng text font-family, size, color, margin, padding và border radius cho giống với file PSD : #header ul#pages li a { display: block; 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 đó mình tạo hiệu ứng hover cho tag a và set background cho tag a đầu tiên : #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, mình cũng áp dụng absolute position, set width 100% để bằng width của phần div#header (tức bằng 990px). Về phần background, tôi set background là file menu_bg.jpg, ở đây mình dùng kĩ thuật sprite image. Mình cho background repeat-x với background-position là bottom left (phần dưới của tấm hình menu_bg.jpg). Cuối cùng là style về border và radius : #header ul#menu { position: absolute; top: 107px; left: 0; width: 100%; background: url(images/menu_bg.jpg) repeat-x bottom left; border-radius: 5px; behaviour: url(border-radius.htc); border-left: 1px solid #0c932f; border-right: 1px solid #0c932f; 9 } Đến li, mình cũng cho display inline : #header ul#menu li { display: inline; } Đến phần tag a, mình cũng style tương tự như phần ul#pages và định dạng thêm radius : #header ul#menu li a { display: block; float: left; padding: 0px 22px; height: 41px; line-height: 41px; font-family: "tahoma", arial, sans-serif; font-size: 15px; color: white; } #header ul#menu li:first-child a { border-radius: 5px 0px 0px 5px; behaviour: url(border-radius.htc); } Đến hiệu ứng hover, mình cũng dùng file menu_bg.jpg nhưng cho background-position là top left : #header ul#menu li a:hover { background: url(images/menu_bg.jpg) repeat-x top left; color: #0c932f; text-decoration: none; } Phần 3 : PRIMARY Một vài định dạng cơ bản cho div#primary như width 990px, margin top 33px, overflow hidden (vì mình sẽ float div#content và div#sidebar bên trong nó), cuối cùng là border radius : #primary { width: 990px; margin-top: 33px; overflow: hidden; border-radius: 6px; behaviour: url(border-radius.htc); } Bước 1 : CONTENT Mình cho div#content (trong div#primary) có width là 705px (mình đo trong photoshop), float là left, background white và padding 17px : #primary #content { width: 705px; float: left; background: white; padding: 17px; } Chuyển đến div#banner trong div#content, mình cho width 100% (bằng với width của div#content là 705px) : #primary #content #banner { width: 100%; } Với div#slide này mình cho width 100% (bằng với width của div#banner là 705px), height là 266px (đo trong photoshop), overflow hidden vì mình sẽ float các thành phần con của nó. Cuối cùng background color là cái màu đen có mã #251d14 : #primary #content #banner #slide { width: 100%; height: 266px; overflow: hidden; background: #251d14; } Đến cái hình slide img, tấm hình này có width là 470px và mình float left : #primary #content #banner #slide img { float: left; width: 470px; } Đến div#new_tours_wrap, mình muốn nó float right nên cần phải set width sao cho tổng các width của hình img và div#new_tours_wrap này bằng với width thành phần parent div#slide, tức có tổng là 705px. Như vậy mình lấy width của div#slide trừ width của div#slide img, tức lấy 705px – 470px = 235px, đó chính là width của div#new_tours_wrap : #primary #content #banner #slide #new_tours_wrap { 10 [...]... div#new_tours (nằm trong div#new_tours_wrap) : #primary #content #banner #slide #new_tours { padding: 15px; } Bạn lưu ý là nếu trong code HTML bạn không thêm div#new_tours_wrap và set width cho div#new_tours thì khi thêm padding vào width thật sự của nó sẽ không còn là 235px ở trên nữa mà sẽ cộng thêm cái padding 15px 2 bên left và right, kết quả là tổng width của div#slide img và div#new_tours sẽ... div#new_tours sẽ bị tràn, mà lại chịu thêm ảnh hưởng overflow: hidden của div#slide nên nó sẽ biến luôn Do vậy mình bắt buộc phải thêm div#new_tours_wrap bao ngoài div#new_tours, khi mình thêm bất cứ padding hay margin ở chỗ nào thì vẫn không ảnh hưởng đến width 235px của div#new_tours_wrap Đến p#our_new_tours nằm trong div#new_tours, mình định dạng text cho nó : #primary #content #banner #slide #new_tours... jerry2099tom@gmail.com hoặc bạn cũng có thể vào facebook của mình PSD sang HTML – BUSSINESS LAYOUT Trong bài tut này thì mình sẽ hướng dẫn bạn convert một giao diện website doanh nghiệp từ PSD sang HTML Tuy trên izwebz đã có vài tut về PSD sang HTML nhưng mình nghĩ đây là bước quan trọng trong thiết kế website nên nếu làm thêm vài tutorial nữa chắc cũng không sao 17 Đây là giao diện chúng ta sẽ làm... file psd để bạn xem thêm To n bộ các hình cần thiết mình đã slice hết rồi Phần đầu tiên, ta sẽ xây dựng code HTML : Bước 1 : Đầu tiên, chúng ta viết các thẻ div trước để định ra cấu trúc trang, các bạn hãy xem hình sau để hình dung ra cấu trúc của trang web : Theo hình trên, code của chúng ta như sau : ... text-transform: uppercase; } bold { font-weight: bold; } Cuối cùng là div#wrapper bao quanh to n bộ nội dung trang web Mình đã đo trong photoshop width và margin của nó : #wrapper { width: 960px; margin: 37px auto; } Sau bước reset này, chúng ta được kết quả như demo BƯỚC 2 : TOP_PAGES Bây giờ chúng ta bước sang style div#top_page : #top_page { background: white; position: relative; overflow: hidden; border-radius:... giống với design trong file PSD Đặt background là file readmore_bg.jpg, mình muốn nó lặp lại theo chiều ngang nên cho repeat-x Cuối cùng là thêm border và radius Bạn lưu ý mình chỉ cần border left và right thôi, còn border top và bottom thì trong hình background đã có rồi, do đó mình cho border top và bottom là none Tóm lại code của mình : #content post_item a.read_more { margin-top: 20px; display: block;... #new_tours p#our_new_tours { color: white; font-family: "tahoma", arial, sans-serif; font-size: 24px; line-height: 1.3em; } Đến cái span nằm trong p#our_new_tours, mình muốn nó nằm trên 1 hàng nên cho display: block, định dạng thêm color và size cho giống với file PSD Tương tự cái p#intro mình cũng định dạng text tương tự: #primary #content #banner #slide #new_tours p#our_new_tours span { display:... chuột và khi di chuột lên nó nữa nhỉ : #top_page p#telephone a { display: block; font-size: 18px; color: #c9c9c9; text-indent: 30px; margin: 6px 0px 6px 54px; background: transparent url(images/phone.png) no-repeat top left; } #top_page p#telephone a:hover { color: #585858; } Đến cái ul#pages, mình áp dụng position cho nó : #top_page ul#pages { position: absolute; bottom: 21px; right: 31px; } Đến li bên... position: absolute; top: 221px; left: 55px; width: 254px; height: 51px; line-height: 51px; background: url(images/started.jpg) repeat-x top left; text-indent: 26px; border-radius: 5px; behaviour: url(border-radius.htc); } Mục đích mình thêm span vào p#started trong HTML là để đặt background là cái hình mũi tên (bạn view file psd ấy) Mình sẽ biến nó thành block để chỉnh margin là auto cho nó, cho nó căn... "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Business . <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 18 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> < ;html xmlns="http://www.w3.org/1999/xhtml". <div id="new_tours_wrap"> <div id="new_tours"> <p id="our_new_tours">Our<span>New tours</span></p>