THIẾT KẾ GIAO DIỆN VỚI CSS - TÀI LIỆU THỰC HÀNH: PHÁT TRIỂN ỨNG DỤNG WEB

</ul>

</body>

</html>

Sử dụng thẻ ul, li hiển thị theo dạng menu ngang ( sử dụng display hiển thị theo dạng inline)

Hình 5-2: hiển thị theo dạng inline CODE THAM KHẢO

Ở thẻ li thay đổi thuộc tính display sang inline li{

color:#000000;

border:ridge #FF0000 2px;

background-color:#33FF00;

list-style-position:inside;

padding-left:15px;

width:20%;

}

Bài 2: Sử dụng CSS xây dựng giao diện theo yêu cầu (sử dụng thẻ div thiết kế giao diện)

Hình 5-3: Bố cục website Hướng dẫn:

- Bố cục trang web bao gồm đương viền bao bên ngoài website - Header, menu top, menu left, menu right, footer

- Giữa các ô các khoãng cách 5px - Header, Footer có nền màu xanh.

- Sử dụng các thuộc tính margin, padding, float, clear để thiết kế giao diện và canh chỉnh ccs thẻ nằm đúng vị trí.

- Thiết lặp text left menu và right menu cách lề trái 10px

Do the div là thẻ dạng block nên mặc định các thẻ nằm xếp chồng lên nhau, muốn tiến hành thiết lặp các thẻ div nằm theo giao diện yêu cầu phải sử dụng thẻ float để thiết lặp vị trí mong muốn (tham khảo Bài 6 , mục V phần Classification thuộc tính float).

Hình 5-4: Giao diện sử dụng các thẻ div thiết kế CODE THAM KHẢO

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<div>

<div>Header</div>

<div>

<div>content</div>

<div>right</div>

</div>

<div>Footer</div>

</div>

</body>

</html>

Sau khi thiết lặp CSS cho thẻ

Hình 5-5: Sử dụng css thiết kế bố cục website CODE THAM KHẢO

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

body{

margin-top: 0px;

margin-left: 0px;

margin-right: 0px;

} ul,li{

margin: 0px, 0px;

padding: 0px 0px;

}

#topmenu{}

#topmenu ul {

margin-top: 0px;

width: 100%;

list-style:cjk-ideographic;

}

#topmenu li {

list-style-position:inside;

border: solid 1px #EC797B;

display: inline;

margin-right: 15px;

}

#topmenu li:first-child {

margin-left: 15px;

} .menu{

background-color: #F3E6E7;

} .menu ul {

margin-top: 0px;

width: 100%;

list-style:cjk-ideographic;

} .menu li {

list-style-position:inside;

border: solid 1px #EC797B;

}

</style>

</head>

<body>

<p style="position: absolute; left: 250px; top: 20px" >PHÁT TRIỂN ỨNG DỤNG WEB 1</p>

</div>

<ul>

<li><a href="#">Trang chu</a></li>

<li><a href="#">Giới Thiệu</a></li>

<li><a href="#">Thông tin tuyển sinh</a></li>

<li><a href="#">Thông tin đào tạo</a></li>

</ul>

</div>

<li><a href="#">Trang chu</a></li>

<li><a href="#">Giới Thiệu</a></li>

<li><a href="#">Thông tin tuyển sinh</a></li>

<li><a href="#">Thông tin đào tạo</a></li>

</div>

<p>content</p>

</div>

<p>right</p>

</div>

<p>Footer</p>

</div>

</body>

</html>

Dalam dokumen TÀI LIỆU THỰC HÀNH: PHÁT TRIỂN ỨNG DỤNG WEB (Halaman 131-137)