1. 程式人生 > >第七次隨筆

第七次隨筆

border ica 白色 開始 href -h doctype col one

這周用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>&nbsp;</p>
</div></td>
</tr>
<tr>
<td>&nbsp;</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%):

技術分享

第七次隨筆