Tạo một CSS layout từ một bản thiết kế

Tạo một CSS layout từ một bản thiết kế - phần 6

06 Phần này chúng ta sẽ đưa vào layout một số thành phần chính, tiêu biểu và có ở hầu hết các website

Navigation Links
Heading
Content
Footer infomation

Chúng ta sẽ bắt đầu bằng việc tạo 1 class tên là hidden. Bạn nên đặt class này ở phần đầu của file Css, sau thẻ body.

   .hidden {
	display: none;
   }

Sau khi bạn tạo một class là hidden trong file css. Chúng ta bắt đầu đưa vào nội dung của từng thành phần trong website. Ta sẽ bắt đầu từ trên với phần Header

Phần tiêu đề chúng ta có nhiều kích thước quy định cho phần chữ của tiêu đề, được đặt từ h1 (lớn nhất) cho tới h6. Trong ví dụ này ta dùng h1 làm tiêu đề của trang, ta mở file index.html ra và thêm đọan code sau vào giữa 2 thẻ header

<div id="header">
	<h1>Enlighten Designs</h1>
</div>

Sau khi ta có được dòng chữ trên header. Ta có thể thấy vị trí của nó hiện nay không hiển thị giống nhau trên mỗi trình duyệt. Vì vậy trong file Css ta quy định vị trí của nó với div header là bằng 0, để đưa về gốc tọa độ nằm trên cùng bên trái.

   h1 {
	margin: 0;
	padding: 0;
   }

Bây giờ ta sẽ đưa nội dung trong phần footer. Phần này bao gồm 1 menu nằm ngang, text và các đường link. Thêm đọan code này vào file html, nằm giữ thẻ footer nhé

<div id="main-nav">
	<dl class="hidden">
		<dt id="about"><a href="#">About</a></dt>
		<dt id="services"><a href="#">Services</a></dt>
		<dt id="portfolio"><a href="#">Portfolio</a></dt>
		<dt id="contact"><a href="#">Contact Us</a></dt>
	</dl>
</div>
Copyright © Enlighten Designs
Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a>
and <a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>

Đến đây ta đã có thêm phần text ở header và footer. Tuy nhiên hiện nay vẫn chưa có style nên chỉ đơn thuần là text mà thôi

Tiếp theo ta sẽ đặt style của thẻ h2 và thẻ p trong file Css. Nên nhớ style của chúng chỉ có giá trị trong content thôi nhé.

#content h2 {
	margin: 0;
	padding: 0;
}

#content p {
	margin: 0;
	padding: 0;
}

Set as favorite

Bookmark

Comments (8) Add Comment

..., Cường ơi. mình đang "học" thiết kế web

September 24, 2008

..., bài học rất hay.thanks

February 27, 2009

..., very good.da lam thi lam cho trot di co phan 3 , 5

May 21, 2009

..., http://graphiclancer.com/css-t...ml?start=3 Link �

May 21, 2009

..., phần đã hidden thì sao mà hiện lên đư�

June 13, 2009

..., don gian vi Phan 4 ko co trong most read :)) nen nh

September 08, 2009

..., các bạn cố gắng search google đi ..chỉ c�

October 24, 2009

..., mi`nh co cu`ng cau hoi voi ban o tren. class hidden

March 09, 2010

Write comment

Graphiclancer.com

My Friend's blog

Sponsor

Categories

Most read

Links

Recent Templates

Working