Hướng dẫn PSD sang HTML
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (720.3 KB, 29 trang )
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 :ấ ủ ệ đượ ọ ư
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 :ế ẻ ướ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
" /><html xmlns=" 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 >
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
</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
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) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
<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>
23
24
<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
Trong div#banner chúng ta g m 2 div nh :ồ ỏ
1
2
3
4
5
<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 :Đ ạ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 :ế ư
1
2
3
4
5
6
7
8
9
<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
</p>
<img src="images/people.png" alt="people" />
</div><! end #welcome >
Bước 2 : POST_CONTENT
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 :ạ ế ư
1
2
3
4
5
6
7
8
9
1
0
11
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
<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="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 >
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
<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 :ồ ỏ
1
2
3
4
5
6
7
8
9
10
11
<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
Mình c n 1 tag h3, 1 tag p và 1 cái form :ầ
1
2
3
4
5
6
7
8
9
10
<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
Ph nầ div#quick c ng gi ng nhũ ố ư div#holiday :
1
2
3
4
5
6
7
<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
1
2
3
4
5
6
7
8
<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
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 :ỗ ồ đề đ ạ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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 :
1
2
3
<div id="info_footer">
</div><! end #info_footer >
4
5
<ul id="coryright">
</ul>
Bước 1 : INFO_FOOTER
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 :để ủ ầ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<h3 id="title">
Lorem 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="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>
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<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>
</p>
<p id="address">
Nature tours. Your city. <span>Your state. 123 456 789</span>
</p>
</li>
</ul>
Bước 2 : COPYRIGHT
Trong ul này ch c n 2 list ghi copyright và design :ỉ ầ để
1
2
3
4
<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 !!!ướ để ỏ
1
2
3
4
5
6
7
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;
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
}
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;
}
54
55
56
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
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.
1
2
3
4
#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ó :ầ ủ
1
2
3
4
5
#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 :
1
2
3
4
5
6
7
8
9
#header a img {
position: absolute;
top: 19px; left: 26px;
}
#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 :để ằ ư
1
#header ul#tel li {
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 :để ằ
1
2
3
4
5
6
7
8
#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 :ố ớ
1
2
3
4
5
6
7
8
9
10
11
#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;
}
12
Sau ó mình t o hi u ng hover cho tag a và set background cho tag a u tiên :đ ạ ệ ứ đầ
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, 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 :ố ề
1
2
3
4
5
6
7
8
9
#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;
}
n li, mình c ng cho display inline :Đế ũ
1
2
3
#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 :
1
2
3
4
5
6
7
8
9
10
11
#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);
}
12
13
n hi u ng hover, mình c ng dùng fileĐế ệ ứ ũ menu_bg.jpg nh ng cho background-position ư
là top left :
1
2
3
4
5
#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 :
1
2
3
4
5
6
7
#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 :
1
2
3
4
5
6
#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) :
1
2
3
#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 :
1
2
3
4
5
#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 :Đế ấ
1
2
3
4
#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 :
1
2
3
4
#primary #content #banner #slide #new_tours_wrap {
width: 235px;
float: right;
}
Bây gi mình thêm padding choờ div#new_tours (n m trongằ div#new_tours_wrap) :
1
2
3
#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
chodiv#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_tourss l n h n width c aẽ ớ ơ ủ div#slide !!! K t qu ế ả
là 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êmdiv#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ó :đị ạ
1
2
3
4
5
6
7
#primary #content #banner #slide #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 :ũ đị ạ ươ ự
1
2
3
4
5
6
7
8
9
10
11
12
#primary #content #banner #slide #new_tours p#our_new_tours span {
display: block;
color: #28b028;
font-size: 32px;
}
#primary #content #banner #slide #new_tours p#intro {
color: white;
font-family: "arial", tahoma, sans-serif;
font-size: 12px;
margin: 13px 0px 27px 0px;
}
nĐế a.read_more, mình ch t o hi u ng hover :ỉ ạ ệ ứ
1
2
3
4
5
6
7
8
#primary #content #banner #slide #new_tours p#intro a.read_more {
color: #28b028;
display: block;
}
#primary #content #banner #slide #new_tours p#intro a.read_more:hover {
color: #5383fd;
}
Chuy n sangể ul#nav_slide, mình s bi n các li c a nó thành inline. n tag a trong li, ẽ ế ủ Đế
các thu c tính nh d ng mình ã gi i thích nhi u r i nên gi không gi i thích n a, ộ đị ạ đ ả ề ồ ờ ả ữ
chúng ta l t nhanh qua nhé :ướ
1
2
3
4
5
6
#primary #content #banner #slide #new_tours ul#nav_slide li {
display: inline;
}
#primary #content #banner #slide #new_tours ul#nav_slide li a {
display: block;
float: left;
width: 21px; height: 22px;
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
text-align: center; line-height: 22px;
font-family: "arial", tahoma, sans-serif;
font-size: 12px;
color: #cbcbcb;
background: transparent url(images/nav_banner_bg.png) no-repeat top left;
margin-right: 9px;
}
#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;
}
V y là xong ph nậ ầ div#slide n mằ div#banner, mình chuy n sang ph n div còn l i ể ầ ạ
là div#welcome, mình cho position là relative và margin top là 30px :
1
2
3
4
#primary #content #banner #welcome {
position: relative;
margin-top: 30px;
}
n tag h1, mình n thu n c ng ch c n 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;
}
Cái tag p c ng t ng t , ây mình cho thêm width là 470px vì mình không mu n ũ ươ ự ở đ ố
width c a nó dài ra b ng cáiủ ằ div#banner :
1
2
3
4
5
6
#primary #content #banner #welcome p {
font-family: "arial", tahoma, sans-serif;
font-size: 12px; color: #595447;
margin-top: 19px;
width: 470px;
}
Sau ó t o hi u ng hover cho ng link a trong p :đ ạ ệ ứ đườ
1
2
#primary #content #banner #welcome p a {
color: #28b028;
}
3
4
5
6
7
#primary #content #banner #welcome p a:hover {
text-decoration: underline;
}
Còn ph n tag img, mình cho nóầ position: absolute, giá tr top -50px thì thay vì b y ị ị đẩ
xu ng cái img s b y lên trên, n m vào ph nố ẽ ị đẩ ằ ầ div#banner (gi ng v i file PSD) :ố ớ
1
2
3
4
#primary #content #banner #welcome img {
position: absolute;
top: -50px; right: 46px;
}
Xong ph nầ div#banner, b n xemạ demo ph n nàyầ .
Chúng ta chuy n sangể div#post_content !!!
Set margin top để div#post_content cách ra v iớ div#banner :
1
2
3
#primary #content #post_content {
margin-top: 4px;
}
nĐế ul#nav_post, mình cho overflow hidden vì s float các tag a c a nó, sau ó thêmẽ ủ đ
radius, còn các li mình mu n nó n m ngang nên cho nó display thành inline :ố ằ
1
2
3
4
5
6
7
8
9
#primary #content #post_content ul#nav_post {
overflow: hidden;
border-radius: 6px;
behaviour: url(border-radius.htc);
}
#primary #content #post_content ul#nav_post li {
display: inline;
}
Bây gi n tag a, c ng style t ng t nh m y l n tr c thôi, l u ý khi set ờ đế ũ ươ ự ư ấ ầ ướ ư
background mình s d ngử ụ sprite image nhé :
1
2
3
4
5
6
7
8
9
10
#primary #content #post_content ul#nav_post li a {
display: block;
float: left;
font-family: "Trebuchet MS", tahoma, arial, sans-serif;
font-size: 18px;
color: #444137;
width: 230px; height: 39px;
text-align: center; line-height: 39px;
background: url(images/nav_postitem_bg.jpg) repeat-x top left;
border-right: 1px solid #dad9d3;
}
11
Mình còn c n thêm border radius cho cái li u tiên và cu i cùng, t ng ng v i 2 b ầ đầ ố ươ ứ ớ ộ
ch nọ li:first-child a và li:last-child a :
1
2
3
4
5
6
7
8
9
#primary #content #post_content ul#nav_post li:first-child a {
border-radius: 6px 0px 0px 6px;
behaviour: url(border-radius.htc);
}
#primary #content #post_content ul#nav_post li:last-child a {
border-radius: 0px 6px 6px 0px;
behaviour: url(border-radius.htc);
}
Cu i cùng là t o hi u 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;
}
Chuy n sang style ph nể ầ div.post_item, u tiên là margin, r i n width, b n c n set đầ ồ đế ạ ầ
width và margin m t cách thích h p sao cho c 3 div s n m trên cùng m t hàng, quên ộ ợ ứ ẽ ằ ộ
m t, n m trên m t hàng thì ph i float ch !!!ấ để ằ ộ ả ứ
1
2
3
4
5
6
#primary #content #post_content div.post_item {
margin-top: 26px;
margin-right: 13px;
width: 222px;
float: left;
}
Tuy nhiên cái div.post_item th 4ứ nó l i n m m t cách “tréo hèo” gi ng nhạ ằ ộ ố ư demo, lí
do vì nó b nh h ng c a thu c tính float. Bây gi mình mu n div này xu ng hàng ị ả ưở ủ ộ ờ ố ố
m i, có ngh a c n ph i b nh h ng c a cái float, t c là dùng thu c tính clear. Mình ớ ĩ ầ ả ỏ ả ưở ủ ứ ộ
float các div v phía left nên ph i choề ả div.post_item th 4ứ này clear là left.
Nh ng v n ch a gi i quy t xong, mình m i ch fix c cái div th 4 thôi, còn l nh ư ẫ ư ả ế ớ ỉ đượ ứ ỡ ư
sau này b n a giao di n này vào CMS s d ng thì l i b r t nhi u div sau này ạ đư ệ để ử ụ ạ ị ấ ề
n a. kh c ph c n tho ph n này, trong ph n vi t code HTML, mình s thêm vào ữ Để ắ ụ ổ ả ầ ầ ế ẽ
các th div c n clear có class làẻ ầ clear :
1 #primary #content #post_content div.clear /*div.post_item*/ {
clear: left;
2
3
}
n ph n img c a m i post, mình cho radius, padding và background cho gi ng v i 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 ph n h3 tiêu và o n v n p thì mình style text gi ng nhau v font-family, đế ầ đề đ ạ ă ố ề
size, color và margin, sau ó t o hi u 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;
}
Mình c n nh d ng l i tag p m t chút cho gi ng v i ph n design :ầ đị ạ ạ ộ ố ớ ầ
1
2
3
4
#primary #content #post_content div.post_item p {
font-size: 12px;
margin-top: 10px;
}
B n xemạ demo ph n post_contentầ .
Bước 2 : SIDEBAR
V iớ div#sidebar này, mình set background là #f4f2ec, mình c n float right ầ
(div#content mình ã cho float left), tuy nhiên v n ây là mình c n xác nh c đ ấ đềở đ ầ đị đượ
width c a nó khi float right thì nó không b chui xu ng d i.ủ để ị ố ướ
Ta th y r ngấ ằ width div#sidebar = width div#primary – width div#content,
tuy nhiên cái v n ây là khi style mình ã cho r t nhi u padding và margin cho cácấ đề ở đ đ ấ ề
div này nên c n ph i xác nh c l n th t s c a chúng.ầ ả đị đượ độ ớ ậ ự ủ
Th t ra b n có th xem qua t t c các thành ph n c ng các margin và padding c a ậ ạ ể ấ ả ầ để ộ ủ
chúng l i ra width, nh ng làm v y nó r t m t th i gian. Có m t cách nhanh h n là ạ để ư ậ ấ ấ ờ ộ ơ
dùng jQuery !!! u tiên, t t nhiên là b n ph i thêm vào thĐầ ấ ạ ả ẻ head trong code HTML m t ộ
thẻ script link t i th vi n jQuery b t kì, và m t thđể ớ ư ệ ấ ộ ẻ scriptg m code c a mình :ồ ủ
1
2
3
4
<script type="text/javascript" src=" /><script type="text/javascript">
</script>
Sau ó chúng ta vi t 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 o n code jQuery trên, mình h ng n i t ng là div#primary v i ph ng đ ạ ướ đế đố ượ ớ ươ
th c làứ outerWidth, có ngh a là s l y cái width c a nó bao g m t t c padding và ĩ ẽ ấ ủ ồ ấ ả
margin, k t qu gán vào bi nế ả ế w_pri và alert chúng ra màn hình. B n load l i trang thì ạ ạ
nó in ra s 990, t c width c aố ứ ủ div#primary là 990px.
Làm t ng t xác nh width c aươ ự để đị ủ div#content :
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$(document).ready(function(){
//var w_pri = $('#primary').outerWidth();
//alert(w_pri);
var w_con = $('#primary #content').outerWidth();
alert(w_con);
});
</script>
K t qu c a o n code trên là trình duy t alert ra 739, t c width c aế ả ủ đ ạ ệ ứ ủ div#content. T ừ
ó ta tính c width c ađ đượ ủ div#sidebar b ngằ 990px – 739px = 251px.
1
2
3
4
#sidebar {
background: #f4f2ec;
width: 251px;
float: right;
}
5
Mình s thêm padding cho t t c các div con c aẽ ấ ả ủ div#sidebar (g m 4 div ồ
là div#holiday, div#quick,div#newsletter và div#lastest_new) :
1
2
3
4
5
6
#sidebar #holiday,
#sidebar #quick,
#sidebar #newsletter,
#sidebar #lastest_new {
padding: 20px;
}
Các tag h3 trong div#sidebar mình style gi ng nhau :ố
1
2
3
4
#sidebar h3 {
font-family: "Trebuchet MS", tahoma, arial, sans-serif;
font-size: 14px; color: #3f3b30;
}
Trong ph n code HTML, mình có cho m t s tag p có class làầ ộ ố choose, bây gi mình ờ
style cho nó :
1
2
3
4
5
#sidebar p.choose {
font-family: "arial", tahoma, sans-serif;
font-size: 12px; color: #3f3b30;
margin-top: 10px;
}
Chuy n sang các tag input trong các form, m t vài thu c tính nh margin, font, … thì ể ộ ộ ư
mình xin b qua, ch y u là ph n width thì là 202px (cái này ph i o trong photoshop), ỏ ủ ế ầ ả đ
v height thì mình cho height là 25px b ng height c a hìnhề ằ ủ input_bg.jpg, sau ó mình đ
set background là file input_bg.jpg cho repeat-x :
1
2
3
4
5
6
7
8
9
10
11
12
#sidebar form input {
margin-top: 19px;
width: 202px; height: 25px; line-height: 25px;
background: url(images/input_bg.jpg) repeat-x top left;
font-family: "arial", tahoma, sans-serif;
font-size: 11px;
color: #999;
border: 1px solid #cfcdc5;
border-radius: 5px;
behaviour: url(border-radius.htc);
text-indent: 7px;
}
Mình mu n khi ng i dùng click vào input thì màu ch thay i, do ó ph i dùng b ố ườ ữ đổ đ ả ộ
ch nọ input:focus :
1
2
3
#sidebar form input:focus {
color: #231f20;
}
Bây gi mình style ti p cho nh ng cái input submit (mình ã thêm class là submit), u ờ ế ữ đ đầ
tiên là input submit n m trongằ div#holiday. Mình s dùng fileẽ s_holidays_bg.jpg làm để
background cho nó, mình c n ch nh l i m t vài th nh width, height, font,… :ầ ỉ ạ ộ ứ ư
1
2
3
4
5
6
7
8
9
10
#sidebar #holiday form input.submit {
width: 196px; height: 34px;
text-align: left;
line-height: 34px; text-indent: 12px;
border: none;
background: url(images/s_holidays_bg.jpg) no-repeat top left;
font-family: "Trebuchet MS", tahoma, arial, sans-serif;
font-size: 15px;
color: white;
}
n các input submit trongĐế div#quick, div#newsletter, mình dùng file submit.jpg làm
background và ch nh l i m t vài th gi ng nh trên :ỉ ạ ộ ứ ố ư ở
1
2
3
4
5
6
7
8
9
10
#sidebar #quick input.submit,
#sidebar #newsletter input.submit {
text-align: left;
height: 28px; line-height: 28px;
background: url(images/submit.jpg) repeat-x top left;
font-family: "Trebuchet MS", tahoma, arial, sans-serif;
font-size: 15px;
color: white;
width: auto;
}
Ti p n input v i class làế đế ớ short, chúng có width ng n h n các input khác :ắ ơ
1
2
3
4
5
#sidebar form input.short {
width: 118px;
float: left;
margin-right: 10px;
}
Ph n cu i c aầ ố ủ div#sidebar là div#lastest_new, tag h3 thì mình không c n style, ch cóầ ỉ
ph nầ ul#new thôi, c ng ch m t vài style n gi n v text, mình c ng ã nói nhi u r i ũ ỉ ộ đơ ả ề ũ đ ề ồ
nên gi xin l t qua luôn ph n này (bài vi t dài quá c ng h i m i tay, hihihihi :D) :ờ ướ ầ ế ũ ơ ỏ
1
2
3
#sidebar #lastest_new ul#new li {
margin-top: 20px;
}
