当当网首页

最新推荐文章于 2024-09-17 22:59:44 发布
最新推荐文章于 2024-09-17 22:59:44 发布
阅读量184 收藏 1
点赞数 1
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianmingmaoyao/article/details/128062365
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        .span1{
            background-color: khaki;
            color: red;
            margin-left: 10px;
            display: inline-block;
            height: 30px;
        }
        .zkspan{
            display: inline-block;
            margin-left: 60px;
        }
        .jgspan{
            display: inline-block;
            margin-left: 40px;
        }
        .gmspan{
            display: inline-block;
            margin-left: 30px;
            color: crimson;
            font-weight: bolder;
        }
        .tjul>li{
            margin-bottom: 10px;
        }
        .inputnum{
            width: 10px;
        }
        td{
            text-align: center;
        }
        .divc1{
            margin-top: 20px;
        }
        ul>li{
            margin-top: 15px;
        }
    </style>
</head>
<body>
<div style="position: absolute;left: 15%;display: inline-block;width: 70%">
    <!--style="" 在标签上添加样式-->
    <div style="border: 1px black;border-style: solid">
        <span>你好！欢迎光临当当网[登录|免费注册]</span>
        <span style="float: right">
    <span><img src="img/dd_header_shop.gif"/>购物车|</span>
    <span>个性化推荐|</span>
    <span>礼品卡|</span>
    <span>团购|</span>
    <span>我的当当<img src="img/dd_arrow_down.gif"/>|</span>
    <span>帮助</span>
    </span>
    </div>
    <div>
        <img src="img/dd_logo.gif"/>
        <span style="position: relative;left: 50px;">
        <span style="background-color: beige;display: inline-block;height: 30px">首页 | 图片 | 音乐 | 影视 | 运动 | 服饰 | 家具 | 美妆 | 婴儿 | 食品 | 数码家</span>
    <span>
        <span class="span1">商店街</span>
    <span class="span1">促销</span>
    <span class="span1">当当<img src="img/dd_header_top.png"></span>
    <span class="span1" style="margin-left: 20px">社区</span>
    <span class="span1" style="margin-left: 40px">在线读书</span>
    </span>
    </span>
    </div>
    <div style="background-color: orange;text-align: center;color: white;height: 30px"><span>小说 | 青春 | 历史 | 少儿 | 旅游 | 期刊 | 图书畅销榜 | 新书热卖榜 | 特价书 | 图书促销 | 所有图书分类</span></div>
    <div style="background-color: aliceblue;height: 30px">
        <div style="display: inline-block;position: relative;left: 30px;">
            <input type="text" />
            <input type="button" value="在图书中搜索"/>
            <img src="img/dd_arrow_right.gif"/>
            <span>
            高级搜索 |
            <img src="img/dd_header_search_top.jpg"/>
            雅思 | 建造师 | 中里巴人 | 注会 | 新概念英语 | 更多》
        </span>
        </div>
    </div>
    <div><img src="img/dd_index_top_adver.jpg" width="100%"/> </div>
    <div style="height: 1200px">
        <!--左侧分类导航模块-->
        <div style="display: inline-block;width: 190px;height: 1200px;position: relative;top: -290px">
            <!--推荐分类-->
            <div style="border: solid 1px">
                <div style="background-color: lightpink"><span >推荐分类</span></div>
                <p>外语 | 中小学教辅</p>
            </div>
            <!--图书商品分类-->
            <div style="border: solid 1px;margin-top: 10px">
                <div style="background-color: lightpink">
                    <img src="img/dd_book_cate_icon.gif">
                    <span>图书商品分类</span>
                </div>
                <div>
                    <h3>[小说]</h3>
                    <p>悬疑 | 言情 | 职场 | 财经</p>
                </div>
                <div>
                    <h3>[小说]</h3>
                    <p>悬疑 | 言情 | 职场 | 财经</p>
                </div>
                <div>
                    <h3>[小说]</h3>
                    <p>悬疑 | 言情 | 职场 | 财经</p>
                </div>
                <div>
                    <h3>[小说]</h3>
                    <p>悬疑 | 言情 | 职场 | 财经</p>
                </div>
                <div>
                    <h3>[小说]</h3>
                    <p>悬疑 | 言情 | 职场 | 财经</p>
                </div>
                <div>
                    <h3>[小说]</h3>
                    <p>悬疑 | 言情 | 职场 | 财经</p>
                </div>
                <div>
                    <h3>[小说]</h3>
                    <p>悬疑 | 言情 | 职场 | 财经</p>
                </div>
                <div>
                    <h3>[小说]</h3>
                    <p>悬疑 | 言情 | 职场 | 财经</p>
                </div>
                <div>
                    <h3>[小说]</h3>
                    <p>悬疑 | 言情 | 职场 | 财经</p>
                </div>
            </div>
        </div>


        <div style="display: inline-block;width: 550px;">
            <!--首页轮播图页面-->
            <div style="border: solid 1px">
                <div>
                    <img src="img/dd_scroll_top.gif">
                </div>
                <div style="display: inline-block">
                    <img src="img/dd_scroll_2.jpg">
                </div>
                <div style="display: inline-block;position: relative;top: -60px">
                    <div style="background-image: url('img/dd_book_bg1.jpg');width: 30px">
                        1
                    </div>
                    <div style="background-color: red">
                        2
                    </div>
                    <div style="background-image: url('img/dd_book_bg1.jpg')">
                        3
                    </div>
                    <div style="background-image: url('img/dd_book_bg1.jpg')">
                        4
                    </div>
                    <div style="background-image: url('img/dd_book_bg1.jpg')">
                        5
                    </div>
                    <div style="background-image: url('img/dd_book_bg1.jpg')">
                        6
                    </div>
                </div>
            </div>
            <!--最新上架-->
            <div style="border: solid 1px;margin-top: 10px">
                <div style="background-color: lightgray">
                    <span style="color: darkred">
                        最新上架
                    </span>
                    <span style="background-image: url('img/dd_book_bg1.jpg');display: inline-block;width: 40px;margin-left: 30px">历史</span>
                    <span style="background-image: url('img/dd_book_bg1.jpg');display: inline-block;width: 40px;margin-left: 10px">家教</span>
                    <span style="background-image: url('img/dd_book_bg1.jpg');display: inline-block;width: 40px;margin-left: 10px">文化</span>
                    <span style="background-image: url('img/dd_book_bg1.jpg');display: inline-block;width: 40px;margin-left: 10px">小说</span>
                    <span style="float: right">更多>></span>
                </div>
                <div style="display: inline-block">
                    <div style="display: inline-block;position: relative;top: -150px"><img src="img/dd_novel_1.jpg" width="75" height="80"></div>
                    <div style="display: inline-block">
                        <div class="divc1"><a href="#">喂，我知道你</a></div>
                        <div class="divc1"><span>作者：兰海 著</span></div>
                        <div class="divc1"><span>出版社：中国妇女出版社</span></div>
                        <div class="divc1"><span style="color: chocolate">出版时间：2009年10月</span></div>
                        <div class="divc1"><span>定价：￥28.80</span></div>
                        <div class="divc1"><span>当当价：￥17.90</span></div>
                    </div>
                </div>
                <div style="display: inline-block">
                    <div style="display: inline-block;position: relative;top: -150px"><img src="img/dd_novel_1.jpg" width="75" height="80"></div>
                    <div style="display: inline-block">
                        <div class="divc1"><a href="#">喂，我知道你</a></div>
                        <div class="divc1"><span>作者：兰海 著</span></div>
                        <div class="divc1"><span>出版社：中国妇女出版社</span></div>
                        <div class="divc1"><span style="color: chocolate">出版时间：2009年10月</span></div>
                        <div class="divc1"><span>定价：￥28.80</span></div>
                        <div class="divc1"><span>当当价：￥17.90</span></div>
                    </div>
                </div>
                <div style="display: inline-block">
                    <div style="display: inline-block;position: relative;top: -150px"><img src="img/dd_novel_1.jpg" width="75" height="80"></div>
                    <div style="display: inline-block">
                        <div class="divc1"><a href="#">喂，我知道你</a></div>
                        <div class="divc1"><span>作者：兰海 著</span></div>
                        <div class="divc1"><span>出版社：中国妇女出版社</span></div>
                        <div class="divc1"><span style="color: chocolate">出版时间：2009年10月</span></div>
                        <div class="divc1"><span>定价：￥28.80</span></div>
                        <div class="divc1"><span>当当价：￥17.90</span></div>
                    </div>
                </div>
                <div style="display: inline-block">
                    <div style="display: inline-block;position: relative;top: -150px"><img src="img/dd_novel_1.jpg" width="75" height="80"></div>
                    <div style="display: inline-block">
                        <div class="divc1"><a href="#">喂，我知道你</a></div>
                        <div class="divc1"><span>作者：兰海 著</span></div>
                        <div class="divc1"><span>出版社：中国妇女出版社</span></div>
                        <div class="divc1"><span style="color: chocolate">出版时间：2009年10月</span></div>
                        <div class="divc1"><span>定价：￥28.80</span></div>
                        <div class="divc1"><span>当当价：￥17.90</span></div>
                    </div>
                </div>
            </div>
            <!--重点关注-->
            <div style="border: solid 1px;margin-top: 10px">
                <div style="background-color:lightgray "><span style="color: chocolate">重点关注</span></div>
                <div style="display: inline-block;width: 132px">
                    <div>
                        <img src="img/dd_focus_1.jpg">
                    </div>
                    <div>
                        <a href="#">郑玉巧育儿经·幼儿卷</a>
                    </div>
                    <div><span>定价:￥49.80</span></div>
                    <div><span>当当价：￥32.00</span></div>
                </div>
                <div style="display: inline-block;width: 132px">
                    <div>
                        <img src="img/dd_focus_1.jpg">
                    </div>
                    <div>
                        <a href="#">郑玉巧育儿经·幼儿卷</a>
                    </div>
                    <div><span>定价:￥49.80</span></div>
                    <div><span>当当价：￥32.00</span></div>
                </div>
                <div style="display: inline-block;width: 132px">
                    <div>
                        <img src="img/dd_focus_1.jpg">
                    </div>
                    <div>
                        <a href="#">郑玉巧育儿经·幼儿卷</a>
                    </div>
                    <div><span>定价:￥49.80</span></div>
                    <div><span>当当价：￥32.00</span></div>
                </div>
                <div style="display: inline-block;width: 132px">
                    <div>
                        <img src="img/dd_focus_1.jpg">
                    </div>
                    <div>
                        <a href="#">郑玉巧育儿经·幼儿卷</a>
                    </div>
                    <div><span>定价:￥49.80</span></div>
                    <div><span>当当价：￥32.00</span></div>
                </div>
                <div style="display: inline-block;width: 132px">
                    <div>
                        <img src="img/dd_focus_1.jpg">
                    </div>
                    <div>
                        <a href="#">郑玉巧育儿经·幼儿卷</a>
                    </div>
                    <div><span>定价:￥49.80</span></div>
                    <div><span>当当价：￥32.00</span></div>
                </div>
                <div style="display: inline-block;width: 132px">
                    <div>
                        <img src="img/dd_focus_1.jpg">
                    </div>
                    <div>
                        <a href="#">郑玉巧育儿经·幼儿卷</a>
                    </div>
                    <div><span>定价:￥49.80</span></div>
                    <div><span>当当价：￥32.00</span></div>
                </div>
                <div style="display: inline-block;width: 132px">
                    <div>
                        <img src="img/dd_focus_1.jpg">
                    </div>
                    <div>
                        <a href="#">郑玉巧育儿经·幼儿卷</a>
                    </div>
                    <div><span>定价:￥49.80</span></div>
                    <div><span>当当价：￥32.00</span></div>
                </div>
                <div style="display: inline-block;width: 132px">
                    <div>
                        <img src="img/dd_focus_1.jpg">
                    </div>
                    <div>
                        <a href="#">郑玉巧育儿经·幼儿卷</a>
                    </div>
                    <div><span>定价:￥49.80</span></div>
                    <div><span>当当价：￥32.00</span></div>
                </div>
            </div>
        </div>


        <div style="display: inline-block;width: 300px;height: 30px">
            <div>
                <div style="background-color: lightsalmon">
                    <img src="img/dd_book_mess.gif">
                    <span style="color: darkred">书讯快递</span>
                </div>
                <div>
                    <ul>
                        <li>2010考研英语大纲到货75折</li>
                        <li>权威定本四大名著（人民文..</li>
                        <li>口述历史权威唐德刚先生国...</li>
                        <li>袁伟民与体坛风云：实话实...</li>
                        <li>我们台湾这些年：轰动两岸</li>
                        <li>2010考研英语大纲到货75折</li>
                        <li>权威定本四大名著（人民文..</li>
                        <li>口述历史权威唐德刚先生国...</li>
                    </ul>
                </div>
                <div style="margin-left: 30px">
                    <img src="img/dd_book_right_adver1.jpg">
                </div>
                <div style="margin-left: 30px">
                    <img src="img/dd_book_right_adver2.gif" alt="">
                </div>
            </div>


            <div style="margin-top: 60px">
                <div style="background-color: darkgreen"><span style="color: aliceblue">近7日畅销榜</span></div>
                <div style="background-color: lightgoldenrodyellow">
                    <div>
                        <div style="display: inline-block;background-image: url('img/dd_header_2_a.jpg');margin-left: 100px">
                            旅游
                        </div>
                        <div style="display: inline-block;background-image: url('img/dd_header_2_a.jpg')">
                            外语
                        </div>
                        <div style="display: inline-block;background-image: url('img/dd_header_2_a.jpg')">
                            小说
                        </div>
                        <div style="display: inline-block;background-image: url('img/dd_header_2_a.jpg')">
                            动漫
                        </div>
                    </div>
                    <div>
                        <img src="img/dd_book_no_01.gif" style="margin-left: 10px;position: relative;top: -120px">
                        <img src="img/dd_seven_hearten_01.jpg" style="margin-left: 20px;position: relative;top: -80px">
                        <div style="display: inline-block;margin-left: 40px;width: 120px;margin-top: 20px" >
                            <div><a>不抱怨的世界</a></div>
                            <div><span>作者：（美）鲍温</span></div>
                            <div><span>出版社：陕西师范</span></div>
                            <div><span>出版时间：2009年4月</span></div>
                        </div>
                    </div>
                    <div>
                        <img src="img/dd_book_no_01.gif" style="margin-left: 10px;position: relative;top: -120px">
                        <img src="img/dd_seven_hearten_01.jpg" style="margin-left: 20px;position: relative;top: -80px">
                        <div style="display: inline-block;margin-left: 40px;width: 120px;margin-top: 20px" >
                            <div><a>不抱怨的世界</a></div>
                            <div><span>作者：（美）鲍温</span></div>
                            <div><span>出版社：陕西师范</span></div>
                            <div><span>出版时间：2009年4月</span></div>
                        </div>
                    </div>
                    <div>
                        <img src="img/dd_book_no_01.gif" style="margin-left: 10px;position: relative;top: -120px">
                        <img src="img/dd_seven_hearten_01.jpg" style="margin-left: 20px;position: relative;top: -80px">
                        <div style="display: inline-block;margin-left: 40px;width: 120px;margin-top: 20px" >
                            <div><a>不抱怨的世界</a></div>
                            <div><span>作者：（美）鲍温</span></div>
                            <div><span>出版社：陕西师范</span></div>
                            <div><span>出版时间：2009年4月</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="text-align: center">
        <div>
            <span>公司简介 | 诚征英才 |网站联盟 | 百货招商 | 交易条款</span>
        </div>
        <div >
        <span>Copyfight(c)当当网 2004-2009， All Rights Reserved
            <img src="img/validate.gif"/>
            京ICP证041189号 音像制作经营许可证 京音网8号
        </span>
        </div>
    </div>
    <div style="position: fixed;top: 200px;left: 1400px">
        <img src="img/dd_scroll.jpg">
    </div>
