第八章-CSDN博客

本文链接：https://blog.csdn.net/weixin_43027940/article/details/84261604
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当当图书榜</title>
    <style>
        .Head{
            width: 960px;
            overflow: hidden;
            margin: auto;
        }
        .logo{
            height: 48px;
            width: 101px;
            background: url("image/logo.jpg");
            float: left;
        }
        .logo img{
            position: absolute;
            left: 1198px;
            z-index: 2;
        }
        .logo2{
            position: absolute;
            top: 20px;
            left: 1198px;
			height: 40px;
			width: 240px;
			background-color: #A0FFF5;
			opacity: 0.6;
			border-left: 1px solid #72C4B6;
			border-right: 1px solid #72C4B6;
			border-bottom: 0px;
			border-top: 1px solid #72C4B6;

        }
        .text{
            position: absolute;
            top: -8px;
            left: -32px;
        }
        .text ul{
            list-style:none;
        }
        .text a{
            display: inline-block;
            font-size: 14px;
            color: black;
            padding: 0px 2px;
            text-decoration: none;
        }
        .text a:hover{
            text-decoration: underline;
        }
        .Menu{
            height: 36px;
            width: 960px;
            background: url("image/menuBg.jpg");
            margin: auto;
        }
		.Menu ul{
            list-style:none;
		}
        .Menu a{
            color: white;
            text-decoration: none;
            display: inline-block;
            padding: 0px 8px;
        }
        .Ul{
            position: absolute;
            left: 456px;
            top: 68px;
        }
        .Ad{
            height: 120px;
            width: 960px;
            background: url("image/banner.png");
            margin: auto;
        }
        .Body{ 
            width: 960px;
            border: 2px solid rgba(165,194,97,0.87);
            margin: auto;
        }
        .bang{
            z-index: 2;
            position: absolute;
            left: 466px;
            top: 300px;
        }
        .Copyright {
            font-size: 15px;
            color: gray;
            width: 960px;
            height: 48px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="Head">
        <div class="logo">
            <img src="image/icon_count.png">
        </div>

        <div class="logo2">
            <div class="text">
                <ul>
                    <li>
                        <a href="#">尾品汇</a>
                        <a href="#">当当优品</a>
                        <a href="#">数字馆</a>
                        <a href="#">都看阅器</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

	<br>

    <div class="Menu">
        <ul class="Ul">
            <li>
                <a href="#">首页</a>
                <a href="#">图书</a>
                <a href="#">音像</a>
                <a href="#">童装</a>
                <a href="#">服装</a>
                <a href="#">鞋靴</a>
                <a href="#">运动</a>
                <a href="#">箱包</a>
                <a href="#">美妆</a>
                <a href="#">珠宝</a>
                <a href="#">家居</a>
                <a href="#">珠宝</a>
                <a href="#">食品</a>
                <a href="#">酒</a>
                <a href="#">手机</a>
                <a href="#">数码</a>
                <a href="#">电脑</a>
                <a href="#">家电</a>

            </li>
        </ul>
    </div>
	<br>
    <div class="Ad"></div>
    <br>
    <div class="Body">
        <br><br><br>
        <div class="bang"><img src="image/bg_bang.gif"></div>
		<table width="100%">
  <tbody>
    <tr>
      <td width="260" height="260" rowspan="2" align="left" style="font-size: 14px"><img src="image/book-01.jpg" alt="" width="260" height="260" align="top"/></td>
      <td width="260" height="260" rowspan="2" style="font-size: 14px"><a href="#">偷影子的人</a><br>
        作 者：[法] 马克・李维（Marc Levy）著,段韵灵 译<br>
        出版社：湖南文艺出版社<br>
        当当价：<strong>￥ 17.90</strong><br>
        不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。 一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能&ldquo;偷别人的影子&rdquo;，因而能看见他<br></td>
      <td width="100" style="font-size: 14px"><img src="image/book-02.jpg" width="100" height="100" alt=""/></td>
      <td style="font-size: 14px"><a href="#">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a><br>
        作 者：柴静 著<br>
        出版社：广西师范大学出版社<br>
        <strong>￥ 29.40</strong> 7.4折<br></td>
    </tr>
    <tr>
      <td width="100" style="font-size: 14px"><img src="image/book-03.jpg" width="100" height="100" alt=""/></td>
      <td style="font-size: 14px"><a href="#">改变孩子先改变自己</a><br>
        作 者：贾容韬 贾毅 著<br>
        出版社：作家出版社<br>
        <strong>￥ 22.20</strong> 7.4折<br></td>
    </tr>
  </tbody>
</table>

    </div>
    
    <div class="Copyright">
		<table width="960" border="0">
            <tbody>
                <tr>
                    <td align="right" height="48px" width="460px">Copyright (C) 当当网 2004-2017, All Rights Reserved版权标志</td>
                    <td align="center" valign="middle" height="48px"><img src="image/validate.gif"></td>
                    <td align="left" valign="middle" height="48px" width="460px"> 京ICP证041189号出版物经营许可证 新出发京批字第直0673号</td>
                </tr>
            </tbody>
    </table>
    </div>

</body>
</html>