如何写出当当网首页呢？
我们先来看板块如何
我们需要什么板块呢？
我们需要的板块有“头部”，“主体”，“尾部”三个大部分
细化之下，我们的头部需要哪些内容呢？
1.需要logo图
2.还有导航栏
这样我们可以分开来写，也是就是头部有2个板块
之后我们可以看看主体部分；
主体部分有
1.菜单栏目
2.内容板块
2.1内容里的单独内容
2.2 公有3个小内容
也就是4个内容
2小大板块
第二小大板块里有三个小内容
然后我们来看看尾部内容
主要就是字体内容和备案图片内容
大家可以自己规划！！！
以下时代码---我自己的代码，供检阅
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="../index/css/DdTuShubang.css"><link rel="stylesheet" href="../index/css/bon.css"><title>页面</title>
</head><body><div id="box"><div class="box_log"><img id="log" src="../index/img/logo.jpg" alt="logo"><ul class="nav"><img src="../index/img/icon_count.png" alt="热卖"><a href="#"><li>唯品会</li></a><a href="#"><li>当当优品</li></a><a href="#"><li>数字馆</li></a><a href="#"><li>都看阅器</li></a></ul></div><div class="box_main"><ul class="main_box"><a href="#"><li>首页</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>图书</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>首页</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>音像</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>童装</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>服装</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>鞋靴</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>运动</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>箱包</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>美妆</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>珠宝</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>家居</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>食品</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>酒</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>手机</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>数码</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>电脑</li></a><span><img src="../index/img/menuBg.jpg" alt=""></span><a href="#"><li>家电</li></a><!-- <span><img src="../index/img/menuBg.jpg" alt=""></span> --></ul></div><div class="box_img"><img src="../index/img/banner.png" alt="图"></div><div class="box_con"><img src="../index/img/bg_bang.gif" alt="畅销榜"><main class="con_book"><img src="../index/img/book-01.jpg" alt="书"><div class="book_Top1"><img src="../index/img/bookNo1.gif" alt="Top1"></div><div class="booka"><ul><h1>偷影子的人</h1><span>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</span><p class="colorh1">当当价：￥ 17.90</p><p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</p></ul></div><div class="bookb"><!-- <div> --><img class="img1" src="../index/img/book-02.jpg" alt="书"><img id="TopNa" src="../index/img/bookNo2.gif" alt="Top2"><!-- </div> --><ul class="ul1"><h1>看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 </h1><span>出版社：广西师范大学出版社</span><p class="colorh1">￥ 29.40 <samp class="colorz1">7.4折</samp></p></ul><img class="img2" src="../index/img/book-03.jpg" alt="书"><img id="TopNb" src="../index/img/bookNo3.gif" alt="Top3"><ul class="ul2"><h1>改变孩子先改变自己</h1><span>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</span><samp>作 者：贾容韬 贾毅 著</samp><p class="colorh1">￥ 22.20 <samp class="colorz1">7.4折</samp></p></ul></div></main></div><div class="box_bot"><p class="colorz1">Copyringht (C) 当当网 2004-02017，AII Rights Reserved<img class="VIPSN"src="../index/img/validate.gif" alt="备案">京ICP证041189号出版物经营许可证 新出发京批字第直0673号</p></div></div>
</body></html>以下是index.css的样式
/*全局-基本*/
* {margin: 0;padding: 0;list-style: none;text-decoration: none;
}/*框架-整体-首页*/
#box {height: auto;width: auto;margin: auto;padding: 0.4% 2.5%;background-color: rgb(255, 255, 255);
}/*logo部分*/
.box_log {height: auto;width: 960px;margin: auto;
}/*logo的导航栏部分*/
.nav {margin-top: 20px;float: right;border: 1px solid rgb(200, 236, 227);width: auto;height: auto;background-color: rgb(234, 255, 250);padding-left: 4px;border-bottom: 1px solid transparent;
}/*gif*/
.nav img {display: block;margin-top: -10px;margin-bottom: -6px;padding-bottom: -6px;box-sizing: border-box;
}/*导航栏*/
.nav a {color: rgb(123, 123, 123);font-size: 14px;
}.nav li {padding: 2px;display: block;float: left;line-height: 28px;padding-left: 6px;padding-right: 6px;
}/***框架-导航栏***/
.box_main {margin: 5px auto auto auto;width: 960px;height: 45px;clear: both;background-color: rgb(254, 105, 21);
}/*导航栏-内容*/
.main_box {clear: both;margin-top: 4px;width: 960px;width: 45px;background-color: rgb(254, 105, 21);display: inline;text-align: center;
}.main_box a {display: block;height: 29px;color: rgb(255, 255, 255);float: left;font-size: 14px;padding: 4px 12px;padding-top: 14px;padding-bottom: 0px;background-color: rgb(254, 105, 21);
}.main_box span {float: left;
}/*鼠标反应*/
a:hover {background-color: rgb(253, 118, 39);
}第二是DdTuShubang.css的内容
/*内容-页面*/
/*当当图书榜*/
.box_img {height: auto;width: 960px;margin: 10px auto auto auto;
}/*图书畅销榜*/
.box_con {margin: auto;height: 380px;width: 960px;margin-top: 18px;border: 2px solid rgb(204, 233, 172);
}/*内容-书*/
.box_con img {margin-top: 20px;margin-left: -12px;
}.con_book {width: 940px;height: 300px;padding: 10px 14px;float: left;
}.book_Top1 {width: 200px;margin-right: -2200px;position: relative;bottom: 290px;left: 22px;
}.booka {position: relative;width: 300px;height: 260px;float: left;bottom: 320px;left: 240px;
}/*小栏目框架*/
.bookb {width: 355px;height: 225px;position: relative;float: left;bottom: 360px;left: 260px;
}.bookb h1 {font-size: 14px;
}.img1 {float: left;width: 100px;height: 100px;
}.img2 {float: left;width: 100px;height: 100px;position: relative;top: -100px;
}#TopNa {position: relative;left: -86px;
}#TopNb {position: relative;top: 122px;left: -106px;
}.ul1 {width: 288px;height: 100px;position: relative;left: 100px;bottom: 86px;float: left;
}.ul2 {width: 288px;height: 100px;position: relative;left: 100px;bottom: 186px;float: left;
}
/*独特-颜色*/
.colorh1 {color:rgb(142,17,102);
}.colorz1{color: rgb(109, 106, 106);
}/*字体*/
ul>h1 {font-size: 19px;font-family: serif;color: rgb(37, 109, 183)
}第三是bon.css的样式
/*底部-备案信息*/
.box_bot{width: 960px;height: 50px;margin: auto;vertical-align: middle;text-align: center;
}
/*更改-框架*/
.box_bot>p{position: relative;top: -18px;font-size: 12px;
}
/*备案-img*/
.VIPSN{display: inline-block;position: relative;top: 20px;
}
