LAB CSS
1. Mở file tinmoi.html
2. Định dạng cho div có tên tinmoi
#tinmoi { width: 660px; }
3. Định dạng div tin mới nhất
#tinmoi .tinmoinhat { width:330px; float:left; color:#336699; }
4. Định dạng cho div tin mới tiếp theo
#tinmoi .tinmoitieptheo { float:left; width:330px; }
5. Bổ sung định dạng cho .tinmoinhat
height:175px; overflow:hidden
6. Bổ sung định dạng cho div .tinmoitieptheo
height:175px; overflow:hidden; white-space:nowrap;
7. Định dạng cho div .theloai
#tinmoi .theloai {
font-size:18px; background-color:#003300; color:#FFF;
padding-top:5px; padding-bottom:5px; clear:left
}
8. Định dạng cho các liên kết trong thể loại
#tinmoi .theloai a {
Color ; text-decoration:none; margin-left:5px; font-size:16px;}
#tinmoi .theloai a:hover{ color:#6CC; text-decoration:underline; }
9. Định dạng cho tin trong div tin mới nhất
#tinmoi .tinmoinhat a {
text-decoration:none; color:#003366;
font-size:16px; font-weight:bold }
#tinmoi .tinmoinhat a:hover{ text-decoration:underline; color:#C09}
#tinmoi .tinmoinhat img { margin-right: 5px; }
10. Định dạng cho các tin trong tin mới tiếp theo
#tinmoi .tinmoitieptheo a { color:#003333; text-decoration:none; }
#tinmoi .tinmoitieptheo a:hover{text-decoration:underline; color:#C09}
#tinmoi .tinmoitieptheo p {
margin-top:10px; margin-bottom:10px; padding-left:5px;
}
11. Chỉnh định dạng cho div chứa tin mới tiếp theo
border-left: dotted 1px #030; width: 329px
Bấm F12 để kiểm tra.
<!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>
<style>
#tinmoi { width:660px ;}
#tinmoi .tinmoinhat { width:330px; float:left; color:#336699; height:175px; overflow:hidden; }
#tinmoi .tinmoitieptheo { float:left; width:329px; border-left: dotted 1px #030; }
#tinmoi .theloai { font-size:18px; background-color:#003300; color::#FFF; padding-top:5px; padding-bottom: 5px; clear:left;}
#tinmoi .theloai a{ color::#9C0; text-decoration:none; margin-left:5px; font-size:16px;}
#tinmoi .theloai a:hover{ color:#6CC; text-decoration:underline;}
#tinmoi .tinmoinhat a{ text-decoration:none; color::#003366; font-size:16px; font-weight:bold}
#tinmoi .tinmoinhat a:hover{ text-decoration:underline; color:#C09;}
#tinmoi .tinmoitieptheo a { color:#003333; text-decoration:none;}
#tinmoi .tinmoitieptheo a:hover{ text-decoration: underline; color::#C09;}
#tinmoi .tinmoitieptheo p { margin-top:5px; margin-bottom:10px; padding-left:10px;}
</style>
</head>
<body>
<div id="tinmoi">
<div class="theloai"> Tin xã hội
<a href="#"> Thể thao </a>
<a href="#"> Du lịch </a>
<a href="#"> Xã hội </a>
<a href="#"> Khoa học </a>
<a href="#"> Văn hoá </a> </div>
<!-- div theloai -->
<div class="tinmoinhat">
<a href="#"> Những thảm họa hàng không ở New York </a>
<p> <img src="hinh/tm1.jpg" width="80" height="80" align="left" />
Khủng bố lái máy bay đâm thẳng vào tòa tháp đôi của Trung tâm Thương mại Quốc tế; một
khu vực lớn trên mặt đất ngập lửa khói vì máy bay lao xuống. Dưới đây là hình ảnh các
thảm họa hàng không từng xảy ra ở New York, Mỹ.
</p>
</div> <!-- tinmoinhat -->
<div class="tinmoitieptheo">
<p> <a href="#"> Trục vớt máy bay lao xuống sông </a> </p>
<p> <a href="#"> Máy bay chở hàng trăm khách khách lao xuống sông New York</a> </p>
<p> <a href="#"> Người hùng trong cú hạ cánh kỳ diệu ở New York </a> </p>
<p> <a href="#"> Tại sao chim có thể làm rơi máy bay </a> </p>
<p> <a href="#"> 'Thật thần kỳ, anh ấy cho máy bay nổi trên sông' </a> </p>
</div> <!-- div id=tinmoitieptheo -->
<div class="theloai"> Thế giới web
<a href="#" > Tools </a>
<a href="#" > Website hữu ích </a>
<a href="#" > Scripts hữu dụng </a> </div>
<!-- div theloai -->
<div class="tinmoinhat">
<a href="#"> Âm lịch </a>
<p> <img src="hinh/tm2.jpg" width="80" height="80" align="left" />
Nếu muốn chèn lịch vào trang web , có cả âm lịch thì vào địa chỉ:
</p>
</div> <!-- tinmoinhat -->
<div class="tinmoitieptheo">
<p> <a href="#"> www.socnhi.com </a> </p>
<p> <a href="#"> Công cụ dịch Anh – Việt trực tuyến </a> </p>
<p> <a href="#"> Địa chỉ download </a> </p>
<p> <a href="#"> Đủ loại tool cho CSDL, ứng dụng văn phòng ... </a> </p>
<p> <a href="#"> Thiết kế nút 3D </a> </p>
</div> <!-- div tinmoitieptheo -->
<div class="theloai"> Nghệ thuật sống
<a href="#" > Sống đẹp </a>
<a href="#" > Lời hay ý đẹp </a> </div>
<!-- div theloai -->
<div class="tinmoinhat">
<a href="#"> Sự bình yên </a>
<p> <img src="hinh/tm3.jpg" width="80" height="80" align="left" />
Một vị vua treo giải thưởng cho họa sĩ nào vẽ được một bức tranh đẹp nhất về sự bình yên. </p>
</div> <!-- tinmoinhat -->
<div class="tinmoitieptheo">
<p> <a href="#"> Lòng mẹ </a> </p>
<p> <a href="#"> Người xây dựng cuộc sống </a> </p>
<p> <a href="#"> Niềm hy vọng trong cơn bỉ cực </a> </p>
<p> <a href="#"> Viết đời mình </a> </p>
<p> <a href="#"> Ba điều giá trị trong cuộc sống </a> </p>
</div> <!-- div tinmoitieptheo -->
<div class="theloai"> Thư giãn
<a href="#"> Thơ hay </a>
<a href="#"> Truyện cười </a> </div>
<!-- div theloai -->
<div class="tinmoinhat">
<a href="#"> BÀi thơ có 8 cách đọc </a>
<p> <img src="hinh/tm4.jpg" width="80" height="80" align="left" />
Đây là một bài thơ thật kỳ lạ. Có đến 8 cách đọc khác nhau
</p>
</div> <!-- tinmoinhat -->
<div class="tinmoitieptheo">
<p> <a href="#"> Yêu </a> </p>
<p> <a href="#"> Ngày Xưa Dư Âm... </a> </p>
<p> <a href="#"> Bình khô đập chén cả cười với nhau </a> </p>
<p> <a href="#"> Lời vàng của sếp </a> </p>
<p> <a href="#"> Bài thơ Tiếng Thu của Lưu Trọng Lư </a> </p>
</div> <!-- div tinmoitieptheo -->
<div class="theloai"> Thường thức
<a href="#"> Mẹo vặt </a>
<a href="#"> Làm bánh </a> </div>
<!-- div theloai -->
<div class="tinmoinhat">
<a href="#"> Làm sao chiên cơm cho ngon </a>
<p> <img src="hinh/tm5.jpg" width="80" height="80" align="left" />
Khi chọn gạo, không nên mua loại gạo cũ, gạo mới làm món cơm chiên có mùi thơm và độ dẻo.
Cơm chiên ngon phải được chiên trên cơm nấu thật ngon. Tức hạt cơm được nấu
chín mềm, không nhão, không khô, có độ dẻo.
</p>
</div> <!-- tinmoinhat -->
<div class="tinmoitieptheo">
<p> <a href="#"> Ðể nhận biết mật ong tốt hay xấu? </a> </p>
<p> <a href="#"> Giấm và mẹo vặt trong gia đình </a> </p>
<p> <a href="#"> Tác dụng của hành tây </a> </p>
<p> <a href="#"> Ðể giữ hoa lâu tàn </a> </p>
<p> <a href="#"> Cách nâng cao tuổi thọ của bộ sạc pin điện thoại di động </a> </p>
</div><!-- div tinmoitieptheo -->
</div><!-- tinmoi -->
</body>
</html>
Untitled Document Những thảm họa hàng không ở New York 
Khủng bố lái máy bay đâm thẳng vào tòa tháp đôi của Trung tâm Thương mại Quốc tế; một khu vực lớn trên mặt đất ngập lửa khói vì máy bay lao xuống. Dưới đây là hình ảnh các thảm họa hàng không từng xảy ra ở New York, Mỹ.
Âm lịch 
Nếu muốn chèn lịch vào trang web , có cả âm lịch thì vào địa chỉ:
Sự bình yên 
Một vị vua treo giải thưởng cho họa sĩ nào vẽ được một bức tranh đẹp nhất về sự bình yên.
Làm sao chiên cơm cho ngon 
Khi chọn gạo, không nên mua loại gạo cũ, gạo mới làm món cơm chiên có mùi thơm và độ dẻo. Cơm chiên ngon phải được chiên trên cơm nấu thật ngon. Tức hạt cơm được nấu chín mềm, không nhão, không khô, có độ dẻo.
Đây là một bài thơ thật kỳ lạ. Có đến 8 cách đọc khác nhau