Xin chào tất cả các bạn. Mình là Tommy, là người mới của izwebz. Đây là bài tutorial đầu tiên của mình.
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.
Đây là giao diện chúng ta sẽ làm trong lần này :
Bạn download phần source code về, trong đó folder images đã có 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 :
<!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>Business</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="wrapper"> <div id="top_page"></div><!--end #top_page--> <div id="header"> <div id="banner"></div><!--end #banner--> <div id="featured_post"></div><!--end #featured_post--> </div><!--end #header--> <div id="content"></div><!--end #content--> <div id="footer"></div><!--end #footer--> </div><!--end #wrapper--> </body> </html>
Bước 2 : TOP PAGE
Theo như hình trên, các bạn thấy phần top page bao gồm logo của trang, phần phone number và các pages của trang web. Đối với logo, chúng ta dùng thẻ img ; đối với pages, ta dùng ul ; còn đối với phone, các bạn thấy nó có background là hình cái phone, do đó chúng ta dùng thẻ a (sau này làm link đến trang contact) để đặt background, còn cái background xám xám ở ngoài thì cần phải dùng một block element bao ngoài cái tag a để set width và height, ở đây mình dùng p (vì p là 1 block element). Code của chúng ta như sau (phần code này bạn đặt trong div#top_page):
<img src="images/logo.png" alt="logo" /> <p id="telephone"><a href="#" class="bold">123-456-7890</a></p> <ul id="pages"> <li><a href="#" class="bold uppercase">Home</a></li> <li><a href="#" class="bold uppercase">About</a></li> <li><a href="#" class="bold uppercase">Services</a></li> <li><a href="#" class="bold uppercase">Portfolio</a></li> <li><a href="#" class="bold uppercase">Contact</a></li> </ul>
Trong code HTML của giao diện này tôi có đặt class bold và uppercase vào một số tags (như các bạn thấy trong phần code trên), để sau này chúng ta style trong CSS class bold có font-weight là bold và class uppercase text-transform là uppercase.
Đến đây, chúng ta được giao diện như demo.
Bước 3 : HEADER
Bên trong div#header này sẽ gồm 2 div nhỏ :
a) BANNER
Đối với câu “We have what it takes to take your website to the new height of success” thì ta dùng tag p với id là success. Đối với câu “Get started here” thì dùng tag p với id là started, ngoài ra trong p#started này mình cần thêm một tag span nữa nhằm để đặt background là cái hình mũi tên. Cuối cùng là một tag img để để đưa hình banner vào. Phần code này bạn đặt trong div#banner :
<p id="success"> We have what it takes to take your website to the <span class="uppercase bold">new height of success</span> </p> <p id="started" class="uppercase bold"><span>Get started here</span></p> <img src="images/banner.png" alt="banner" />
b) Phần FEATURED POST
Ta sẽ dùng tag ul, mỗi bài featured post là một tag li. Mặc dù tag ul đã là block element, nhưng mình phải dùng thêm thẻ div để bao quanh ul này để khi style CSS, mình đặt padding cho ul thì không ảnh hưởng đến độ lớn của thẻ div bên ngoài (bạn nên xem lại bài Độ lớn thật sự của box của anh Demon Warlock để hiểu rõ vấn đề này). Trong mỗi li, chúng ta cần một img và p. Bạn đặt phần code sau trong div#featured_post :
<ul> <li> <img src="images/post-icon1.png" alt="post icon" /> <p><span class="bold">Save big with us</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </li> <li> <img src="images/post-icon2.png" alt="post icon" /> <p><span class="bold">Always on time</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </li> <li> <img src="images/post-icon3.png" alt="post icon" /> <p><span class="bold">Contact Us</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </li> </ul>
Bạn có thể xem demo.
Bước 4 : CONTENT
Các post item có style giống nhau nên đối với mỗi post thì chúng ta dùng một tag div có class là post_item. Phần tiêu đề thì mình dùng thẻ h1 lồng thêm thẻ a link tới post đó.
Một img là tấm hình của mỗi post. Một thẻ p là đoạn paragraph, cuối cùng là thẻ a với class là read_more. Riêng đối với bài post ở giữa thì nó ko có thẻ a read more và có một unorder list. Trong div#content, code của chúng ta như sau :
<div class="post_item"> <h1><a href="#">Who we are ?</a></h1> <img src="images/post-image1.jpg" alt="post image" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique tristique lacus in varius. Donec nec vestibulum ligula. Aenean turpis diam, feugiat a luctus in, rhoncus eget risus. Maecenas consequat porttitor dui, vitae consequat massa imperdiet ut. elit ut tempus lobortis, eros leo molestie velit, non egestas augue nulla eget erat. </p> <a href="#" class="uppercase bold read_more">Read more</a> </div><!--end .post_item--> <div class="post_item"> <h1><a href="#">What we do ?</a></h1> <img src="images/post-image2.jpg" alt="post image" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique tristique lacus in varius. Donec nec vestibulum ligula. Aenean turpis diam, feugiat a luctus in, rhoncus eget risus. Maecenas consequat porttitor dui, vitae consequat massa imperdiet ut. elit ut tempus lobortis, eros leo molestie velit, non egestas augue nulla eget erat. </p> <ul> <li><a href="#">Website Design</a></li> <li><a href="#">Blog Design</a></li> <li><a href="#">Branding design</a></li> </ul> </div><!--end .post_item--> <div class="post_item"> <h1><a href="#">Why hire us ?</a></h1> <img src="images/post-image3.jpg" alt="post image" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique tristique lacus in varius. Donec nec vestibulum ligula. Aenean turpis diam, feugiat a luctus in, rhoncus eget risus. Maecenas consequat porttitor dui, vitae consequat massa imperdiet ut. elit ut tempus lobortis, eros leo molestie velit, non egestas augue nulla eget erat. </p> <a href="#" class="uppercase bold read_more">Read more</a> </div><!--end .post_item-->
Xong phần code trên, bạn xem demo.
Bước 5 : FOOTER
Đối với phần cuối cùng này, chúng ta cần 2 tag ul. Tag ul thứ nhất có id là info_footer nêu một vài thông tin thêm, tag ul thứ 2 có id là copy_power ghi copyright và power bởi WordPress. Trong div#footer, chúng ta viết nốt phần code cuối cùng :
<ul id="info_footer"> <li> <h3>Browse Site</h3> <ul> <li><a href="#">About our company</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Our Portfolio</a></li> <li><a href="#">Our Prices</a></li> <li><a href="#">Online quote form</a></li> <li><a href="#">Client Testimonials</a></li> </ul> </li> <li> <h3>Our Testimonials</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique tristique lacus in varius. Donec nec vestibulum ligula. Aenean turpis diam, feugiat a luctus in, rhoncus eget risus. Maecenas consequat porttitor dui, vitae consequat massa imperdiet ut. elit ut tempus lobortis, eros leo molestie velit. <span class="bold">Rafi, GraphicsFuel.com</span> </p> </li> <li> <h3>From Our Blog</h3> <p> <span class="date">July 6, 2013</span> <span class="bold">Lorem ipsum dolor sit amet, consectetur</span> adipiscing elit. Etiam tristique tristique lacus in varius. Donec nec vestibulum ligula. Aenean turpis diam... </p> <p> <span class="date">July 6, 2013</span> <span class="bold">Lorem ipsum dolor sit amet, consectetur</span> adipiscing elit. Etiam tristique tristique lacus in varius. Donec nec vestibulum ligula. Aenean turpis diam... </p> </li> </ul><!--end #info--> <ul id="copy_power"> <li>Copyright © 2013 Business. All rights reserved. Designed by izwebz.com</li> <li class="uppercase bold">Power by WordPress</li> </ul><!--end #copy_power-->
Như vậy là chúng ta đã dựng xong code HTML cho giao diện của mình. Việc còn lại là mình sẽ validate code “Hát Tê Mờ Lờ”, phần này các bạn hãy tự làm, mình đã validate code rồi.
FINALLY: REVIEW RESULT
Kết hợp các phần code trên, giao diện HTML hoàn chỉnh của chúng ta đã hoàn thành.
Thừa thắng xông lên, chúng ta chơi luôn phần CSS.
Bước 1 : RESET CSS
Đầu tiên ta phải cho tất cả các thẻ có giá trị mặc định trở về 0 hết. Font-size là 100%, vertical-align là baseline (cái này chắc cũng ko cần vì mặc định đã là baseline rồi), background là transparent.
html,body,div,span,h1,h2,h3,h4,h5,h6,
p,a,font,img,b,u,i,ol,ul,li,fieldset,form {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Tiếp theo mình sẽ đi reset cái thẻ body. Mình cho font-size là 62.5%, cái này nếu bạn đã xem hết các tut khác về psd sang html rồi thì chắc đã biết, nhưng mình xin nói lại lần nữa.
Khi cho 62.5% thì ví dụ như nếu là 1em thì bằng 10px, 1.4em = 14px (giá trị px gấp 10 giá trị em). Nói chung cái này làm cho việc đổi đơn vị từ px sang em hay các đơn vị khác thì dễ hơn thôi. Font-family thì font chính của mình là tahoma, tiếp đến là arial, cuối cùng luôn phải là sans-serif vì sans và serif là họ của tất cả các font khác (hơi khó hiểu, nôm na là thế !!). Line-height là 2em nhằm làm cho khoảng cách giữa các dòng giãn ra tí cho dễ đọc. Chúng ta viết tiếp :
body {
font-size: 62.5%;
font-family: tahoma, arial, sans-serif;
line-height: 2em;
background: #0e0e0e url(images/body_bg.jpg) no-repeat left top;
}
Mình cho màu của background vì các bạn thử bỏ cái màu đi thì background của cả cái màn hình phần trên là các hình body_bg.jpg còn phần dưới trắng bốc, do đó cho màu nền là #0e0e0e (trùng với cái màu phần dưới của hình body).
Ngoài ra chúng ta còn cần định dạng thêm một vài cái cơ bản khác nữa :
ol,ul {list-style: none;} /*Bỏ đi mấy cái list style của ol và ul*/
a {
text-decoration: none; /*Bỏ hiệu ứng gạch chân*/
}
a img {
border: none; /*Bỏ border img nếu dùng ảnh làm link*/
}
img {
vertical-align: center;
}
:focus {
outline:0;
}
Bạn có nhớ ở phần trước, mình có cho một số tag có class là uppercase và bold ko ? Mục đích là để định dạng như sau :
.uppercase {
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: 5px 5px 0px 0px;
behaviour: url(border-radius.htc);
}
Ở đây mình cho position là relative vì lát nữa mình sẽ apply absolute positioning cho các children element của nó. Vì cái logo mình cho float left nên phải đặt overflow là hidden.
Các bạn nhìn kĩ trong psd thì nó có radius ở phía trên nên đặt border-radius. Ngoài ra xin giới thiệu với các bạn cách hack cái border radius này trong IE, đó chính là file border-radius.htc (file này mình để trong source code, các bạn có thể down về). Các bạn chỉ cần thêm lệnh behaviour: url(border-radius.htc) là IE sẽ hiển thị được cái border-radius.
Tiếp theo là đến cái logo, ở trên mình đã nói là cho float left, ngoài ra còn chỉnh margin cho nó nữa chứ :
#top_page img {
margin: 36px 0px 25px 41px;
float: left;
}
Kế đến là p#telephone, mình sẽ áp dụng absolute cho tag này, nó nằm ở góc trên bên phải nên ta đặt top và right là 0. Mình đặt file phone_bg.png làm background, size file này là 221 x 31 px nên đặt width là 221px, height là 31px. Cuối cùng là đặt background, vì là định dạng png nên màu nền là transparent :
#top_page p#telephone {
position: absolute; top: 0px; right: 0px;
width: 221px; height: 31px;
background: transparent url(images/phone_bg.png) no-repeat top left;
}
Đến cái thẻ a nằm trong p#telephone, đầu tiên mình biến nó thành block. Sau đó chỉnh margin cho nó ra chính giữa. Đặt background là cái hình phone, để tránh số và hình đè lên nhau thì thêm text-indent. Ngoài ra còn cần chỉnh size và color khi không di 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 trong ul#pages mình cho nó thành inline để nó thành hàng ngang :
#top_page ul#pages li {
display: inline;
}
Tiếp theo là a bên trong li, mình cần đặt height cho tag a là 24px vì lát nữa khi tạo hiệu ứng hover mình sẽ đặt background cho a là pages_bg.jpg (file này có height là 24px). Muốn thế thì mình phải biến a thành block element, nhưng làm thế thì ul của mình lại nằm dọc mất, cho nên mình phải cho float left. Định dạng thêm font-family, size, color, một chút margin, padding và border radius nữa. Chúng ta viết tiếp :
#top_page ul#pages li a {
font-family: "arial", tahoma, sans-serif;
font-size: 12px; color: #808080;
display: block; height: 24px; float: left;
line-height: 24px; margin-right: 37px;
padding: 0px 15px;
border-radius: 5px; behaviour: url(border-radius.htc);
}
Bây giờ mình tạo hiệu ứng hover như tôi nói ở trên. Tuy nhiên cái tag a đầu tiên tôi muốn nó luôn có background, nên mình thêm bộ chọn li:first-child nữa :
#top_page ul#pages li a:hover, #top_page ul#pages li:first-child a {
background: url(images/pages_bg.jpg) repeat-x top left;
color: white;
}
OK, đến bước này mình đã làm xong phần top page. Mình được như demo.
BƯỚC 3: HEADER
Mình cho header có width là 100%, một thành phần được cho width 100% thì sẽ có width bằng với thành phần parent element của nó. Ở bước reset CSS mình cho div#wrapper width là 960px, do đó div#header sẽ có width 960px. Thật ra bạn cũng có thể đặt trực tiếp 960px luôn cho div#header, nhưng khi đặt 100% thì nếu mình thay đổi width của div#wrapper thì width của div#header cũng thay đổi theo mà khỏi phải đặt lại nữa :
#header {
width: 100%;
}
a) BANNER
Mình sẽ đặt file header_bg.jpg (size 960 x 335px) làm background, do đó đó mình đặt width 960px và height 335px. Cuối cùng là position relative để apply absolute cho các element trong nó :
#header #banner {
width: 960px; height: 335px;
background: url(images/header_bg.jpg) no-repeat top left;
position: relative;
}
Đối với p#success, mình áp dụng absolute positioning, sau đó đặt size, font-family, color, width và line-height :
#header #banner p#success {
position: absolute; top: 84px; left: 51px;
font-size: 29px;
font-family: "Trebuchet MS", tahoma, sans-serif;
color: white; width: 370px; line-height: 1.3em;
}
Đến p#started, mình cũng dùng absolute, mình đặt background là file started.jpg (size 254 x 51px) nên cần đặt width và height tương ứng là 254px và 51px, đặt thêm line-height cho khoảng cách giữa các dòng cách ra một chút. Thêm indent cho nó ra giữa chút và cuối cùng là border radius. Code của chúng ta :
#header #banner p#started {
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 ra trái bằng text-align là left. Cuối cùng là đặt background, bạn lưu ý với phần background-position mình cho 219px 50%, 219px tức là cho cái hình cách lề trái 219px, còn 50% là để nó căn giữa theo chiều dọc :
#header #banner p#started span {
margin: auto; display: block; text-align: left;
font-family: "Trebuchet MS", tahoma, sans-serif;
color: #b90016; font-size: 20px;
background: transparent url(images/started.png) no-repeat 219px 50%;
}
Đến cái img trong div#banner, mình sẽ áp dụng absolute cho nó. Mình cho bottom là giá trị âm, thay vì đẩy lên trên thì nó sẽ bị đẩy xuống dưới, vượt ra ngoài cái div#banner mình đã design ban đầu trong photoshop :
#header #banner img {
position: absolute; bottom: -28px; right: 30px;
}
b) FEATURED POST
Đầu tiên, ta style width và màu nền của div#featured_post :
#header #featured_post {
width: 100%;
background: #ededed;
}
Đến cái ul, đầu tiên mình thêm padding, nhưng nếu có padding thì độ lớn của ul sẽ bị thay đổi, đây là lí do mình phải dùng div#featured_post bao quanh cái ul (mặc dù ul đã là block element), khi thêm padding cho ul thì độ lớn của div#featured_post sẽ ko bị ảnh hưởng (nếu bạn vẫn chưa hiểu cái này, xem lại bài Box Model). Vì mình cho các li trong ul float nên phải cho overflow là hidden :
#header #featured_post ul {
padding: 38px 0px 22px 53px;
overflow: hidden;
}
Đến li trong ul, mình cho float left, width là 245px, margin-right để các list cách ra cho dễ nhìn :
#header #featured_post ul li {
float: left; width: 245px;
margin-right: 40px;
}
Trong từng li, mình định dạng như sau :
#header #featured_post ul li img {
float: left; margin-right: 18px;
}
#header #featured_post ul li p {
font-size: 12px; font-family: "arial", tahoma, sans-serif;
color: #4f4f4f;
}
#header #featured_post ul li p span {
display: block; font-size: 15px;
}
Bạn xem demo để thấy kết quả sau bước này.
BƯỚC 4 : CONTENT
Với phần div#content, mình đặt background là white và thêm padding. Lưu ý là mình phải cho overflow hidden vì mình sẽ cho các div.post_item bên trong nó float :
#content {
background: white;
padding: 41px 20px 52px 20px;
overflow: hidden;
}
Đến các div.post_item, như mình vừa nói ở trên là sẽ cho float left, đặt margin left để cách các div ra. Nhưng các bạn thấy mỗi div lại trên 1 hàng, do đó đặt width 265px (mình đo trong photoshop) để các div được ngang hàng với nhau. Cuối cùng là đặt font-family :
#content .post_item {
float: left; margin-left: 33px;
width: 265px;
font-family: "arial", tahoma, sans-serif;
}
Với cái phần tiêu đề h1, đơn giản chỉ cần chỉnh size và hiệu ứng hover tag a trong nó :
#content .post_item h1 a {
font-size: 25px;
color: #585858;
}
#content .post_item h1 a:hover {
color: #0f4db6;
}
Đến cái img của mỗi post, mình đặt margin top và bottom để nó cách ra với cái tag h1 và đoạn paragraph ở dưới :
#content .post_item img {
margin: 24px 0px 20px 0px;
}
Với cái tag p ở dưới, mình cũng chỉ cần chỉnh size và color :
#content .post_item p {
font-size: 12px;
color: #4f4f4f;
}
Đến cái a class read_more này hơi phức tạp một chút. Đầu tiên mình chỉnh margin top để nó cách ra với cái tag p ở trên. Với tag a này mình cần đặt background, do đó cần phải đặt width và height cho nó. Vậy mình cần phải cho nó display là block (tag a mặc định là inline), sau đó đặt width 96px và height 27px (bằng với kích thước của hình làm background 96 x 27px). Đặt text-align center để text căn ra giữa theo chiều ngang, đặt line-height bằng với height, tức 27px để text căn ra giữa theo chiều dọc (khi bạn cho line-height bằng với height của một thành phần thì text của nó sẽ căn ra giữa theo chiều dọc). Thêm style font-family, size và color cho nó 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;
width: 96px; text-align: center;
height: 27px; line-height: 27px;
font-size: 12px; font-family: "tahoma", sans-serif;
color: #6c6c6c;
background: url(images/readmore_bg.jpg) repeat-x top left;
border: 1px solid #ccc;
border-radius: 5px; behaviour: url(border-radius.htc);
border-top: none; border-bottom: none;
}
Chuyển sang tag ul có trong div post_item thứ 2, mình chỉnh margin top, còn cái list-style ở bên trong nên cho là inside, mình sẽ lấy file list_style.png làm list-style-image :
#content .post_item ul {
margin-top: 20px;
list-style: inside url(images/list_style.png);
}
Đến từng cái li trong ul, mình định dạng padding và border bottom để tách các li ra cho dễ nhìn hơn :
#content .post_item ul li {
padding: 5px 0px 5px 0px;
border-bottom: 1px dotted #d3d3d3;
}
Riêng cái li cuối cùng mình ko cần border bottom, do đó mình dùng bộ chọn last-child :
#content .post_item ul li:last-child {
border-bottom: none;
}
Cuối cùng là tag a trong li, đơn giản cũng chỉ style cái size, font-family và hiệu ứng hover cho nó thôi :
#content .post_item ul li a {
font-size: 12px; font-family: "arial", tahoma, sans-serif;
color: #0f4db6;
}
#content .post_item ul li a:hover {
color: #585858;
}
Giao diện của phần content như demo.
BƯỚC 5 : FOOTER
Với div#footer này, đầu tiên mình cho background là màu trắng, thêm border-top như trong psd, sau đó thêm radius và padding :
#footer {
background: #ededed;
border-top: 2px solid #bababa;
border-radius: 0px 0px 5px 5px; behaviour: url(border-radius.htc);
padding: 24px 41px;
}
Đến cái ul với id info_footer, mình cho border bottom và padding bottom để cách ra một chút với cái ul ở dưới, sau đó cho nó overflow là hidden vì mình sẽ float các li trong nó :
#footer ul#info_footer {
overflow: hidden;
border-bottom: 1px solid #ccc;
padding-bottom: 12px;
}
Tiếp theo là tag li con của ul#info_footer, mình cho float left, đặt margin left để cách các li ra, định dạng cho text là font-family, size và color. Bạn xem trong file psd thì thấy các li ngang hàng với nhau, như vậy mình sẽ định dạng thêm width. Bạn chú ý mình đang nói đến những tag li là con của ul#info_footer thôi, do đó phần style này mình dùng bộ chọn > :
#footer ul#info_footer > li {
width: 300px;
float: left; margin-left: 100px;
font-size: 12px; color: #4f4f4f;
font-family: "arial", tahoma, sans-serif;
}
Tuy nhiên bạn thấy cái li cuối cùng vẫn bị chui xuống dưới, do đó mình dùng bộ chọn first-child và last-child để định dạng lại width và margin left cho cái li đầu tiên và cuối cùng sao cho thích hợp :
#footer ul#info_footer > li:first-child {
width: 107px;
margin-left: 0px;
}
#footer ul#info_footer > li:last-child {
margin-left: 65px;
}
Đến tag h3 trong mỗi li, chủ yếu style text về size, color và margin :
#footer ul#info_footer li h3 {
font-size: 15px;
color: #585858;
margin-bottom: 28px;
}
Đến từng tag a trong mỗi li, cũng đơn giản là hiệu ứng hover thôi :
#footer ul#info_footer li ul li a {
color: #4f4f4f;
}
#footer ul#info_footer li ul li a:hover {
color: #0f4db6;
}
Bạn thấy khi viết code HTML thì trong li cuối của ul#info_footer mình có cho một số tag p, style margin cho nó :
#footer ul#info_footer > li:last-child p {
margin-bottom: 17px;
}
Đến các span cũng nằm trong li cuối, mình muốn nó nằm riêng trên một hàng, nhưng nó lại là inline element mà, rất đơn giản :
#footer ul#info_footer li span {
display: block;
}
Chuyển sang phần cuối cùng, ul#copy_power, đầu tiên, như mấy tag ở trên, mình cũng style tương tự (mình cũng cho overflow là hidden vì sẽ float các li):
#footer ul#copy_power {
border-top: 1px solid white;
overflow: hidden;
padding-top: 21px;
}
Đến li trong ul#copy_power, mình float left, thêm font-family, size, color, với cái li cuối mình cần background nên cho thêm height và line-height bằng với height để căn text ra giữa theo chiều dọc :
#footer ul#copy_power li {
float: left;
font-family: "arial", tahoma, sans-serif;
font-size: 12px;
color: #4f4f4f;
height: 16px; line-height: 16px;
}
Đó là định dạng chung cho li đầu tiên, còn li thứ 2 cần style thêm một chút, với bộ chọn last-child, ta cho nó float right, width là 275px, background là hình icon.png, mình muốn nó chỉ xuất hiện một lần nên cho no-repeat, với background position thì cho 0 50% để căn hình ra giữa theo chiều dọc, cuối cùng là text-indent 128px để tách phần text và background khỏi chồng lên nhau :
#footer ul#copy_power li:last-child {
float: right;
width: 275px;
background: transparent url(images/icon.png) no-repeat 0 50%;
text-indent: 128px;
}
FINALLY: REVIEW RESULT
Well, very good !!! Chúng ta đã hoàn thành phần code CSS và bạn hãy xem kết quả cuối cùng.
Đây là tut đầu tiên nên mình vẫn còn rất nhiều thiếu sót, rất mong các bạn nhiệt tình comment góp ý để trong tut sau mình có thể làm tốt hơn. Okay, I hope you like this tutorial. Thank you for your time and talk to you soon. Goodbye !!!
