
源码:
<!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

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

被折叠的 条评论
为什么被折叠?



