码迷,mamicode.com
首页 > 其他好文 > 详细

第七次随笔

时间:2017-06-04 18:44:05      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:链接   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>&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%):

技术分享

 

第七次随笔

标签:链接   final   charset   lsp   images   tle   分享   ann   海尔   

原文地址:http://www.cnblogs.com/F-Victor/p/6940951.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!