CSS Hướng dẫn

Chủ Nhật, 29 tháng 12, 2013

CSS Hướng dẫn

«Trở lại

Chương tiếp theo »

Demo: Hướng dẫn

Thanh điều hướng

Có điều hướng dễ dàng sử dụng là rất quan trọng cho bất kỳ trang web.

Với CSS bạn có thể chuyển đổi menu HTML nhàm chán vào thanh điều hướng đẹp.

Hướng dẫn = Danh sách Liên kết

Một thanh điều hướng cần HTML tiêu chuẩn làm căn cứ.

Trong ví dụ của chúng tôi, chúng tôi sẽ xây dựng các thanh điều khiển từ một danh sách tiêu chuẩn HTML.

Một thanh điều hướng cơ bản là một danh sách các liên kết, do đó, bằng cách sử dụng <ul> và các yếu tố làm cho cảm giác hoàn hảo <li>:

Ví dụ

<!DOCTYPE html>

<html>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

</body>

</html>

Thử nó cho mình »

Bây giờ chúng ta hãy loại bỏ những viên đạn và lề và padding từ danh sách:

Ví dụ

<!DOCTYPE html>

<html>

<head>

<style>

{

list-style-type:none;

margin:0;

padding:0;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

Thử nó cho mình »

Ví dụ giải thích:

list-style-type: none - Loại bỏ những viên đạn. Một thanh điều hướng không cần đánh dấu danh sách
Thiết lập lề và padding 0 để loại bỏ các thiết lập trình duyệt mặc định

Mã trong ví dụ trên là mã tiêu chuẩn được sử dụng trong cả hai thanh điều hướng theo chiều dọc, và theo chiều ngang.

Dọc Hướng dẫn

Để xây dựng một thanh điều hướng theo chiều dọc, chúng tôi chỉ cần các yếu tố phong cách <a>, ngoài các mã trên:

Ví dụ

<!DOCTYPE html>

<html>

<head>

<style>

{

list-style-type:none;

margin:0;

padding:0;

}

{

display:block;

width:60px;

background-color:#dddddd;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<p>A background color is added to the links to show the link area.</p>

<p>Notice that the whole link area is clickable, not just the text.</p>

</body>

</html>

Thử nó cho mình »

Ví dụ giải thích:

display: block - Hiển thị các liên kết như các yếu tố khối làm cho toàn bộ khu vực có thể click liên kết (không chỉ là văn bản), và nó cho phép chúng ta xác định chiều rộng
chiều rộng: 60px - yếu tố Khối mất toàn bộ chiều rộng có sẵn theo mặc định. Chúng tôi muốn chỉ định một chiều rộng 60 px

	Lưu ý: Luôn luôn xác định chiều rộng cho các yếu tố <a> trong một thanh điều hướng theo chiều dọc. Nếu bạn bỏ qua chiều rộng, IE6 có thể tạo ra kết quả bất ngờ.

Ngang Hướng dẫn

Có hai cách để tạo ra một thanh điều hướng nằm ngang. Sử dụng nội tuyến hoặc nổi danh sách các mặt hàng.

Cả hai phương pháp làm việc tốt, nhưng nếu bạn muốn các liên kết đến có cùng kích thước, bạn phải sử dụng các phương pháp nổi.

Danh sách nội tuyến mục

Một cách để xây dựng một thanh điều hướng nằm ngang là để xác định các yếu tố <li> như nội tuyến, ngoài các mã "tiêu chuẩn" ở trên:

Ví dụ

<!DOCTYPE html>

<html>

<head>

<style>

{

list-style-type:none;

margin:0;

padding:0;

}

{

display:inline;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

Thử nó cho mình »

Ví dụ giải thích:

display: inline; - Theo mặc định, các yếu tố <li> là những yếu tố khối. Ở đây, chúng tôi loại bỏ các ngắt dòng trước và sau mỗi mục, hiển thị chúng trên một dòng

Danh sách các đầu nổi

Trong ví dụ trên các liên kết có độ rộng khác nhau.

Đối với tất cả các liên kết để có một chiều rộng bằng nhau, nổi các yếu tố <li> và chỉ định một chiều rộng cho các yếu tố <a>:

Ví dụ

<!DOCTYPE html>

<html>

<head>

<style>

{

list-style-type:none;

margin:0;

padding:0;

overflow:hidden;

}

{

float:left;

}

{

display:block;

width:60px;

background-color:#dddddd;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>

<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>

<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

</body>

</html>

Thử nó cho mình »

Ví dụ giải thích:

nổi: trái - sử dụng phao để có được các yếu tố khối trượt bên cạnh nhau
display: block - Hiển thị các liên kết như các yếu tố khối làm cho toàn bộ khu vực có thể click liên kết (không chỉ là văn bản), và nó cho phép chúng ta xác định chiều rộng
chiều rộng: 60px - Từ các yếu tố khối chiếm toàn bộ chiều rộng có sẵn, họ không thể nổi bên cạnh nhau. Chúng tôi xác định chiều rộng của các liên kết đến 60px

«Trở lại

Chương tiếp theo »

Các tin khác

lập trình trực tuyến

Pages

Chủ Nhật, 29 tháng 12, 2013