作业12.24当当网

最新推荐文章于 2024-10-11 11:51:06 发布
CwSy_
最新推荐文章于 2024-10-11 11:51:06 发布
阅读量87
点赞数
文章标签： css 前端
本文链接：https://blog.csdn.net/CwSy_/article/details/135187263
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>当当图书榜</title>
    <link href="css/book.css" rel="stylesheet" type="text/css"/>
	<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		#container{
		width: 1000px;
		margin: 0px auto;	
		}
		ul{
			width: 250px;
			height: 30px;
			padding-left: 10px;
			line-height: 30px;
			border: 1px solid aquamarine;
			background-color: aqua;
	        position: absolute;
			top: 10px;
			left: 750px;
		}
		li{
			display: inline-block;
		}
		.tip{
			position: absolute;
			top: -10px;
			left: 750px;
		}
		#menu {
			display: inline-block;
			background-color: darkorange;
			padding: 10px 20px;
			text-align: center;
			border: 2px solid orangered;
		}
		#menu a{
			text-decoration: none;
			padding-left: 10px;
			padding-right: 10px;
			color:white;
		}
		#menu a:hover{
			text-decoration: underline;
		}
		.title{
			position: relative;
			left: -20px;
			top: -10px;
		}
		.first{
			position: absolute;
			top: 270px;
			left: 190px;
		}
		.bookLeft{
			display: inline-block;
		}
		#book1{
			position: absolute;
			top: 270px;
			left: 450px;
		}
		.second{
			position: absolute;
			top: 0px;
			left: -10px;
		}
		#photo1{
			position: absolute;
			top: 265px;
			left: 860px;
		}
		#book2{
			position: absolute;
			top: 265px;
			left: 960px;
		}
		#photo2{
			position: absolute;
			top: 380px;
			left: 875px;
		}
		.third{
			position: absolute;
			top: -10px;
			left: -10px;
		}
		#book3{
			position: absolute;
			top: 380px;
			left: 990px;
		}
		#bookTop{
			padding: 10px;
			border: 1px solid greenyellow;
		}
	</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>
		</ul>
    <p class="tip"><img src="image/icon_count.png" alt="tip"/></p>
    </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><img src="image/banner.png" alt="当当图书榜"/></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 id="book1"><a href="#">偷影子的人</a>

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

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

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

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

                    <p>作 者：柴静 著</p>

                    <p>出版社：广西师范大学出版社</p>

                    <p><strong>￥ 29.40</strong> <span>7.4折</span></p></dd>
            </dl>
            <dl>
                <dt id="photo2"><img src="image/book-03.jpg" alt="改变孩子先改变自己"/>
                <div class="third"><img src="image/bookNo3.gif" alt="NO3"/></div>
                </dt>
                <dd id="book3"><a href="#">改变孩子先改变自己</a>

                    <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>