《当当网2017首页》

最新推荐文章于 2024-07-30 20:50:32 发布

道墨思冥

最新推荐文章于 2024-07-30 20:50:32 发布

阅读量106

点赞数 1

分类专栏：五、前端文章标签： servlet java 前端

CSDN-ThinkLnk/B站-道墨思

本文链接：https://blog.csdn.net/qq_39395109/article/details/126291388

版权

五、前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

如何写出当当网首页呢？

我们先来看板块如何

我们需要什么板块呢？

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

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

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

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

道墨思冥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
《当当网2017首页》

我们需要的板块有“头部”，“主体”，“尾部”三个大部分。这样我们可以分开来写，也是就是头部有2个板块。细化之下，我们的头部需要哪些内容呢？以下时代码---我自己的代码，供检阅。主要就是字体内容和备案图片内容。第三是bon.css的样式。之后我们可以看看主体部分；第二小大板块里有三个小内容。如何写出当当网首页呢？2.1内容里的单独内容。2.2 公有3个小内容。然后我们来看看尾部内容。我们需要什么板块呢？......
复制链接

扫一扫