12.20作业：图书馆

最新推荐文章于 2024-07-17 18:42:40 发布
Monody_R
最新推荐文章于 2024-07-17 18:42:40 发布
阅读量308
点赞数 9
文章标签： html
本文链接：https://blog.csdn.net/Monody_R/article/details/135183947
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>当当图书榜</title>
    <style type="text/css">
    	a{
    		text-decoration: none;
    	}
    	ul li{
    		list-style: none;
			}
		#header li{
			text-decoration: none;
			display: inline-block;
			border: 1px white solid;
				}
		#header li a{
				width: 50px;
				height: 20px;
				background-color: lightcyan;
				position: relative;
				top: -40px;
				left: 670px;
				line-height: 20px;
				text-align: center;
			}
			#header li:last-of-type{
				position: relative;
				top: -55px;
				left: 410px;
			}
			#menu{
				display: block;
				width: 960px;
				height: 80px;
				font-size: 20px;
				text-align: center;
				line-height: 80px;
				position: relative;
				top: -55px;
				background-color: orange;
			}
			#menu a{
				color: aliceblue;
				padding-left: 15px;
			}
			#pit{
				position: relative;
				top: -45px;
			}
			#bookTop{
				display: inline-block;
				width: 960px;
				height: 400px;
				border: 3px greenyellow solid;
				position: absolute;
				top: 290px;
			}
			#footer{
				position: relative;
				top: 1600px;
			}
			.first{
				position: relative;
				top:-280px;
				left: 20px;
			}
			.bookLeft{
				display: inline-block;
				width: 410px;
				height: 300px;
			}
			#w1{
				position: relative;
				left: 200px;
				top: -300px;
			}
			#s1{
				position: relative;
				left: 200px;
				top: -300px;
			}
			.second{
				position: relative;
				top: -690px;
				left: 630px;
			}
			#s2{
				display: inline-block;
				width: 250px;
				position: relative;
				top: -720px;
				left: 680px;
			}
			#p2{
				position: relative;
				top: -570px;
				left: 630px;
			}
			#w2{
				position: relative;
					top: -720px;
					left: 680px;
				}
			#p3{
				position: relative;
				top: -740px;
				left: 630px;
			}
			.third{
				position: relative;
				top: -865px;
				left: 620px;
			}
			#s3{
				position: relative;
				top: -885px;
				left: 685px;
			}
			#w3{
				position: relative;
				top: -885px;
				left: 685px;
			}
			#footer{
				position: relative;
				top: 380px;
				left: 50px;
			}
    </style>			
</head>
<body>
<div id="container">
    <div id="header">
        <div class="logo"><img src="image/logo.jpg" alt="logo"/></div>
        <ul>
            <li><a href="#">尾品汇</a></li>
            <li><a href="#">当当优品</a></li>
            <li><a href="#">数字馆</a></li>
            <li><a href="#">都看阅器</a></li>
            <li class="tip"><img src="image/icon_count.png" alt="tip"/></li>
        </ul>
    </div>
    <div id="menu">
        <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>
    </div>
    <div class="clear10"></div>
    <div><span id="pit"><img src="image/banner.png" alt="当当图书榜"/></span></div>
    <div class="clear10"></div>
    <div id="bookTop">
        <div class="title"><img src="image/bg_bang.gif" alt="title"/></div>
        <div class="bookLeft">
            <dl>
                <dt>
                    <img src="image/book-01.jpg" alt="偷影子的人"/>
                <div class="first">
                    <img src="image/bookNo1.gif" alt="No1"/>
                </div>
                </dt>
                <dd><span id="s1"><a href="#">偷影子的人</a></span>

                    <span id="w1"><p>作 者：[法] 马克・李维（Marc Levy）著,段韵灵 译</p>

                    <p>出版社：湖南文艺出版社</p>

                    <p>当当价：<strong>￥ 17.90</strong></p>

                    <p>
                        不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。
                        一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</p></dd>
					</span>
            </dl>
        </div>
        <div class="bookRight">
            <dl>
                <dt><span id="p2"><img src="image/book-02.jpg" alt="看见"/></span>
                <div class="second"><img src="image/bookNo2.gif" alt="NO2"/></div>
                </dt>
                <dd>
					<span id="s2"><a href="#">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a></span>

                    <span id="w2"><p>作 者：柴静 著</p>

                    <p>出版社：广西师范大学出版社
                    <p><strong>￥ 29.40</strong> <span>7.4折</span></p></span></dd>
					
            </dl>
            <dl>
                <dt><span id="p3"><img src="image/book-03.jpg" alt="改变孩子先改变自己"/></span>
                <div class="third"><img src="image/bookNo3.gif" alt="NO3"/></div>
                </dt>
                <dd><span id="s3"><a href="#">改变孩子先改变自己</a></span>

                    <span id="w3"><p>作 者：贾容韬 贾毅 著</p>

                    <p>出版社：作家出版社</p>

                    <p><strong>￥ 22.20</strong> <span>7.4折</span></p></dd>
            </dl>
        </div>
        <div class="clear10"></div>
    </div>
    <div id="footer">Copyright (C) 当当网 2004-2017, All Rights Reserved<img src="image/validate.gif" alt="版权标志"/>京ICP证041189号出版物经营许可证
        新出发京批字第直0673号
    </div>
</div>
</body>
</html>