Untitled Document <!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>
#tinxemnhieu{width:250px;border:1px solid #0099CC;overflow: hidden; white-space:nowrap;}
#tinxemnhieu a{color:#CC3399;text-decoration: none}
#tinxemnhieu a:hover{color:#FFCC00;}
#tinxemnhieu p{background-color: #FFFFCC;border: 1px solid #0099CC;margin-top: 0px; margin-bottom: -1px;padding-top: 5px; padding-bottom: 5px; padding-left: 10px;}
#tinxemnhieu h4{background-color:#0099CC; color:#FFFF00; margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px; padding-left:10px;}
</style>
</head>
<body>
<div id="tinxemnhieu">
<h4>TIN XEM NHIỀU</h4>
<p> <a href="#"> Giá và chất lượng gạo, ai đi đến cùng với người dân? </a> </p>
<p> <a href="#"> Hoàng hôn trên sông Mê Kông </a> </p>
<p> <a href="#"> Độc đáo núi Cấm </a> </p>
<p> <a href="#"> Báo chí quốc tế nói gì về sự kiện Calisto? </a> </p>
<p> <a href="#"> Mười bí quyết cho hạnh phúc </a> </p>
<p> <a href="#"> Khánh Hòa sẽ đăng cai Hoa Hậu Hoàn vũ 2008 </a> </p>
<p> <a href="#"> Hạnh phúc là gì ? </a> </p>
<p> <a href="#"> Làm sao chiên cơm cho ngon </a> </p>
<p> <a href="#"> Bữa cơm nghèo trong cơn sốt gạo </a> </p>
<p> <a href="#"> Mặt bằng giá mới sau cơn sốt gạo </a> </p>
</div>
</body>
</html>
LAB CSS
1. Mở file tinxemnhieu.html
2. Định dạng cho div có tên tinxemnhieu
#tinxemnhieu { width: 250px; border: 1px solid #0099CC; }
F12 xem thử
3. Định dạng cho các tag a trong div tinxemnhieu
#tinxemnhieu a { color: #CC3399; text-decoration: none;}
#tinxemnhieu a:hover { color: #FFCC00; }
F12 xem thử
4. Định dạng cho các tag p trong div tinxemnhieu
#tinxemnhieu p { background-color: #FFFFCC;border: 1px solid #0099CC;}
F12 xem thử
5. Bổ sung 2 thuộc tính sau cho style #tinxemnhieu p
margin-top: 0px; margin-bottom: -1px;
F12 xem thử
6. Bổ sung 3 thuộc tính sau cho style #tinxemnhieu p
padding-top: 5px; padding-bottom: 5px; padding-left: 10px;
F12 xem thử
7. Bổ sung 2 thuộc tính sau cho style #tinxemnhieu
overflow: hidden; white-space: nowrap;
F12 xem thử
8. Định dạng cho tag h4 trong div tinxemnhieu
#tinxemnhieu h4 {
background-color: #0099CC; color: ;
margin-top: 0px; margin-bottom: 0px;
padding-top: 5px; padding-bottom: 5px; padding-left: 10px;
}
F12 xem thử
Comments
Post a Comment