Hướng dẫn xây dựng trang HTML/CSS Bán rau

Hôm nay Hocweb.com.vn sẽ hướng dẫn các bạn xây dựng HTML/CSS trang Bán rau. Các bạn có thể download source của trang tại đây để có các hình ảnh sử dụng. Các hình ảnh đã được chuẩn bị sẵn, các bạn có thể xem lại các bài viết trước để biết cách cắt ảnh bằng photoshop.

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.

<!DOCTYPE html>

<html>

<head>

<title>- RAUXANH -</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</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

</div>

</div>

</div>

</div>

Top bar: chúng ta thay thế <!– Hotline and cart button –>

<div class="wrapper"> HOTLINE : <span style="font-weight:bold">092 3433 409</span>

<ul>

<li><a href="#">Bạn có <span id="c1">3</span> sản phẩm trong giỏ</a></li>

<li><a href="#" id="check-out" class="radius-box"><span id="">THANH TOÁN</span></a></li>

</ul>

</div>

Phần Logo, User và Search Form: chúng ta thay thế <!– logo , user area and search form –>

<p>Xin chào Khách! <br />

(<a href="#">Đăng nhập</a> hoặc <a href="#">Đăng ký</a>) </p>

</div>

</form>

Phần Menu: chúng ta thay thế <!– menu area –>

<li class="active"><a href="#">TRANG CHỦ</a></li>

<li><a href="introduction.htm">GIỚI THIỆU</a></li>

<ul>

</ul>

</li>

</ul>

Hoàn thành phần Top

PHẦN BODY

Layout của phần body

</div>

</div>

</div>

</div>

</div>

</div>

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

<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>

</div>

<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>

</div>

<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>

</div>

Chúng ta sẽ viết code JavaScript ở phần sau.

Phần Support: chúng ta thay thế <!– support area –>

<p class="title">TƯ VẤN TRỰC TUYẾN</p>

<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 –>

Phần Sản Phẩm Mới: chúng ta thay thế <!– new products area –>

</a>

<p class="intro">luptatum zzril delenit augue dui dolore</p>

</div>

</a>

<p class="intro">imperdiet doming id quod

mazim placerat facer </p>

</div>

<p class="title">BẮP CẢI TRẮNG</p>

</a>

<p class="intro">non habent claritatem insitam

est usus legentis</p>

</div><a href="#"><img src="img/free-ship.png" class="no-margin"></a>

Phần Hot Products: chúng ta thay thế <!– hot products erea –>

<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>

</div>

<p class="intro">Quam nunc putamus parum

claram, anteposuerit </p>

</div>

<p class="intro">Eodem modo typi, qui nunc

nobis videntur parum clari</p>

</div>

<p class="intro">Ut wisi enim ad minim veniam, quis</p>

</div>

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

<p class="title">Thông Tin Liên Hệ</p>

<ul>

<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>

</ul>

</div>

<ul>

</ul>

</div>

<p class="title">Thông Tin</p>

<ul>

<li><a href="#">Hướng dẫn mua hàng</a></li>

</ul>

</div>

<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>

</ul>

</div>

Chúng ta đã hoàn thành xong cấu trúc HTML cho trang web bán rau.

Sau khi hoàn thành HTML

ĐỊNH DẠNG CSS CHO TRANG

RESET CSS

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

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

#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

#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

#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

#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

#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

.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

#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

#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

#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

$(document).ready(function(){

$("#slides").slides({

preload: true,

play: 5000,

pause: 2500,

hoverPause: true

});

})

</script>

Hoàn thành website

Website Hoàn Thành

Xem thêm tại : http://hocweb.com.vn/category/hocweb/photoshop-html-css/html-css/

-----------------------------------------------------------------------------------------------------------

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

quảng cáo

Hướng dẫn xây dựng trang HTML/CSS Bán rau

About Author

Advertisement

Đăng nhận xét

Biểu mẫu liên hệ

Hướng dẫn xây dựng trang HTML/CSS Bán rau

Share to:

About Author

Advertisement

Next

Bài đăng Mới hơn

Previous

Bài đăng Cũ hơn

Đăng nhận xét

Biểu mẫu liên hệ