Yêu cầu
– Căn bản HTML/CSS
– Thời gian thực hiện: 1h~2h
XÂY DỰNG CẤU TRÚC HTML
CẤU TRÚC CHUNG CỦA TRANG HTML RAUXANH
Đây là phần chúng ta sẽ xây dựng một cách tổng quát bố cục của trang web như header, body, banner, ads, footer v.v.
|
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<!DOCTYPE html>
<html>
<head>
<title>– RAUXANH –</title>
<meta charset=“UTF-8”>
</head>
<body>
<div id=“top”>
<div id=“top-bar”>
<!– Hotline and cart button –>
</div>
<!– end #top-bar –>
<div class=“wrapper”>
<!– logo , user area and search form –>
</div>
<div id=“menu_container”>
<!– menu area –>
</div>
<!– end #menu –>
</div>
<!– end #top –>
<div class=“wrapper”>
<div id=“body”>
<div id=“slides” class=“white-box”>
<div class=“slides_container”>
<!– slides area –>
</div>
</div>
<!– end #slides –>
<div class=“module-left white-box”>
<!– support area –>
</div>
<!– end .module-left –>
<div class=“module-left white-box”>
<!– sale off area –>
</div>
<!– end .module-left –>
<div class=“clear”> </div>
<!– end .clear –>
<div id=“new-products”>
<div class=“new-product-item”>
<!– new products area –>
</div>
</div>
<!– end #new-products –>
<div class=“clear”> </div>
<!– end .clear –>
<div id=“hot-products”>
<!– hot products erea –>
</div>
<!– end #hot-products –>
</div>
</div>
<!– end #body –>
<div class=“clear”></div>
<div id=“footer”>
<!– footer area –>
</div>
<!– end #footer –>
</body>
</html>
|
Chúng ta sẽ cùng đi từ trên xuống, từ phần top header đến footer.
PHẦN TOP
Layout của phần top
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div id=“top”>
<div id=“top-bar”>
<!– Hotline and cart button –>
</div>
<!– end #top-bar –>
<div class=“wrapper”>
<!– logo , user area and search form –>
</div>
<div id=“menu_container”>
<!– menu area –>
</div>
<!– end #menu –>
</div>
<!– end #top –>
|
Top bar: chúng ta thay thế <!– Hotline and cart button –>
|
1
2
3
4
5
6
7
8
9
10
11
|
<div class=“wrapper”> HOTLINE : <span style=“font-weight:bold”>092 3433 409</span>
<div id=“cart”> <img src=“img/btn-cart.png” alt=“alt” id=“btn-cart”> <span id=“count”>3 SẢN PHẨM</span>
<div id=“cart-box” class=“white-box”> <img src=“img/cart-img.png” alt=“alt”> <span id=“big-num”>150</span> <span id=“small-num”>000 Đ</span>
<ul>
<li><a href=“#”>Bạn có <span id=“c1”>3</span> sản phẩm trong giỏ</a></li>
<li><a href=“#”>Xem giỏ hàng</a></li>
<li><a href=“#” id=“check-out” class=“radius-box”><span id=“”>THANH TOÁN</span></a></li>
</ul>
</div>
</div>
</div>
|
Phần Logo, User và Search Form: chúng ta thay thế <!– logo , user area and search form –>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div id=“logo”> <img src=“img/logo.png” id=“logo-img” alt=“rauxanh” title=“rauxanh”> <img src=“img/logo-text.png” id=“logo-text” alt=“text” title=“texxt”> </div>
<!– end #logo –>
<div id=“user”>
<p>Xin chào Khách! <br />
(<a href=“#”>Đăng nhập</a> hoặc <a href=“#”>Đăng ký</a>) </p>
</div>
<!– end #user –>
<form id=“search”>
<input type=“text” name=“s” id=“s”>
</form>
<!– end #search –>
|
Phần Menu: chúng ta thay thế <!– menu area –>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<ul id=“menu”>
<li class=“active”><a href=“#”>TRANG CHỦ</a></li>
<li><a href=“introduction.htm”>GIỚI THIỆU</a></li>
<li><a href=“list-products.htm”>SẢN PHẨM</a>
<ul>
<li><a href=“list-products.htm”>NẤM</a></li>
<li><a href=“list-products.htm”>RAU</a></li>
<li><a href=“list-products.htm”>TRÁI CÂY</a></li>
</ul>
</li>
<li><a href=“#”>TIN TỨC</a></li>
<li><a href=“cart”>ĐẶT HÀNG</a></li>
<li><a href=“#”>LIÊN HỆ</a></li>
</ul>
|
Hoàn thành phần Top
PHẦN BODY
Layout của phần body
|
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
|
<div class=“wrapper”>
<div id=“body”>
<div id=“slides” class=“white-box”>
<div class=“slides_container”>
<!– slides area –>
</div>
</div>
<!– end #slides –>
<div class=“module-left white-box”>
<!– support area –>
</div>
<!– end .module-left –>
<div class=“module-left white-box”>
<!– sale off area –>
</div>
<!– end .module-left –>
<div class=“clear”> </div>
<!– end .clear –>
<div id=“new-products”>
<div class=“new-product-item”>
<!– new products area –>
</div>
</div>
<!– end #new-products –>
<div class=“clear”> </div>
<!– end .clear –>
<div id=“hot-products”>
<!– hot products erea –>
</div>
<!– end #hot-products –>
</div>
</div>
<!– end #body –>
|
Layout của body gồm nhiều phần: banner, support, ads, sản phẩm mới, sản phẩm hot v.v.
Phần slide: chúng ta thay thế <!– slides area –>. Ở đây chúng ta sẽ sử dụng jQuery Plugin: Slidesjs
|
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
|
<div class=“slide”> <img src=“img/slide-img.png” alt=“alt” title=“title” class=“radius-box”>
<div class=“s1”>
<p class=“slide-title”><a href=“product.htm”>NẤM KIM CHÂM HÀN QUỐC</a></p>
<p class=“slide-intro”>LOREM IPSUM DOLOR SIT AMET<br>
<br>
NOSTRUC EXERCI TATION ULLAMCORPER SU DUIS AUTEM VEL EUM IRIUR DOLOR IN HED BLANDIT PRAESENT</p>
<p class=“slide-price”>Giá: 16.000Đ / Hộp</p>
<a href=“#” class=“slide-buy-now-btn”>MUA NGAY</a> </div>
<div class=“clear”></div>
</div>
<!– end .slide –>
<div class=“slide”> <img src=“img/slide-img.png” alt=“alt” title=“title” class=“radius-box”>
<div class=“s1”>
<p class=“slide-title”><a href=“product.htm”>NẤM KIM CHÂM HÀN QUỐC</a></p>
<p class=“slide-intro”>LOREM IPSUM DOLOR SIT AMET<br>
<br>
NOSTRUC EXERCI TATION ULLAMCORPER SU DUIS AUTEM VEL EUM IRIUR DOLOR IN HED BLANDIT PRAESENT</p>
<p class=“slide-price”>Giá: 26.000Đ / Hộp</p>
<a href=“#” class=“slide-buy-now-btn”>MUA NGAY</a> </div>
<div class=“clear”></div>
</div>
<div class=“slide”> <img src=“img/slide-img.png” alt=“alt” title=“title” class=“radius-box”>
<div class=“s1”>
<p class=“slide-title”><a href=“product.htm”>NẤM KIM CHÂM HÀN QUỐC</a></p>
<p class=“slide-intro”>LOREM IPSUM DOLOR SIT AMET<br>
<br>
NOSTRUC EXERCI TATION ULLAMCORPER SU DUIS AUTEM VEL EUM IRIUR DOLOR IN HED BLANDIT PRAESENT</p>
<p class=“slide-price”>Giá: 36.000Đ / Hộp</p>
<a href=“#” class=“slide-buy-now-btn”>MUA NGAY</a> </div>
<div class=“clear”></div>
</div>
|
Chúng ta sẽ viết code JavaScript ở phần sau.
Phần Support: chúng ta thay thế <!– support area –>
|
1
2
3
4
5
6
|
<p class=“title”>TƯ VẤN TRỰC TUYẾN</p>
<img src=“img/module-seperate.png” alt=“alt” class=“module-seperate”> <a href=“#”> <img src=“http://opi.yahoo.com/online?u=nguyenduy4994&m=g&t=2” alt=“alt” class=“module-img-yahoo”>
<p>Kinh Doanh: Mr.Duy</p>
</a> <a href=“#”> <img src=“http://opi.yahoo.com/online?u=nguyenduy4994&m=g&t=2” alt=“alt” class=“module-img-yahoo”>
<p>Kỹ Thuật: Mr.Duy</p>
</a>
|
Phần Sale Off: chúng ta thay thế <!– sale off area –>
|
1
|
<a href=“#”><img src=“img/free-ship.png” class=“no-margin”></a>
|
Phần Sản Phẩm Mới: chúng ta thay thế <!– new products area –>
|
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
|
<div class=“item white-box m1”> <img src=“img/new-product/item-1.png” alt=“alt” class=“radius-box”>
<div class=“g1”> <a href=“product.htm” class=“title-link”>
<p class=“categories”> NẤM </p>
<p class=“title”>KIM CHÂM HÀN QUỐC</p>
</a>
<p class=“intro”>luptatum zzril delenit augue dui dolore</p>
<p class=“price”>16.000Đ / Gói</p>
<a href=“#” class=“buy-now-btn”>MUA NGAY</a> </div>
</div>
<div class=“item white-box m1”> <img src=“img/new-product/item-2.png” alt=“alt” class=“radius-box”>
<div class=“g1”> <a href=“product.htm” class=“title-link”>
<p class=“categories”> NẤM </p>
<p class=“title”>THỦY TIÊN NÂU</p>
</a>
<p class=“intro”>imperdiet doming id quod
mazim placerat facer </p>
<p class=“price”>26.000Đ / Gói</p>
<a href=“#” class=“buy-now-btn”>MUA NGAY</a> </div>
</div>
<div class=“item white-box m2”> <img src=“img/new-product/item-3.png” alt=“alt” class=“radius-box”>
<div class=“g1”> <a href=“product.htm” class=“title-link”>
<p class=“categories”> RAU </p>
<p class=“title”>BẮP CẢI TRẮNG</p>
</a>
<p class=“intro”>non habent claritatem insitam
est usus legentis</p>
<p class=“price”>18.000Đ / Kg</p>
<a href=“#” class=“buy-now-btn”>MUA NGAY</a> </div>
</div>
|
Phần Hot Products: chúng ta thay thế <!– hot products erea –>
|
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
|
<h2 class=“title white-box”>SẢN PHẨM NỔI BẬT</h2>
<!– end #title –>
<div id=“products-box”>
<div class=“item white-box m3”>
<div class=“g2”> <img src=“img/hot-product/item-1.png” alt=“alt” class=“radius-box”> <a href=“product.htm” class=“title title-link”>NẤM HƯƠNG</a>
<p class=“intro”>Ut wisi enim ad minim veniam, quis</p>
<p class=“price”>27.000Đ / Gói</p>
<a href=“#” class=“buy-now-btn”>MUA NGAY</a> </div>
</div>
<div class=“item white-box m3”>
<div class=“g2”> <img src=“img/hot-product/item-2.png” alt=“alt” class=“radius-box”> <a href=“product.htm” class=“title title-link”>NẤM ĐÙI GÀ</a>
<p class=“intro”>Quam nunc putamus parum
claram, anteposuerit </p>
<p class=“price”>100.000Đ / Kg</p>
<a href=“#” class=“buy-now-btn”>MUA NGAY</a> </div>
</div>
<div class=“item white-box m3”>
<div class=“g2”> <img src=“img/hot-product/item-3.png” alt=“alt” class=“radius-box”> <a href=“product.htm” class=“title title-link”>NẤM RƠM</a>
<p class=“intro”>Eodem modo typi, qui nunc
nobis videntur parum clari</p>
<p class=“price”>17.000Đ / 100Gram</p>
<a href=“#” class=“buy-now-btn”>MUA NGAY</a> </div>
</div>
<div class=“item white-box last”>
<div class=“g2”> <img src=“img/hot-product/item-4.png” alt=“alt” class=“radius-box”> <a href=“product.htm” class=“title title-link”>NẤM SÒ TƯƠI</a>
<p class=“intro”>Ut wisi enim ad minim veniam, quis</p>
<p class=“price”>7.000Đ / Gram</p>
<a href=“#” class=“buy-now-btn”>MUA NGAY</a> </div>
</div>
</div>
<!– end #products-box –>
|
Như vậy chúng ta đã hoàn thành phần thân chính của trang web. Chúng ta tiếp tục với phần Footer
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
|
<div class=“wrapper”>
<div class=“item-1”>
<p class=“title”>Thông Tin Liên Hệ</p>
<ul>
<li>Công ty TNHH Rau Xanh</li>
<li>140 Lê Trọng Tấn, P. Tây Thạnh, Q. Tân Phú, Tp. HCM</li>
<li>Điện thoại: 08. 38161673 – Email: cntp@cntp.edu.vn</li>
<li id=“maps” class=“white-box”>
<iframe width=“346” height=“146” frameborder=“0” scrolling=“no” marginheight=“0” marginwidth=“0” src=“https://maps.google.com/maps?f=q&source=s_q&hl=vi&geocode=&q=140+L%C3%AA+Tr%E1%BB%8Dng+T%E1%BA%A5n,+T%C3%A2y+Th%E1%BA%A1nh,+T%C3%A2n+Ph%C3%BA,+H%E1%BB%93+Ch%C3%AD+Minh,+Vi%E1%BB%87t+Nam&aq=0&oq=140+l%C3%AA+tr%E1%BB%8Dng+t%E1%BA%A5n&sll=10.754792,106.695228&sspn=1.556886,2.705383&ie=UTF8&hq=&hnear=140+L%C3%AA+Tr%E1%BB%8Dng+T%E1%BA%A5n,+T%C3%A2y+Th%E1%BA%A1nh,+T%C3%A2n+Ph%C3%BA,+H%E1%BB%93+Ch%C3%AD+Minh,+Vi%E1%BB%87t+Nam&t=m&ll=10.806076,106.628752&spn=0.012309,0.029697&z=14&iwloc=A&output=embed”></iframe>
</li>
</ul>
</div>
<div class=“item-2”>
<p class=“title”>Sản Phẩm</p>
<ul>
<li><a href=“list-products.htm”>Rau xanh</a></li>
<li><a href=“list-products.htm”>Nấm</a></li>
<li><a href=“list-products.htm”>Trái cây</a></li>
<li><a href=“list-products.htm”>Thực phẩm</a></li>
</ul>
</div>
<div class=“item-3”>
<p class=“title”>Thông Tin</p>
<ul>
<li><a href=“#”>Quy định sử dụng</a></li>
<li><a href=“#”>Site map</a></li>
<li><a href=“#”>Hướng dẫn mua hàng</a></li>
</ul>
</div>
<div class=“item-4”>
<p class=“title”>Mạng Xã Hội</p>
<ul>
<li><a href=“#”><img src=“img/icon_facebook.png”>Facebook</a></li>
<li><a href=“#”><img src=“img/icon_twitter.png”>Twitter</a></li>
<li><a href=“#”><img src=“img/icon_rss.png”>RSS</a></li>
</ul>
</div>
</div>
<div class=“clear”> </div>
|
Chúng ta đã hoàn thành xong cấu trúc HTML cho trang web bán rau.
Huong dan thiet ke html trang ban rau sach
Sau khi hoàn thành HTML
ĐỊNH DẠNG CSS CHO TRANG
RESET CSS
|
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
|
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
|
PHẦN CHUNG
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
body {
font-family: Tahoma;
font-size: 14px;
}
a:link, a:visited {
color: #00f;
text-decoration: none;
}
a:hover {
color: #f00;
}
.wrapper {
width: 960px;
margin: 0 auto;
position: relative;
}
.clear {
clear: both;
}
|
PHẦN TOP
|
1
2
3
4
5
6
7
8
9
10
11
|
#top {
height: 179px;
border-bottom: 1px solid #c3c3c3;
background: url(../img/bg.png);
z-index: 11;
}
#top #top-bar {
height: 40px;
width: 100%;
background: url(../img/top-bg.png);
}
|
PHẦN TOP BAR VÀ CART
|
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
#top-bar #cart {
widths: 160px;
height: 59px;
float: right;
position: relative;
cursor: pointer;
}
#cart:hover {
background: url(../img/btn-cart-bg.png) repeat-x;
}
#cart:hover #count {
color: #fff;
}
#cart:hover #cart-box {
display: block;
}
#cart #btn-cart{
float: left;
}
#cart #count {
font-weight: bold;
margin-left: 10px;
}
#cart #cart-box {
display: none;
padding: 10px;
position: absolute;
width: 250px;
right: 0px;
top: 42px;
z-index: 1000000;
background: url(../img/box-new-bg.png) repeat-x #fff;
box-shadow: 0 0 15px #000;
outline: none;
}
#cart-box #big-num {
color: #f00;
font-size: 40px;
}
#cart-box #small-num {
color: #f00;
font-size: 20px;
}
#cart-box a:link, #cart-box a:visited {
color: #000;
}
#cart-box a:hover {
color: #f00;
}
#cart-box #c1 {
font-size: 30px;
color: #f00;
}
#cart-box ul li a {
height: 24px;
display: block;
margin-bottom: 10px;
line-height: 24px;
}
#cart-box ul li a:before {
content: “» “;
}
#cart-box #check-out {
height: 39px;
line-height: 39px;
border: 1px solid #fff;
background: url(../img/menu-bg.png);
color: #fff;
font-weight: bold;
font-size: 16px;
text-align: center;
}
#cart-box #check-out:before {
content: “”;
}
#cart-box #check-out:hover {
background: url(../img/menu-hover-bg.png);
}
|
PHẦN LOGO, USER VÀ SEARCH
|
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
|
#top-bar div.wrapper {
height: 40px;
line-height: 40px;
}
#logo {
height: 121px;
width: 380px;
margin: 9px 0;
position: relative;
}
#logo #logo-img {
margin-right: 8px;
}
#logo #logo-text {
top: 44px;
position: absolute;
}
#user, #search {
position: absolute;
top: 59px;
}
#search {
right: 0px;
}
#search input {
height: 28px;
width: 230px;
}
#user {
right: 240px;
line-height: 1.2;
text-align: right;
}
|
PHẦN MENU
|
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
#menu_container {
width: 719px;
margin: 0 auto;
text-align: center;
}
#menu {
position: absolute;
top: 150px;
border: 1px solid;
border-radius: 5px;
background: url(../img/menu-bg.png) repeat-x;
}
#menu>li {
float: left;
position: relative;
}
#menu > li:first-child a {
background: none;
}
#menu > li > a {
width: 120px;
height: 58px;
line-height: 58px;
background: url(../img/menu-seperate.png) no-repeat;
}
#menu a:hover, #menu .active a{
color: #fff;
}
#menu .active, #menu li:hover {
background: url(../img/menu-hover-bg.png);
}
#menu li:hover ul {
display: block;
}
#menu li ul {
position: absolute;
width: 110px;
left: 5px;
border: 1px solid;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
display: none;
z-index: 10000;
}
#menu ul li a, #menu > li > a {
font-size: 15px;
font-weight: bold;
display: block;
color: #000;
}
#menu ul li a {
height: 21px;
line-height: 21px;
background: url(../img/menu-popup-bg.png);
}
#menu ul li {
border-top: 1px solid #000;
}
#menu ul li:first-child {
border-top: none;
}
|
PHẦN BODY
SLIDE
|
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
#body {
margin-top: 40px;
position: relative;
}
#slides {
background: url(../img/bg.png);
width: 718px;
height: 466px;
float: left;
}
#slides div.slide, .slides_container {
position: relative;
height: 466px;
}
.slide img {
position: absolute;
left: 426px;
top: 28px;
}
.s1 {
width: 370px;
text-align: right;
top: 100px;
position: absolute;
left: 46px;
}
.slide-title {
}
.slide-title a:link, .slide-title a:visited {
color: #000;
font-size: 24px;
font-weight: bold;
display: block;
transition: color .2s;
-moz-transition: color .2s;
-webkit-transition: color .2s;
-o-transition: color .2s;
}
.slide-title a:hover {
color: #f00;
}
.slide-intro {
font-size: 18px;
margin: 10px 0;
color: #838383;
}
.slide-buy-now-btn {
}
.slide-price {
font-size: 24px;
font-weight: bold;
}
.slide-buy-now-btn:link, .slide-buy-now-btn:visited, .item .buy-now-btn:link, .item .buy-now-btn:visited {
color: #fff;
}
.slide-buy-now-btn:link {
float: right;
display: block;
width: 140px;
height: 50px;
line-height: 50px;
background: url(../img/slide-btn-buy-now.png);
margin: 15px 0;
text-align: center;
font-size: 24px;
transition: box-shadow .2s;
-moz-transition: box-shadow .2s;
-o-transition: box-shadow .2s;
-webkit-transition: box-shadow .2s;
}
.slide-buy-now-btn:hover, .buy-now-btn:hover {
box-shadow: 0 0 5px #000;
}
.pagination {
position: absolute;
top: 430px;
left: 40px;
}
.pagination li {
float: left;
background: url(../img/pagination.png) no-repeat;
}
.pagination li a {
margin-right: 5px;
display: block;
font-size: 0px;
height: 11px;
width: 11px;
}
.pagination .current, .pagination li:hover {
background-position: 0px -11px;
}
|
PHẦN SUPPORT VÀ SALE OFF
|
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
|
.module–left {
width: 226px;
height: 226px;
float: right;
margin–bottom: 12px;
background: url(../img/bg.png);
text–align: center;
}
.module–left .title {
font–size: 20px;
height: 34px;
line–height: 44px;
}
.module–seperate {
margin: 0px;
}
.module–img–yahoo {
margin: 10px;
}
.module–left a:link, .module–left a:visited {
display: block;
font–size: 16px;
color: #000;
}
.module–left a:hover {
color: #f00;
}
|
PHẦN SẢN PHẨM MỚI
|
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
#new-products {
height: 186px;
width: 100%;
}
.new-product-item>img {
display: none;
}
.new-product-item .item {
height: 186px;
width: 306px;
float: left;
position: relative;
background: url(../img/box-new-bg.png) repeat-x;
}
.m1 {
margin-right: 18px;
}
.new-product-item .item img {
position: absolute;
top: 17px;
left: 10px;
}
.new-product-item .item .g1 {
position: absolute;
left: 135px;
width: 170px;
}
.new-product-item .item .g1 .categories {
font-size: 24px;
font-weight: bold;
margin: 20px 0 8px 0;
}
.new-product-item .item .g1 .title {
font-size: 16px;
margin-bottom: 10px;
}
.new-product-item .item .g1 .intro {
width: 113px;
color: #838383;
margin-bottom: 10px;
font-size: 12px;
}
.new-product-item .item .g1 .price {
font-weight: bold;
margin-bottom: 10px;
}
.item .buy-now-btn {
text-align: center;
height: 28px;
width: 85px;
display: block;
line-height: 28px;
background: url(../img/btn-buy-now.png);
position: absolute;
transition: box-shadow .2s;
-moz-transition: box-shadow .2s;
-o-transition: box-shadow .2s;
-webkit-transition: box-shadow .2s;
}
|
SẢN PHẨM HOT
|
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
#hot-products {
width: 100%;
margin-top: 12px;
}
#hot-products h2.title {
height: 36px;
line-height: 36px;
background: url(../img/hot-product-title-bg.png);
color: #fff;
font-size: 14px;
font-weight: bold;
padding-left: 10px;
}
#products-box {
width: 940px;
margin: 0 auto;
margin-top: 10px;
}
#products-box .item {
width: 216px;
height: 235px;
float: left;
}
#products-box .m3 {
margin-right: 20px;
}
#products-box .item .g2 {
padding: 5px;
}
#products-box .item .g2 .title {
display: block;
margin-top: 5px;
font-weight: bold;
}
.item .title-link:link, .item .title-link:visited {
color: #000;
}
.item .title-link:hover {
color: #f00;
transition: color .2s;
-moz-transition: color .2s;
-webkit-transition: color .2s;
-o-transition: color .2s;
}
#products-box .item .g2 .intro {
color: #838383;
margin: 5px 0;
}
#products-box .item .g2 .price {
font-weight: bold;
margin-bottom: 5px;
}
.white-box {
border: 1px solid #fff;
outline: 1px solid #c3c3c3;
}
.radius-box {
border-radius: 5px;
border: 1px solid #fff;
box-shadow: 0 0 1pt #000;
}
|
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
40
41
42
43
44
45
46
|
#footer {
margin-top: 28px;
border-top: 1px solid #c3c3c3;
background: url(../img/bg.png);
padding: 14px;
}
#footer .item-1 {
width: 350px;
float: left;
}
#footer .item-2, #footer .item-3, #footer .item-4 {
width: 160px;
float: left;
margin-left: 20px;
}
#footer .title {
font-weight: bold;
margin-bottom: 5px;
}
#footer ul {
margin-left: 10px;
}
#footer ul li {
margin-bottom: 10px;
}
#footer #maps {
margin-top: 10px;
}
#footer .item-2 ul li:before, #footer .item-3 ul li:before {
content: “» “;
}
#footer .item-4 ul li a {
height: 24px;
line-height: 24px;
display: block;
}
#footer .item-4 ul li a img {
width: 24px;
margin-right: 5px;
}
#footer a:link, #footer a:visited {
color: #000;
}
#footer a:hover {
color: #f00;
}
|
JAVASCRIPT
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script type=“text/javascript” src=“http://code.jquery.com/jquery-latest.js”></script>
<script src=“js/slides.min.jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function(){
$(“#slides”).slides({
preload: true,
play: 5000,
pause: 2500,
hoverPause: true
});
})
</script>
|
Hoàn thành website
Huong dan thiet ke html trang ban rau sach 2
Website Hoàn Thành