</div>
</body>
</html>

qianmingmaoyao
关注
当当网首页——html代码
穆雄雄的博客
10-28 3665
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
JS仿当当网首页Tab切换特效
07-24
【JS仿当当网首页Tab切换特效】是一种常见的前端交互设计，用于提高用户在网页上的浏览体验，尤其是在电子商务网站中，如当当网。这个特效允许用户通过点击不同的标签来切换显示不同类型的商品信息，如图书、电子...
当当网首页制作
08-06
【当当网首页制作】是一个关于构建在线图书销售平台的项目，主要使用HTML语言来实现。在网页设计与开发中，HTML（HyperText Markup Language）是基础，它定义了网页的结构和内容。在这个项目中，我们将深入探讨如何...
当当网首页轮播图仿写.zip
03-25
本项目是关于"当当网首页轮播图"的仿写，目标是实现一个具备定时更换、鼠标交互功能的轮播图组件。下面我们将详细探讨这个项目的实现原理和技术知识点。 1. **轮播图结构设计** 轮播图的基本结构通常包括一组图片...
css父容器溢出隐藏 子容器溢出滚动
u010234868的专栏
09-13 361
parent 容器设置了固定的宽度和高度，并且通过 overflow: hidden;隐藏了溢出的 .child 容器内容。如果 .child 容器的内容确实超出了其设定的宽度和高度，则会显示滚动条，允许用户滚动查看所有内容。在父容器上设置 overflow: hidden;可以隐藏溢出的内容。如果你想要在子容器溢出时出现滚动条，可以设置 overflow: auto;
HTML、CSS实现树状图
p_s_p的博客
09-09 709
【代码】HTML、CSS实现树状图。
【CSS in Depth 2 精译_032】5.4 Grid 网格布局的显示网格与隐式网格（上）
PeacefulWinter的博客
09-17 720
本篇为《CSS in Depth》全新第2版5.4小节的上篇，主要介绍了 Grid 网格布局中的显示网格（explicit grid）与隐式网格（implicit grid）的基本概念，并通过引入一个新的示例页面，详细演示并讲解了基础网格布局的实现过程，为后续隐式网格的用法做铺垫。建议收藏，并跟随本篇上传的同步源代码在本地进行验证。
css ＜样式一＞
最新发布
weixin_43689953的博客
09-17 195
盒子模型 浮动 定位
vue 实现tab菜单切换
weixin_57334661的博客
09-17 373
实现切换tab菜单，激活状态，按钮高亮，显示对应的菜单内容。
CSS 响应式设计（补充）——WEB开发系列36
一条晒干的咸鱼的博客
09-11 1203
随着移动设备的普及，网页设计的焦点逐渐转向了响应式设计。响应式设计不仅要求网页在各种屏幕尺寸上良好展示，还要适应不同设备的特性。
css文本修饰
weixin_74261199的博客
09-17 511
color。
【H2O2|全栈】关于CSS（2）CSS基础（二）
过期的H2O2的博客
09-12 1160
本系列博客将分享层叠样式表（CSS）有关的知识点。作为本系列的第二篇，本文主要讲解选择器的组合，链接、列表、表格的属性，以及背景属性。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 4912
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
Layout 布局组件快速搭建
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1434
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
【HTML】元素的分类（块元素、行内元素、行内块元素）
千里之行，始于足下
09-13 1159
如何消除行内块元素之间的空隙；转为行内块元素；转为行内元素；转为块元素
【HTML】Html标签
千里之行，始于足下
09-12 1165
文本标签、表格标签、表单标签、列表标签、媒体标签、特殊字符、转义字符
IntelliJ IDEA 创建 HTML 项目教程
weixin_58606202的博客
09-17 205
本文将带你逐步了解如何使用 IntelliJ IDEA 创建一个 HTML 项目，并配置适合前端开发的环境。1. 访问 JetBrains 的官网：[https://www.jetbrains.com/idea/](https://www.jetbrains.com/idea/)，下载并安装适用于你操作系统的 IntelliJ IDEA。2. 右键点击新建的文件夹，选择 New > HTML File，为你的 HTML 文件命名，例如 `index.html`。你可以选择适合自己需求的版本。
html 与 md 文件数据格式转换
小胖_@的博客
09-14 193
【代码】html 与 md 文件数据格式转换。
仿当当网首页制作详解与达内IT培训综合练习
- 效果演示：这里会展示一个预期完成后的页面样例，模拟当当网首页的视觉风格，包括清晰的导航栏，带有欢迎信息和登录/注册选项，以及商品图片和购物车按钮等元素。 - 我们实现的部分：这部分可能会介绍已实现的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值