当当图书项目首页实现

本文档详细介绍了如何利用JavaScript、HTML和CSS技术来实现当当图书项目的首页。通过阅读,读者可以了解到如何组织和设计网页结构,以及如何应用样式和交互效果。

 源码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>当当-丰富知识开阔眼界,好书聚实惠,爆款好书现在入手很划算!</title>
    <link rel="stylesheet" type="text/css" href="css/css_public.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="shortcut icon" href="favicon.ico">
</head>

<body>
    <div class="hd">
        <div class="top">
            <div class="container">
                <div class="top-left">
                    <a href="#">
							送至:
							<span>杭州</span>
						</a>
                    <ul class="top-left-ul">
                        <li><a href="#">济南</a></li>
                        <li><a href="#">石家庄</a></li>
                        <li><a href="#">长春</a></li>
                        <li><a href="#">哈尔滨</a></li>
                        <li><a href="#">沈阳</a></li>
                        <li><a href="#">北京</a></li>
                        <li><a href="#">郑州</a></li>
                        <li><a href="#">合肥</a></li>
                        <li><a href="#">南京</a></li>
                        <li><a href="#">福州</a></li>
                        <li><a href="#">广州</a></li>
                        <li><a href="#">南昌</a></li>
                        <li><a href="#">海口</a></li>
                        <li><a href="#">南宁</a></li>
                        <li><a href="#">贵阳</a></li>
                        <li><a href="#">长沙</a></li>
                        <li><a href="#">武汉</a></li>
                        <li><a href="#">成都</a></li>
                        <li><a href="#">昆明</a></li>
                        <li><a href="#">拉萨</a></li>
                        <li><a href="#">西宁</a></li>
                        <li><a href="#">天津</a></li>
                        <li><a href="#">上海</a></li>
                        <li><a href="#">重庆</a></li>
                        <li><a href="#">太原</a></li>
                        <li><a href="#">银川</a></li>
                        <li><a href="#">西安</a></li>
                        <li><a href="#">呼和浩特</a></li>
                        <li><a href="#">兰州</a></li>
                        <li><a href="#">乌鲁木齐</a></li>
                        <li><a href="#">台北</a></li>
                        <li><a href="#">香港</a></li>
                        <li><a href="#">澳门</a></li>

                    </ul>
                </div>
                <div class="top-right">
                    <ul class="top-right-ul">
                        <li>欢迎光临当当,请<a href="#">登录</a> <a href="#">成为会员</a></li>
                        <li>|</li>
                        <li><a href="#">我的云书房</a></li>
                        <li>|</li>
                        <li>
                            <a href="#" class="top-right-ul-a">我的当当</a>
                            <ul class="top-right-ul-ul">
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                            </ul>
                        </li>
                        <li>|</li>
                        <li>
                            <a href="#" class="top-right-ul-a">0元购物</a>
                            <ul class="top-right-ul-ul">
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                            </ul>
                        </li>
                        <li>|</li>
                        <li><a href="#">小说投稿</a></li>
                        <li>|</li>
                        <li><a href="#">我要出书</a></li>
                        <li>|</li>
                        <li>
                            <a href="#" class="top-right-ul-a">企业采购</a>
                            <ul class="top-right-ul-ul">
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                            </ul>
                        </li>
                        <li>|</li>
                        <li>
                            <a href="#" class="top-right-ul-a">客户服务</a>
                            <ul class="top-right-ul-ul">
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的订单</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="logo">
            <div class="container">
                <div class="logo-img">
                    <a href="index.html"><img src="img/logo.gif" alt="当当" title="当当"></a>
                </div>
                <div class="logo-search">
                    <div class="logo-search-top">
                        <form action="" method="post">
                            <input type="text" placeholder="一年级必读经典书目" />
                            <span>
									<a href="#">全部分类</a>
									<ul class="logo-search-top-ul">
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
										<li><a href="#">手表饰品</a></li>
									</ul>
								</span>
                            <div>
                                <img src="img/sosuo.png" width="30" height="30" />
                            </div>
                        </form>
                    </div>
                    <div class="logo-search-bottom">
                        <ul>
                            <li>热搜: <a href="#">汪曾祺</a></li>
                            <li><a href="#">孩子的灾害书</a></li>
                            <li><a href="#">秦俑两千年</a></li>
                            <li><a href="#">星火英语</a></li>
                            <li><a href="#">脱口秀思文</a></li>
                            <li><a href="#">高级搜索</a></li>
                        </ul>
                    </div>
                </div>
                <div class="logo-shopcar">
                    <a href="#"><img src="img/car.png" width="25" height="25">
                        <p>购物车0</p>
                    </a>
                    <a href="#">我的订单</a>
                </div>
            </div>
        </div>
        <div class="menu-one">
            <div class="container">
                <div class="menu-one-left">
                    <a href="#">
                        <div>全部商品分类</div>
                        <div class="line"></div>
                    </a>
                    <ul class="menu-one-left-ul">
                        <li>
                            <a href="#">图书、童书</a>
                            <span class="menu-one-left-ul-span"><a href="#" class="erjia">历史</a>|<a href="#" class="erjia">历史</a>|<a href="#" class="erjia">历史</a>|<a href="#" class="erjia">历史</a></span>
                        </li>
                        <li>
                            <a href="#">电子书、网络文学</a>
                            <span class="menu-one-left-ul-span"><a href="#" class="erjia">历史</a>|<a href="#" class="erjia">历史</a>|<a href="#" class="erjia">历史</a>|<a href="#" class="erjia">历史</a></span>
                        </li>
                        <li>
                            <a href="#">创意文具、拍卖</a>
                            <span class="menu-one-left-ul-span"></span>
                        </li>
                        <li>
                            <a href="#">服饰、内衣</a>
                            <span class="menu-one-left-ul-span"></span>
                        </li>
                        <li>
                            <a href="#">鞋靴、箱包</a>
                            <span class="menu-one-left-ul-span"></span>
                        </li>
                        <li>
                            <a href="#">运动户外</a>
                            <span class="menu-one-left-ul-span"></span>
                        </li>
                        <li>
                            <a href="#">孕、婴、童</a>
                            <span class="menu-one-left-ul-span"></span>
                        </li>
                        <li>
                            <a href="#">家居、家纺、汽车</a>
                            <span class="menu-one-left-ul-span"></span>
                        </li>
                        <li>
                            <a href="#">家具、家装、康体</a>
                            <span class="menu-one-left-ul-span"></span>
                        </li>
                        <li>
                            <a href="#">美妆、个人护理、成人</a>
                            <span class="menu-one-left-ul-span"></span>
                        </li>
                        <li>
                            <a href="#">食品、茶酒、生鲜</a>
                            <span class="menu-one-left-ul-span"></span>
                        </li>
                        <li>
                            <a href="#">腕表、珠宝饰品、眼镜</a>
                            <span class="menu-one-left-ul-span"></span>
                        </li>
                        <li>
                            <a href="#">手机、数码、电脑办公</a>
                            <span class="menu-one-left-ul-span"></span>
                        </li>
                        <li>
                            <a href="#">家用电器</a>
                            <span class="menu-one-left-ul-span"></span>
                        </li>
                        <li>
                            <a href="#">当当礼品卡、生活服务</a>
                            <span class="menu-one-left-ul-span"></span>
                        </li>
                        <li>
                            <a href="#">医疗器械</a>
                            <span class="menu-one-left-ul-span"></span>
                        </li>
                    </ul>
                </div>
                <div class="menu-one-right">
                    <ul class="menu-one-right-ul">
                        <li><a href="#">图书</a></li>
                        <li><a href="#">电子书</a></li>
                        <li><a href="#">网络文学</a></li>
                        <li><a href="#">服装</a></li>
                        <li><a href="#">户外运动</a></li>
                        <li><a href="#">孕婴童</a></li>
                        <li><a href="#">家居</a></li>
                        <li><a href="#">当当优品</a></li>
                        <li><a href="#">食品</a></li>
                        <li><a href="#">Apple</a></li>
                        <li><a href="#">电器城</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="menu-two">
            <div class="container">
                <ul class="menu-two-ul">
                    <li><a href="#">图书排行榜</a></li>
                    <li>|</li>
                    <li><a href="#">童书</a></li>
                    <li>|</li>
                    <li><a href="#">教谱</a></li>
                    <li>|</li>
                    <li><a href="#">小说</a></li>
                    <li>|</li>
                    <li><a href="#">文学</a></li>
                    <li>|</li>
                    <li><a href="#">青春文学</a></li>
                    <li>|</li>
                    <li><a href="#">艺术</a></li>
                    <li>|</li>
                    <li><a href="#">成功励志</a></li>
                    <li>|</li>
                    <li><a href="#">管理</a></li>
                    <li>|</li>
                    <li><a href="#">历史</a></li>
                    <li>|</li>
                    <li><a href="#">哲学宗教</a></li>
                    <li>|</li>
                    <li><a href="#">亲子家教</a></li>
                    <li>|</li>
                    <li><a href="#">保健养生</a></li>
                    <li>|</li>
                    <li><a href="#">考试科技</a></li>
                    <li>|</li>
                    <li><a href="#">进口原版</a></li>
                    <li>|</li>
                    <li><a href="#">电子书</a></li>
                    <li>|</li>
                    <li><a href="#">网络文学</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="nav-banana-one">
            <div class="container">
                <a href="#"><img src="img/banana1.jpg" title="图书5折"></a>
            </div>
        </div>
        <div class="nav-lunbo">
            <div class="container">
                <div class="nav-lunbo-left">
                    <div>图书分类</div>
                    <hr />
                    <div class="nav-lunbo-left-two margin nav-lunbo-left-samll"><a href="#">特色书单</a><span class="nav-lunbo-left-two-span"><a href="#" class="erjia">历史</a>|<a href="#" class="erjia">历史</a>|<a href="#" class="erjia">历史</a>|<a href="#" class="erjia">历史</a></span></div>
                    <div class="nav-lunbo-left-two margin nav-lunbo-left-samll"><a href="#">电子书 网络文学</a><span class="nav-lunbo-left-two-span" style="top:-20px"><a href="#" class="erjia">历史</a>|<a href="#" class="erjia">历史</a>|<a href="#" class="erjia">历史</a>|<a href="#" class="erjia">历史</a></span></div>
                    <div class="nav-lunbo-left-two nav-lunbo-left-big">
                        <div>
                            <div>教育</div>
                            <div class="g clearf"><a href="#" style="color:#ff3b00;" id="i">教材</a><a href="#">|</a><a href="#">外语考试</a><a href="#">|</a><a href="#">中小学教辅</a><a href="#">|</a><a href="#">工具书</a></div>
                        </div>
                        <span class="nav-lunbo-left-two-span" style="top:-10px"></span>
                    </div>
                    <div class="nav-lunbo-left-two margin nav-lunbo-left-samll"><a href="#">小说</a><span class="nav-lunbo-left-two-span" style="top:-130px"></span></div>
                    <div class="nav-lunbo-left-two nav-lunbo-left-big">
                        <div>
                            <div>文艺</div>
                            <div class="g clearf"><a href="#">文学</a><a href="#">|</a><a href="#" style="color:#ff3b00;" id="i">传记</a><a href="#">|</a><a href="#">艺术</a><a href="#">|</a><a href="#">摄影</a></div>
                        </div>
                        <span class="nav-lunbo-left-two-span" style="top:-50px"></span>
                    </div>
                    <div class="nav-lunbo-left-two margin nav-lunbo-left-samll"><a href="">青春文学 /动漫 · 幽默</a><span class="nav-lunbo-left-two-span" style="top:-120px"></span></div>
                    <div class="nav-lunbo-left-two nav-lunbo-left-big">
                        <div>
                            <div>人文设科</div>
                            <div class="g clearf"><a href="#">教材</a><a href="#">|</a><a href="#">外语考试</a><a href="#">|</a><a href="#">中小学教辅</a><a href="#">|</a><a href="#" style="color:#ff3b00;" id="i">工具书</a></div>
                        </div>
                        <span class="nav-lunbo-left-two-span" style="top:-200px"></span>
                    </div>
                    <div class="nav-lunbo-left-two nav-lunbo-left-big">
                        <div>
                            <div>经管</div>
                            <div class="g clearf"><a href="#" style="color:#ff3b00;" id="i">信息</a><a href="#">|</a><a href="#">外语考试</a><a href="#">|</a><a href="#">中小学教辅</a><a href="#">|</a><a href="#">工具书</a></div>
                        </div>
                        <span class="nav-lunbo-left-two-span" style="top:-300px"></span>
                    </div>
                    <div class="nav-lunbo-left-two nav-lunbo-left-big">
                        <div>
                            <div>生活</div>
                            <div class="g clearf"><a href="#">教材</a><a href="#">|</a><a href="#" style="color:#ff3b00;" id="i">外语考试</a><a href="#">|</a><a href="#">中小学教辅</a><a href="#">|</a><a href="#">工具书</a></div>
                        </div>
                        <span class="nav-lunbo-left-two-span" style="top:-370px"></span>
                    </div>
                    <div class="nav-lunbo-left-two margin nav-lunbo-left-samll"><a href="">成功/励志</a><span class="nav-lunbo-left-two-span" style="top:-330px"></span></div>
                    <div class="nav-lunbo-left-two nav-lunbo-left-big">
                        <div>
                            <div>科技</div>
                            <div class="g clearf"><a href="#">教材</a><a href="#">|</a><a href="#">外语考试</a><a href="#">|</a><a href="#">中小学教辅</a><a href="#">|</a><a href="#">工具书</a></div>
                        </div>
                        <span class="nav-lunbo-left-two-span" style="top:-400px"></span>
                    </div>
                    <div class="nav-lunbo-left-two nav-lunbo-left-big">
                        <div>
                            <div>未来</div>
                            <div class="g clearf"><a href="#">教材</a><a href="#">|</a><a href="#">外语考试</a><a href="#">|</a><a href="#" style="color:#ff3b00;" id="i">中小学教辅</a><a href="#">|</a><a href="#">工具书</a></div>
                        </div>
                        <span class="nav-lunbo-left-two-span" style="top:-300px"></span>
                    </div>
                    <div class="nav-lunbo-left-two margin nav-lunbo-left-samll"><a href="">英文原版书 港台图书</a><span class="nav-lunbo-left-two-span" style="top:-330px"></span></div>
                    <div class="nav-lunbo-left-two nav-lunbo-left-big">
                        <div>
                            <div>农业</div>
                            <div class="g clearf"><a href="#" style="color:#ff3b00;" id="i">教材</a><a href="#">|</a><a href="#">外语考试</a><a href="#">|</a><a href="#">中小学教辅</a><a href="#">|</a><a href="#">工具书</a></div>
                        </div>
                        <span class="nav-lunbo-left-two-span" style="top:-390px"></span>
                    </div>
                    <div class="nav-lunbo-left-two margin nav-lunbo-left-samll"><a href="">当当出版</a><span class="nav-lunbo-left-two-span" style="top:-460px"></span></div>
                    <div class="nav-lunbo-left-two margin nav-lunbo-left-samll"><a href="">期刊 /音像</a><span class="nav-lunbo-left-two-span" style="top:-460px"></span></div>
                </div>
                <div class="nav-lunbo-zhong">
                    <div class="nav-lunbo-zhong-top">
                        <ul class="nav-lunbo-zhong-ula">
                            <li style="z-index:1;">
                                <a href="#"><img src="img/lun1.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="img/lun2.jpg" alt="" title="特价专区"></a>
                            </li>
                            <li>
                                <a href="#"><img src="img/lun3.jpg" alt="" title="特价专区"></a>
                            </li>
                            <li>
                                <a href="#"><img src="img/lun4.jpg" alt="" title="特价专区"></a>
                            </li>
                            <li>
                                <a href="#"><img src="img/lun5.jpg" alt="" title="特价专区"></a>
                            </li>
                            <li>
                                <a href="#"><img src="img/lun6.jpg" alt="" title="特价专区"></a>
                            </li>
                            <li>
                                <a href="#"><img src="img/lun7.jpg" alt="" title="特价专区"></a>
                            </li>
                            <li>
                                <a href="#"><img src="img/lun8.jpg" alt="" title="特价专区"></a>
                            </li>
                            <li>
                                <a href="#"><img src="img/lun9.jpg" alt="" title="特价专区"></a>
                            </li>
                        </ul>
                        <ul class="nav-lunbo-zhong-ulb">
                            <li><a href="#" style="background-color:#FF2832;color:#fff;">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">6</a></li>
                            <li><a href="#">7</a></li>
                            <li><a href="#">8</a></li>
                            <li><a href="#">9</a></li>
                        </ul>
                    </div>
                    <div class="nav-lunbo-zhong-bottom">
                        <div class="nav-lunbo-zhong-bottom-img"></div>
                        <div class="nav-lunbo-zhong-bottom-lunbo">
                            <div class="nav-lunbo-zhong-long">
                                <ul class="nav-lunbo-zhong-bottom-lunbo-ul">
                                    <li>
                                        <a href="#" class="bookimg"><img src="img/lunb1.jpg" alt=""></a>
                                        <a href="#" class="bookname">为何爸妈看不见我</a>
                                        <span class="bookren">高岚</span>
                                        <div class="bookqian"><span>¥30.50</span><span><del>¥98.00</del></span></div>
                                    </li>
                                    <li>
                                        <a href="#" class="bookimg"><img src="img/lunb2.jpg" alt=""></a>
                                        <a href="#" cl
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值