Baitap Thuchanh CSS

BÀI TẬP NGÔN NGỮ HTML VÀ CSS
Bài tập 01: Tạo trang mô hình về định dạng văn bản: Định nghĩa thẻ tiêu đề h1, h2
và thẻ p tùy ý và áp dụng vào 3 dòng đầu. Dùng thẻ Span thực tạo điểm nhấn: Tô
sáng nền, chữ đậm áp dụng vào dòng thứ 4.
Hướng dẫn :
Bài tập 02 : Tạo trang mô hình về tạo góc gấp cho khung văn bản: Khung có độ
rộng 300px, có khung viền kết hợp gấp góc dưới phải.(gấp góc là 1 ảnh do giáo viên
cung cấp. áp dụng vào theo hình mẫu.
Hướng dẫn :
Bài tập 03 : Mô hình vấn đề chèn hình ảnh và phụ đề theo hình mẫu: Hình ảnh trôi
về bên phải, trong một khoảng trống bằng khoảng 20% độ rộng của các đoạn xung
quanh, có đường viên, văn bản phụ đề in nghiêng, canh giữa, cỡ nhỏ.
Hướng dẫn :
Bài tập 04 : Tạo menu 1 tầng dọc như hình dưới
Gợi ý :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<base target="Mainframe" />
</head>
<style>
#menu{
width:200px;
}
#menu a{
display:block;
height:32px;
background-color:#CCC;
background-repeat:no-repeat;
padding-top:8px;
padding-left:35px;
text-decoration:none;
color:#fff;
font-weight:bold;
}
#menu a:hover{
background-color:#999;
}
</style>
<body>
<div id="menu">
<a href="BAI1_CSS.html">Trang chủ</a>
<a href="BAI2_CSS.html">Sản phẩm</a>
<a href="#">Dịch vụ</a>
<a href="#">Liên hệ</a>
<a href="#">Đăng ký</a>
<a href="#">Đăng nhập</a>
</div>
</body>
</html>
Bài tập 05 : Mô hình định dạng bảng đơn giản dùng CSS: Định dạng Font chữ, cỡ
chữ khoảng các lề, có viền, màu nên cho dòng tiêu đề . .. . theo hình mẫu
Hướng dẫn :
file css
Bài tập 06 : Thiết kế menu ngang 1 cấp

<head>
<title>Thiết kế MeNu</title>
<base target="Mainframe" />
<style>

#menu
{
width:900px;
height:35px;
background-color:#0ff;

}
#menu a
{
display:block;
height:30px;
padding-top:5px;
width:120px;
float:left;
text-align:center;
text-decoration:none;
border-right:1px groove #0000FF;
position:relative;
}
#menu a:hover
{
background-color:#00F;
color:#fff;
font-weight:bold;
}
</style>
</head>
<body>
<div id="menu">
<a href="#">Trang chủ</a>
<a href="#">Giới thiệu</a>
<a href="#">Bản đồ </a>
<a href="#">Liên hệ </a>
<a href="#">Sản phẩm </a>
</div>
</body>
</html>
Bài tập 07 : Thiết kế website đầm bầu theo mẫu sau, hình ảnh do giáo viên cung
cấp.

<head>
<frameset rows="59,32,351,35">
<frame src="logo.html" marginheight="1" noresize scrolling="no"
name="Topframe" />
<frame src="menu.html" marginheight="0" noresize scrolling="no"
name="Topframe">
<frameset cols="140,*">
<frame src="menu_doc.html" marginheight="1" noresize scrolling="no"
name="Leftframe" />
<frame src="BAI6.html" name="Mainframe" />
</frameset>
<frame src="Bai5.html" marginheight="1" noresize scrolling="no"
name="Bottomframe></frameset>
<frame src="UntitledFrame-1"></frameset><noframes></noframes>
<body>
</body>
</html>
//----------------------
BÀI 8 :

<head>
</head>
<body>
<table width="100%" border="0">
<tr>
<td colspan="3" align="center" bgcolor="#00FF00"><p> </p>
<p>KIỂM TRA 45 PHÚT (CHỌN H1)_ĐỀ</p>
<p> </p></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#66FFFF"><table width="100%"
border="0">
<tr>
<td width="10%"> </td>
<td width="11%" align="center">Trang chủ</td>
<td width="10%" align="center">Sản phẩm</td>
<td width="10%" align="center">Liên hệ</td>
<td width="10%" align="center">Hỗ trợ</td>
<td width="14%">Đăng ký thành viên</td>
</tr>
</table></td>
</tr>
<tr>
<td width="19%" valign="top" bgcolor="#CCCCFF"><ol>
<li>Sản phẩm APPLE</li>
<ul type="square">
<li>Điện thoại</li>
<li>Máy tính bảng</li>
<li>Phụ kiện</li>
</ul>
<li>Sản phẩm SAMSUNG</li>
<ul type="square">
<li>Headphone</li>
</ul>
<li>Sản phẩm LENUVO</li>
<ul type="square">
</ul>
<li>Sản phẩm VIVO</li>
<ul type="square">
</ul>
</ol></td>
<td width="58%" align="center" valign="top"><p> </p>
<form id="form1" name="form1" method="post" action="">
<table width="100%" border="0">
<tr>
<td colspan="2" align="center"><p>Đăng kí thành viên</p></td>
</tr>
<tr>
<td width="43%" align="right">Họ và Tên</td>
<td width="57%"><label for="textfield"></label>
<input type="text" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td align="right">ID</td>
<td><input type="text" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td align="right">Pass</td>
<td><input type="text" name="textfield3" id="textfield3" /></td>
</tr>
<tr>
<td align="right">Email</td>
<td><input name="textfield4" type="text" id="textfield4" size="30"
/></td>
</tr>
<tr>
<td align="right"> </td>
<td><input type="submit" name="button" id="button" value="Đăng kí"
/>
<input type="reset" name="button2" id="button2" value="Đăng kí"
/></td>
</tr>
</table>
</form>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
<td width="23%" bgcolor="#CCCCFF"> </td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#66FFFF">Bản quyền thuộc về (ghi tên
học sinh)</td>
</tr>
</table>
</body>
</html>

Baitap Thuchanh CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Baitap Thuchanh CSS

Uploaded by

Copyright:

Available Formats

BÀI TẬP NGÔN NGỮ HTML VÀ CSS

Bài tập 04 : Tạo menu 1 tầng dọc như hình dưới

Bài tập 06 : Thiết kế menu ngang 1 cấp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

You might also like