Chủ Nhật, 31 tháng 1, 2016

Code giao diện web cơ bản (theo yêu cầu)

1/31/2016 11:13:00 CH    No comments

,
Code chỉ mang tính chất tham khảo dành cho người mới học thiết kế web.

Code CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
body{
 padding:0;
 margin:0 auto;
 font-family:Arial, Helvetica, sans-serif;
}
#top{
 padding:5px;
 padding-left:10px;
 background-color:rgb(192,192,192);
 font-weight:bold;
 color:#666666;
}
#menu{
 position:absolute;
 background-color:#ccc;
 top:100px;
 left:0;
 width:100%;
 height:35px;
}
.menu a{
 color:#0066FF;
 text-decoration:none;
 padding:10px;
}
.menu a:hover{
 background-color:#FF0066;
 color:#fff;
}
#menuleft{
 float:left;
 margin-top:120px;
 position:inherit;
 width:20%;
 background-color:#CCCCCC
}
#body{
 float:right;
 margin-top:120px;
 position:inherit;
 width:75%;
 padding:15px;
 background-color:#0000FF;
 border-top:5px solid #000099;
 white-space:normal;
 color:#000
}
#body h1{
 color:#0099FF;
 margin:0px;
 padding-top:20px;
 margin-bottom:10px;
 line-height:20px;
}
#menuleft tr td li a{
 color:#0066FF;
 text-decoration:none;
  
}
#menuleft tr td li a:hover{
 color:#FF0066;
 text-decoration:none;
}

Code HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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>T4VN - Giao diện web cơ bản (theo yêu cầu)</title>
 </head>
<body>
<div id="top">
Mondy, September 6, 2010
</div>
<div id="header">
<h1 style="position:absolute;left:10px;top:30px;z-index:-1;color:#999999">Tin học</h1>
<h1 style="position:absolute;left:12px;top:32px;z-index:-1;color:red">Tin học</h1>
</div>
<table id="menu">
 <tr>
  <td width="2%" class="menu"><a href="/">TRANG CHỦ</a></td>
  <td width="2%" class="menu"><a href="#">DIỄN ĐÀN</a></td>
  <td width="2%" class="menu"><a href="#">ĐIỂM THI</a></td>
  <td width="10%" class="menu"></td>
 </tr>
</table>
<div id="main">
<table id="menuleft">
<tr>
 <th style="border-bottom:2 solid #0000FF;border-bottom-style:dotted;"><font color="#D94A4C">CATEGORIES</font></th>
</tr>
<TR>
 <td>
 <li><a href="#">360 blog</a></li>
 <li><a href="#">Giải trí</a></li>
 <li><a href="#">Internet</a></li>
 <li><a href="#">Khoa học tự nhiên</a></li>
 <li><a href="#">Bóng đá</a></li>
 </td>
</TR>
</table>
<div id="body">
<p style="margin:0">
<h1>Ma cà rồng "Lên ngôi"</h1>
 Vì sao để tải ma cá rồng ăn khách?
</p>
<br />
Phải chăng Dracula đã "chết"? Hoàn toàn sai, bởi có cả một dòng chảy các sản phẩm giải trí mang tên Dracula. Xin được ngó lại lịch sử: Cách đây 112 năm, cuốn tiểu thuyết Dracula của Bram Stoker (1847-1912) một nhà văn tầm tầm người Ireland, ra đời. SInh thời, tác giả không thể lường hết tác động của tác phẩm pha trộn đủ màu sắc tôn giáo và triết luận hỗ lốn này.
<span>
<p><img src="Sunset.jpg" width="500"></p>
<h3 style="position:relative;left:400px;top:-52px;z-index:0; color:#FFFFFF">Twilight2</h3>
</span></div>
</body>
</html>

0 nhận xét:

Đăng nhận xét