标签:链接 final charset lsp images tle 分享 ann 海尔
这周用HTML做了个网页,代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Finals</title>
<link href="configuration/index.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href = "images/favicon.ico">
<style type="text/css">
a:visited {
text-decoration: none;
}
.白色连接 {
font-family: "黑体";
font-weight: bolder;
color: #FFFFFF;
}
.黑色链接 {
color: #000000;
}
a:link {
text-decoration: none;
}
a:active {
text-decoration: none;
}
a:hover {
color: #0000FF;
font-weight: normal;
}
</style>
</head>
<body style="text-align: center; color: #FFF; font-weight: bold;">
<table width="1200" border="0" align="center" cellspacing="0">
<tr>
<td><div id="banner"><img src="images/banner.jpg" width="1200" height="280" alt="banner"></div></td>
</tr>
<tr>
<td><div id="menu">
<table width="1200" height="40" border="0">
<tbody>
<tr>
<td><div id="navigation">首页</div></td>
<td><div id="navigation">总决赛详情</div></td>
<td><div id="navigation">骑士队</div></td>
<td><div id="navigation">勇士队</div></td>
<td><div id="navigation">季后赛对阵图</div></td>
<td><div id="navigation"><a href="http://china.nba.com/" class="白色连接">NBA官网</a></div></td>
</tr>
</tbody>
</table>
</div></td>
</tr>
<tr>
<td><table width="200" border="0">
<tbody>
<tr>
<td width="680"><img src="images/finals.jpg" width="680" height="440" /></td>
<td width="420"><table width="510" border="0">
<tbody>
<tr valign="top">
<td bgcolor="#ECECEC"><div id="newstitle">新闻:</div>
<div id="news">
<p><a href="http://china.nba.com/a/20170603/020870.htm" class="黑色链接">如何限制勒布朗 布朗:我们用阿杜护框</a></p>
<p><a href="http://china.nba.com/a/20170603/020309.htm" class="黑色链接">迈克-布朗将从骑士领工资直到2020年</a></p>
<p><a href="http://china.nba.com/a/20170603/019683.htm" class="黑色链接">卢指导强调打出对抗性 乐福:相信TT会强势反弹</a></p>
<p><a href="http://china.nba.com/a/20170603/019700.htm" class="黑色链接">麦克海尔回忆湖凯大战:那是NBA辉煌的开始</a></p>
<p> </p>
</div></td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><div><img src="images/bottom.jpg" width="1200" height="50" /></div></td>
</tr>
</table>
</body>
</html>
还不光用了内部修饰,还用了CSS:
@charset "utf-8";
#menu {
background-color: #999999;
width: 1200px;
height: 40px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
}
#banner {
width: 1200px;
height: 280px;
}
tr td #navigation {
width: 200px;
height: 40px;
color: #FFFFFF;
font-family: "黑体";
font-style: normal;
font-weight: bolder;
font-size: 23px;
text-align: center;
text-shadow: 0px 0px;
vertical-align: middle;
line-height: 30px;
}
#bottom {
width: 1200px;
height: 100px;
}
#news {
color: #000000;
font-weight: lighter;
text-align: justify;
text-indent: 40px;
font-family: "楷体";
font-size: 20px;
line-height: 12px;
}
#newstitle {
color: #000000;
font-weight: bolder;
font-size: x-large;
text-align: left;
text-indent: 20px;
}
效果图(缩放比例80%):
标签:链接 final charset lsp images tle 分享 ann 海尔
原文地址:http://www.cnblogs.com/F-Victor/p/6940951.html