《当当网2017首页》

如何写出当当网首页呢？

我们先来看板块如何

我们需要什么板块呢？

我们需要的板块有“头部”，“主体”，“尾部”三个大部分

细化之下，我们的头部需要哪些内容呢？

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

/*感谢大家点赞哦***/

《当当网2017首页》相关推荐

ComeFuture英伽学院——2020年全国大学生英语竞赛【C类初赛真题解析】(持续更新)
视频:ComeFuture英伽学院--2019年全国大学生英语竞赛[C类初赛真题解析]大小作文--详细解析课件:[课件]2019年大学生英语竞赛C类初赛.pdf 视频:2020年全国大学生英语竞赛 ...
ComeFuture英伽学院——2019年全国大学生英语竞赛【C类初赛真题解析】大小作文——详细解析
视频:ComeFuture英伽学院--2019年全国大学生英语竞赛[C类初赛真题解析]大小作文--详细解析课件:[课件]2019年大学生英语竞赛C类初赛.pdf 视频:2020年全国大学生英语竞赛 ...
信息学奥赛真题解析（玩具谜题）
玩具谜题(2016年信息学奥赛提高组真题) 题目描述小南有一套可爱的玩具小人, 它们各有不同的职业.有一天, 这些玩具小人把小南的眼镜藏了起来.小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的 ...
信息学奥赛之初赛第1轮讲解（01-08课）
信息学奥赛之初赛讲解 01 计算机概述系统基本结构信息学奥赛之初赛讲解 01 计算机概述系统基本结构_哔哩哔哩_bilibili 信息学奥赛之初赛讲解 02 软件系统计算机语言进制转换信息 ...
信息学奥赛一本通习题答案（五）
最近在给小学生做C++的入门培训,用的教程是信息学奥赛一本通,刷题网址 http://ybt.ssoier.cn:8088/index.php 现将部分习题的答案放在博客上,希望能给其他有需要的人带来 ...
信息学奥赛一本通习题答案（三）
最近在给小学生做C++的入门培训,用的教程是信息学奥赛一本通,刷题网址 http://ybt.ssoier.cn:8088/index.php 现将部分习题的答案放在博客上,希望能给其他有需要的人带来 ...
信息学奥赛一本通提高篇第六部分数学基础相关的真题
第1章快速幂 1875:[13NOIP提高组]转圈游戏信息学奥赛一本通(C++版)在线评测系统第2 章素数第 3 章约数第 4 章同余问题第 5 章矩阵乘法第 6 章 ...
信息学奥赛一本通题目代码（非题库）
为了完善自己学c++,很多人都去读相关文献,就比如<信息学奥赛一本通>,可又对题目无从下手,从今天开始,我将把书上的题目一一的解析下来,可以做参考,如果有错,可以告诉我,将在下次解析里重 ...
信息学奥赛一本通（C++版）刷题记录
总目录详见:https://blog.csdn.net/mrcrack/article/details/86501716 信息学奥赛一本通(C++版) 刷题记录 http://ybt.ssoier. ...
最近公共祖先三种算法详解 + 模板题建议新手收藏例题：信息学奥赛一本通祖孙询问距离
首先什么是最近公共祖先?? 如图:红色节点的祖先为红色的1, 2, 3. 绿色节点的祖先为绿色的1, 2, 3, 4. 他们的最近公共祖先即他们最先相交的地方,如在上图中黄色的点就是他们的最近公共祖先 ...

《当当网2017首页》

/*感谢大家点赞哦***/

《当当网2017首页》相关推荐

最新文章

热门文章

《当当网2017首页》

/*****感谢大家点赞哦*******/

《当当网2017首页》相关推荐

最新文章

热门文章

/*感谢大家点赞哦***/