Heim > Web-Frontend > HTML-Tutorial > Beispiel für eine HTML-Dangdang-Homepage

Beispiel für eine HTML-Dangdang-Homepage

墨辰丷
Freigeben: 2018-05-11 11:58:18
Original
5419 Leute haben es durchsucht

Dieser Artikel beschreibt hauptsächlich den Fall, wie HTML zum Schreiben der Homepage von Dangdang verwendet wird. Freunde, die sich für diesen Fall interessieren, können darauf verweisen.

HTML-Code lautet wie folgt:

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>当当网首页</title>  
    <link href="css/global.css" rel="stylesheet" type="text/css" />  
    <link href="css/layout.css" rel="stylesheet" type="text/css" />  
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>  
    <script type="text/javascript" src="js/index.js"></script>  
</head>  
<body>  
<!--随滚动条滚动可关闭广告-->  
<div id="right" class="right">  
    <div class="dd_close" id="dd_close"><a href="javascript:void(0);">关闭</a></div>  
    <img src="images/dd_scroll.jpg" id="right1" />  
</div>  
<!--头部iframe引入-->  
<div id="header">  
    <iframe src="header.html" height="155px" width="960px" frameborder="0"></iframe>  
</div>  
<!--网站中间内容开始-->  
<div id="main">  
    <div class="dd_index_top_adver"><img src="images/dd_index_top_adver.jpg" alt="通栏广告图片" /></div>  
    <!--左侧菜单开始-->  
    <div id="catList">  
        <!--推荐分类-->  
        <div class="book_sort">  
            <div class="book_sort_bg">推荐分类</div>  
            <div class="book_sort_bottom" style="border-bottom:0px;">外语 | 中小学教辅 |</div>  
        </div>  
        <!--图书商品分类开始-->  
        <div class="book_sort">  
            <div class="book_sort_bg"><img src="images/dd_book_cate_icon.gif" alt="图书" /> 图书商品分类</div>  
            <div class="book_cate">[小说]</div>  
            <div class="book_sort_bottom">悬疑 | 言情 | 职场 | 财经</div>  
            <div class="book_cate">[文艺]</div>  
            <div class="book_sort_bottom">文学 | 传记 | 艺术 | 摄影</div>  
            <div class="book_cate">[青春]</div>  
            <div class="book_sort_bottom">青春文学 | 动漫 | 幽默</div>  
            <div class="book_cate">[励志/成功]</div>  
            <div class="book_sort_bottom">修养 | 成功 | 职场 | 沟通</div>  
            <div class="book_cate">[少儿]</div>  
            <div class="book_sort_bottom">0-2 | 3-6 | 7-10 | 11-14<br />文学 | 科普 | 图画书</div>  
            <div class="book_cate">[生活]</div>  
            <div class="book_sort_bottom">保健 | 家教 | 美丽装扮 | 育儿 | 美食 | 旅游 | 收藏 | 生活 | 体育 | 地图 | 个人理财</div>  
            <div class="book_cate">[个人社科]</div>  
            <div class="book_sort_bottom">文化 | 历史 | 哲学/宗教 | 古籍 | 政治/历史 | 法律 | 经济 | 社会科学 | 心理学</div>  
            <div class="book_cate">[管理]</div>  
            <div class="book_sort_bottom">管理 | 金融 | 营销 | 会计</div>  
            <div class="book_cate">[科技]</div>  
            <div class="book_sort_bottom">科普 | 建筑 | 医学 | 计算机 | 农林 | 自然科学 | 工业 | 通信</div>  
            <div class="book_cate">[教育]</div>  
            <div class="book_sort_bottom">教材 | 中小学教辅 | 外语</div>  
            <div class="book_cate">[工具书]</div>  
            <div class="book_cate">[图外原版书]</div>  
            <div class="book_cate">[期刊]</div>  
        </div>  
        <!--图书商品分类结束-->  
    </div>  
    <!--左侧菜单结束-->  
    <!--中间部分开始-->  
    <div id="content">  
        <!--轮换显示的横幅广告图片-->  
        <div class="scroll_top"></div>  
        <div class="scroll_mid">  
            <ul id="scroll_img">  
                <li><img src="images/dd_scroll_1.jpg"/></li>  
                <li><img src="images/dd_scroll_2.jpg"/></li>  
                <li><img src="images/dd_scroll_3.jpg"/></li>  
                <li><img src="images/dd_scroll_4.jpg"/></li>  
                <li><img src="images/dd_scroll_5.jpg"/></li>  
                <li><img src="images/dd_scroll_6.jpg"/></li>  
            </ul>  
            <ul id="scroll_number">  
                <li>1</li>  
                <li>2</li>  
                <li>3</li>  
                <li>4</li>  
                <li>5</li>  
                <li>6</li>  
            </ul>  
        </div>  
        <div class="scroll_end"></div>  
        <!--最新上架开始-->  
        <div id="bookTab" class="book_sort">  
            <div class="book_new">  
                <div class="book_left">最新上架</div>  
                <div class="book_type book_type_out" id="history">历史</div>  
                <div class="book_type" id="family">家教</div>  
                <div class="book_type" id="culture">文化</div>  
                <div class="book_type" id="novel">小说</div>  
                <div class="book_right"><a href="#">更多>></a></div>  
            </div>  
            <div class="book_class" style="height:250px;">  
                <!--历史-->  
                <dl id="book_history">  
                    <dt><img src="images/dd_history_1.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">《中国时代》(上)</font><br />  
                        作者:师永刚,邹明 主编 <br />  
                        出版社:作家出版社 <br />  
                        <font class="book_publish">出版时间:2009年10月</font><br />  
                        定价:¥39.00<br />  
                        当当价:¥27.00  
                    </dd>  
                    <dt><img src="images/dd_history_2.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">中国历史的屈辱</font><br />  
                        作者:王重旭 著 <br />  
                        出版社:华夏出版社 <br />  
                        <font class="book_publish">出版时间:2009年11月</font><br />  
                        定价:¥26.00<br />  
                        当当价:¥18.20  
                    </dd>  
                    <dt><img src="images/dd_history_3.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">《中国时代》(下)</font><br />  
                        作者:师永刚,邹明 主编 <br />  
                        出版社:作家出版社 <br />  
                        <font class="book_publish"> 出版时间:2009年10月</font><br />  
                        定价:¥38.00<br />  
                        当当价:¥26.30  
                    </dd>  
                    <dt><img src="images/dd_history_4.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">大家国学十六讲</font><br />  
                        作者:张荫麟,吕思勉 著 <br />  
                        出版社:中国友谊出版公司 <br />  
                        <font class="book_publish">出版时间:2009年10月</font><br />  
                        定价:¥19.80<br />  
                        当当价:¥13.70  
                    </dd>  
                </dl>  
                <!--家教-->  
                <dl id="book_family" class="book_none">  
                    <dt><img src="images/dd_family_1.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">嘿,我知道你</font><br />  
                        作者:兰海 著 <br />  
                        出版社:中国妇女出版社 <br />  
                        <font class="book_publish">出版时间:2009年10月</font><br />  
                        定价:¥28.80<br />  
                        当当价:¥17.90  
                    </dd>  
                    <dt><img src="images/dd_family_2.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">择业要趁早</font><br />  
                        作者:(美)列文<br />  
                        出版社:海天出版社 <br />  
                        <font class="book_publish">出版时间:2009年10月</font><br />  
                        定价:¥28.00<br />  
                        当当价:¥19.30  
                    </dd>  
                    <dt><img src="images/dd_family_3.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">爷爷奶奶的“孙子兵法”</font><br />  
                        作者:伏建全 编著 <br />  
                        出版社:地震出版社 <br />  
                        <font class="book_publish"> 出版时间:2009年8月</font><br />  
                        定价:¥28.00<br />  
                        当当价:¥17.40  
                    </dd>  
                    <dt><img src="images/dd_family_4.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">1分钟读懂孩子心理</font><br />  
                        作者:海韵 著 <br />  
                        出版社:朝华出版社 <br />  
                        <font class="book_publish">出版时间:2009年10月</font><br />  
                        定价:¥28.00<br />  
                        当当价:¥17.40  
                    </dd>  
                </dl>  
                <!--文化-->  
                <dl id="book_culture" class="book_none">  
                    <dt><img src="images/dd_culture_1.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">嘿,我知道你</font><br />  
                        作者:兰海 著 <br />  
                        出版社:中国妇女出版社 <br />  
                        <font class="book_publish">出版时间:2009年10月</font><br />  
                        定价:¥28.80<br />  
                        当当价:¥17.90  
                    </dd>  
                    <dt><img src="images/dd_culture_2.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">择业要趁早</font><br />  
                        作者:(美)列文 <br />  
                        出版社:海天出版社 <br />  
                        <font class="book_publish">出版时间:2009年10月</font><br />  
                        定价:¥28.00<br />  
                        当当价:¥19.30  
                    </dd>  
                    <dt><img src="images/dd_culture_3.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">爷爷奶奶的“孙子兵法”</font><br />  
                        作者:伏建全 编著 <br />  
                        出版社:地震出版社 <br />  
                        <font class="book_publish"> 出版时间:2009年8月</font><br />  
                        定价:¥28.00<br />  
                        当当价:¥17.40  
                    </dd>  
                    <dt><img src="images/dd_culture_4.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">1分钟读懂孩子心理</font><br />  
                        作者:海韵 著 <br />  
                        出版社:朝华出版社 <br />  
                        <font class="book_publish">出版时间:2009年10月</font><br />  
                        定价:¥28.00<br />  
                        当当价:¥17.40  
                    </dd>  
                </dl>  
                <!--小说-->  
                <dl id="book_novel" class="book_none">  
                    <dt><img src="images/dd_novel_1.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">嘿,我知道你</font><br />  
                        作者:兰海 著 <br />  
                        出版社:中国妇女出版社 <br />  
                        <font class="book_publish">出版时间:2009年10月</font><br />  
                        定价:¥28.80<br />  
                        当当价:¥17.90  
                    </dd>  
                    <dt><img src="images/dd_novel_2.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">择业要趁早</font><br />  
                        作者:(美)列文 <br />  
                        出版社:海天出版社 <br />  
                        <font class="book_publish">出版时间:2009年10月</font><br />  
                        定价:¥28.00<br />  
                        当当价:¥19.30  
                    </dd>  
                    <dt><img src="images/dd_novel_3.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">爷爷奶奶的“孙子兵法”</font><br />  
                        作者:伏建全 编著 <br />  
                        出版社:地震出版社 <br />  
                        <font class="book_publish"> 出版时间:2009年8月</font><br />  
                        定价:¥28.00<br />  
                        当当价:¥17.40  
                    </dd>  
                    <dt><img src="images/dd_novel_4.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">1分钟读懂孩子心理</font><br />  
                        作者:海韵 著 <br />  
                        出版社:朝华出版社 <br />  
                        <font class="book_publish">出版时间:2009年10月</font><br />  
                        定价:¥28.00<br />  
                        当当价:¥17.40  
                    </dd>  
                </dl>  
            </div>  
        </div>  
        <!--重点关注-->  
        <div class="book_sort">  
            <div class="book_new">  
                <div class="book_left">重点关注</div>  
            </div>  
            <div class="book_class" style="height:380px;">  
                <dl id="book_focus">  
                    <dt><img src="images/dd_focus_1.jpg" alt="focus"/></dt>  
                    <dt><img src="images/dd_focus_2.jpg" alt="focus"/></dt>  
                    <dt><img src="images/dd_focus_3.jpg" alt="focus"/></dt>  
                    <dt><img src="images/dd_focus_4.jpg" alt="focus"/></dt>  
                    <dd><a href="#" class="blue">郑玉巧育儿经·幼儿卷</a></dd>  
                    <dd><a href="#" class="blue">蹦蹦和跳跳的故事(全10册)</a></dd>  
                    <dd><a href="#" class="blue">人体自有大药(让每一个人都能变成...</a></dd>  
                    <dd><a href="#" class="blue">特效穴位使用手册</a></dd>  
                    <dd>定价:¥49.80<br />  
                        当当价:¥32.00</dd>  
                    <dd>定价:¥50.00<br />  
                        当当价:¥33.00</dd>  
                    <dd>定价:¥29.00<br />  
                        当当价:¥19.40</dd>  
                    <dd>定价:¥29.00<br />  
                        当当价:¥19.40</dd>  
                    <dt><img src="images/dd_focus_5.jpg" alt="focus"/></dt>  
                    <dt><img src="images/dd_focus_6.jpg" alt="focus"/></dt>  
                    <dt><img src="images/dd_focus_7.jpg" alt="focus"/></dt>  
                    <dt><img src="images/dd_focus_8.jpg" alt="focus"/></dt>  
                    <dd><a href="#" class="blue">《猫武士系列》(全6册)</a></dd>  
                    <dd><a href="#" class="blue">求医不如求己养生救命大宝典</a></dd>  
                    <dd><a href="#" class="blue">雅思词汇词根+联想记忆法</a></dd>  
                    <dd><a href="#" class="blue">等待Nemo的日子</a></dd>  
                    <dd>定价:¥120.00<br />  
                        当当价:¥79.20</dd>  
                    <dd>定价:¥198.00<br />  
                        当当价:¥116.90</dd>  
                    <dd>定价:¥28.00<br />  
                        当当价:¥18.70</dd>  
                    <dd>定价:¥26.00<br />  
                        当当价:¥17.90</dd>  
                </dl>  
            </div>  
        </div>  
    </div>  
    <!--中间部分结束-->  
    <!--右侧部分开始-->  
    <div id="silder">  
        <!--书讯快递-->  
        <div class="book_sort">  
            <div class="book_sort_bg"><img src="images/dd_book_mess.gif" alt="mess" style=" vertical-align:text-bottom;"/>书讯快递</div>  
            <div class="book_class">  
                <div id="dome">  
                    <div id="dome1">  
                        <ul id="express">  
                            <li>・2010考研英语大纲到货75折...</li>  
                            <li>・权威定本四大名著(人民文...</li>  
                            <li>・口述历史权威唐德刚先生国...</li>  
                            <li>・袁伟民与体坛风云:实话实...</li>  
                            <li>・我们台湾这些年:轰动两岸...</li>  
                            <li>・畅销教辅推荐:精品套书50...</li>  
                            <li>・2010版法律硕士联考大纲75...</li>  
                            <li>・计算机新书畅销书75折抢购</li>  
                            <li>・2009年孩子最喜欢的书>></li>  
                            <li>・弗洛伊德作品精选集59折</li>  
                            <li>・2010考研英语大纲到货75折...</li>  
                            <li>・权威定本四大名著(人民文...</li>  
                            <li>・口述历史权威唐德刚先生国...</li>  
                            <li>・袁伟民与体坛风云:实话实...</li>  
                            <li>・我们台湾这些年:轰动两岸...</li>  
                            <li>・畅销教辅推荐:精品套书50...</li>  
                            <li>・2010版法律硕士联考大纲75...</li>  
                            <li>・计算机新书畅销书75折抢购</li>  
                            <li>・2009年孩子最喜欢的书>></li>  
                            <li>・弗洛伊德作品精选集59折</li>  
                            <li>・2010考研英语大纲到货75折...</li>  
                            <li>・权威定本四大名著(人民文...</li>  
                            <li>・口述历史权威唐德刚先生国...</li>  
                            <li>・袁伟民与体坛风云:实话实...</li>  
                            <li>・我们台湾这些年:轰动两岸...</li>  
                            <li>・畅销教辅推荐:精品套书50...</li>  
                            <li>・2010版法律硕士联考大纲75...</li>  
                            <li>・计算机新书畅销书75折抢购</li>  
                            <li>・2009年孩子最喜欢的书>></li>  
                            <li>・弗洛伊德作品精选集59折</li>  
                            <li>・2010考研英语大纲到货75折...</li>  
                            <li>・权威定本四大名著(人民文...</li>  
                            <li>・口述历史权威唐德刚先生国...</li>  
                            <li>・袁伟民与体坛风云:实话实...</li>  
                            <li>・我们台湾这些年:轰动两岸...</li>  
                            <li>・畅销教辅推荐:精品套书50...</li>  
                            <li>・2010版法律硕士联考大纲75...</li>  
                            <li>・计算机新书畅销书75折抢购</li>  
                            <li>・2009年孩子最喜欢的书>></li>  
                            <li>・弗洛伊德作品精选集59折</li>  
                        </ul>  
                    </div>  
                </div>  
            </div>  
            <div class="book_express_avder"> <img src="images/dd_book_right_adver1.jpg" alt="adver" style="margin-bottom:5px;" /> <img src="images/dd_book_right_adver2.gif" alt="adver" /> </div>  
        </div>  
        <!--近7日畅销榜-->  
        <div class="book_sort">  
            <div class="book_seven_title">近7日畅销榜 <img src="images/dd_bang.gif" alt="bang" style="vertical-align:top;"/></div>  
            <div class="book_seven_border">  
                <div class="book_seven_top">  
                    <ul id="book_seven_cate">  
                        <li>动漫</li>  
                        <li>小说</li>  
                        <li>外语</li>  
                        <li>旅游</li>  
                        <li>励志</li>  
                    </ul>  
                </div>  
                <div class="book_seven_content">  
                    <div class="book_seven_content_left">  
                        <dl id="book_seven_number">  
                            <dt><img src="images/dd_book_no_01.gif" alt="book"/></dt>  
                            <dt><img src="images/dd_book_no_02.gif" alt="book"/></dt>  
                            <dt><img src="images/dd_book_no_03.gif" alt="book"/></dt>  
                            <dd><img src="images/dd_book_no_04.gif" alt="book"/></dd>  
                            <dd><img src="images/dd_book_no_05.gif" alt="book"/></dd>  
                            <dd><img src="images/dd_book_no_06.gif" alt="book"/></dd>  
                            <dd><img src="images/dd_book_no_07.gif" alt="book"/></dd>  
                            <dd><img src="images/dd_book_no_08.gif" alt="book"/></dd>  
                        </dl>  
                    </div>  
                    <div class="book_seven_content_right">  
                        <!--励志开始-->  
                        <div id="book_seven_hearten">  
                            <dl>  
                                <dt><img src="images/dd_seven_hearten_01.jpg" alt="hearten" /></dt>  
                                <dd>  
                                    <a href="#" class="blue">不抱怨的世界</a><br />  
                                    作者:(美)鲍温<br />  
                                    出版社:陕西师范<br />  
                                    出版时间:2009年4月  
                                </dd>  
                                <dt><img src="images/dd_seven_hearten_02.jpg" alt="hearten" /></dt>  
                                <dd>  
                                    <a href="#" class="blue">遇见未知的自己</a><br />  
                                    作者:张德芬 <br />  
                                    出版社:华夏出版<br />  
                                    出版时间:2008年1月  
                                </dd>  
                                <dt><img src="images/dd_seven_hearten_03.jpg" alt="hearten" /></dt>  
                                <dd>  
                                    <a href="#" class="blue">活法</a><br />  
                                    作者:(日)稻盛<br />  
                                    出版社:东方出版<br />  
                                    出版时间:2005年3月  
                                </dd>  
                            </dl>  
                            <ul>  
                                <li><a href="#" class="blue">高效能人士的七个习惯</a></li>  
                                <li><a href="#" class="blue">被迫强大</a></li>  
                                <li><a href="#" class="blue">遇见心想事成的自己</a></li>  
                                <li><a href="#" class="blue">世界上最伟大的推销员</a></li>  
                                <li><a href="#" class="blue">我的成功可以复制</a></li>  
                            </ul>  
                        </div>  
                        <!--励志结束-->  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
<!--右侧部分结束-->  
</div>  
<!--网站版权部分开始-->  
<div id="footer">  
    <div class="footer_top"><a href="#" target="_parent" class="footer_dull_red">公司简介</a> | <a href="#" target="_parent" class="footer_dull_red">诚证英才</a> | <a href="#" target="_parent" class="footer_dull_red">网站联盟</a> | <a href="#" target="_parent" class="footer_dull_red">百货招商</a> | <a href="#" target="_parent" class="footer_dull_red">交易条款</a></div>  
    <iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>  
</div>  
</body>  
</html>
Nach dem Login kopieren

Verwandte Empfehlungen:

jQuery Nachahmung des Alipay-Homepage-Fokusbildeffekts

JS-Homepage-News-Gleiteffekt

CSS verwendet relative, um Baidu-Homepage oben zu imitieren

Das obige ist der detaillierte Inhalt vonBeispiel für eine HTML-Dangdang-Homepage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage