明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

html當(dāng)當(dāng)網(wǎng)首頁案例

發(fā)表時間：2023-09-10 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章主要描述如何使用html來寫當(dāng)當(dāng)網(wǎng)首頁的案例，有對此案例感興趣的小伙伴來參考一下吧。html代碼如下：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"...
本篇文章主要描述如何使用html來寫當(dāng)當(dāng)網(wǎng)首頁的案例，有對此案例感興趣的小伙伴來參考一下吧。

html代碼如下：

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>當(dāng)當(dāng)網(wǎng)首頁</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>  
<!--隨滾動條滾動可關(guān)閉廣告-->  
<div id="right" class="right">  
    <div class="dd_close" id="dd_close"><a href="javascript:void(0);">關(guān)閉</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>  
<!--網(wǎng)站中間內(nèi)容開始-->  
<div id="main">  
    <div class="dd_index_top_adver"><img src="images/dd_index_top_adver.jpg" alt="通欄廣告圖片" /></div>  
    <!--左側(cè)菜單開始-->  
    <div id="catList">  
        <!--推薦分類-->  
        <div class="book_sort">  
            <div class="book_sort_bg">推薦分類</div>  
            <div class="book_sort_bottom" style="border-bottom:0px;">外語   中小學(xué)教輔  </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">懸疑   言情   職場   財經(jīng)</div>  
            <div class="book_cate">[文藝]</div>  
            <div class="book_sort_bottom">文學(xué)   傳記   藝術(shù)   攝影</div>  
            <div class="book_cate">[青春]</div>  
            <div class="book_sort_bottom">青春文學(xué)   動漫   幽默</div>  
            <div class="book_cate">[勵志/成功]</div>  
            <div class="book_sort_bottom">修養(yǎng)   成功   職場   溝通</div>  
            <div class="book_cate">[少兒]</div>  
            <div class="book_sort_bottom">0-2   3-6   7-10   11-14<br />文學(xué)   科普   圖畫書</div>  
            <div class="book_cate">[生活]</div>  
            <div class="book_sort_bottom">保健   家教   美麗裝扮   育兒   美食   旅游   收藏   生活   體育   地圖   個人理財</div>  
            <div class="book_cate">[個人社科]</div>  
            <div class="book_sort_bottom">文化   歷史   哲學(xué)/宗教   古籍   政治/歷史   法律   經(jīng)濟(jì)   社會科學(xué)   心理學(xué)</div>  
            <div class="book_cate">[管理]</div>  
            <div class="book_sort_bottom">管理   金融   營銷   會計</div>  
            <div class="book_cate">[科技]</div>  
            <div class="book_sort_bottom">科普   建筑   醫(yī)學(xué)   計算機(jī)   農(nóng)林   自然科學(xué)   工業(yè)   通信</div>  
            <div class="book_cate">[教育]</div>  
            <div class="book_sort_bottom">教材   中小學(xué)教輔   外語</div>  
            <div class="book_cate">[工具書]</div>  
            <div class="book_cate">[圖外原版書]</div>  
            <div class="book_cate">[期刊]</div>  
        </div>  
        <!--圖書商品分類結(jié)束-->  
    </div>  
    <!--左側(cè)菜單結(jié)束-->  
    <!--中間部分開始-->  
    <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 />  
                        當(dāng)當(dāng)價：￥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 />  
                        當(dāng)當(dāng)價：￥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 />  
                        當(dāng)當(dāng)價：￥26.30  
                    </dd>  
                    <dt><img src="images/dd_history_4.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">大家國學(xué)十六講</font><br />  
                        作者：張蔭麟，呂思勉 著 <br />  
                        出版社：中國友誼出版公司 <br />  
                        <font class="book_publish">出版時間：2009年10月</font><br />  
                        定價：￥19.80<br />  
                        當(dāng)當(dāng)價：￥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 />  
                        當(dāng)當(dāng)價：￥17.90  
                    </dd>  
                    <dt><img src="images/dd_family_2.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">擇業(yè)要趁早</font><br />  
                        作者：（美）列文<br />  
                        出版社：海天出版社 <br />  
                        <font class="book_publish">出版時間：2009年10月</font><br />  
                        定價：￥28.00<br />  
                        當(dāng)當(dāng)價：￥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 />  
                        當(dāng)當(dāng)價：￥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 />  
                        當(dāng)當(dāng)價：￥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 />  
                        當(dāng)當(dāng)價：￥17.90  
                    </dd>  
                    <dt><img src="images/dd_culture_2.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">擇業(yè)要趁早</font><br />  
                        作者：（美）列文 <br />  
                        出版社：海天出版社 <br />  
                        <font class="book_publish">出版時間：2009年10月</font><br />  
                        定價：￥28.00<br />  
                        當(dāng)當(dāng)價：￥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 />  
                        當(dāng)當(dāng)價：￥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 />  
                        當(dāng)當(dāng)價：￥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 />  
                        當(dāng)當(dāng)價：￥17.90  
                    </dd>  
                    <dt><img src="images/dd_novel_2.jpg" alt="history"/></dt>  
                    <dd>  
                        <font class="book_title">擇業(yè)要趁早</font><br />  
                        作者：（美）列文 <br />  
                        出版社：海天出版社 <br />  
                        <font class="book_publish">出版時間：2009年10月</font><br />  
                        定價：￥28.00<br />  
                        當(dāng)當(dāng)價：￥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 />  
                        當(dāng)當(dāng)價：￥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 />  
                        當(dāng)當(dāng)價：￥17.40  
                    </dd>  
                </dl>  
            </div>  
        </div>  
        <!--重點(diǎn)關(guān)注-->  
        <div class="book_sort">  
            <div class="book_new">  
                <div class="book_left">重點(diǎn)關(guān)注</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">鄭玉巧育兒經(jīng)·幼兒卷</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 />  
                        當(dāng)當(dāng)價：￥32.00</dd>  
                    <dd>定價：￥50.00<br />  
                        當(dāng)當(dāng)價：￥33.00</dd>  
                    <dd>定價：￥29.00<br />  
                        當(dāng)當(dāng)價：￥19.40</dd>  
                    <dd>定價：￥29.00<br />  
                        當(dāng)當(dāng)價：￥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">求醫(yī)不如求己養(yǎng)生救命大寶典</a></dd>  
                    <dd><a href="#" class="blue">雅思詞匯詞根+聯(lián)想記憶法</a></dd>  
                    <dd><a href="#" class="blue">等待Nemo的日子</a></dd>  
                    <dd>定價：￥120.00<br />  
                        當(dāng)當(dāng)價：￥79.20</dd>  
                    <dd>定價：￥198.00<br />  
                        當(dāng)當(dāng)價：￥116.90</dd>  
                    <dd>定價：￥28.00<br />  
                        當(dāng)當(dāng)價：￥18.70</dd>  
                    <dd>定價：￥26.00<br />  
                        當(dāng)當(dāng)價：￥17.90</dd>  
                </dl>  
            </div>  
        </div>  
    </div>  
    <!--中間部分結(jié)束-->  
    <!--右側(cè)部分開始-->  
    <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>?權(quán)威定本四大名著（人民文...</li>  
                            <li>?口述歷史權(quán)威唐德剛先生國...</li>  
                            <li>?袁偉民與體壇風(fēng)云：實話實...</li>  
                            <li>?我們臺灣這些年：轟動兩岸...</li>  
                            <li>?暢銷教輔推薦：精品套書50...</li>  
                            <li>?2010版法律碩士聯(lián)考大綱75...</li>  
                            <li>?計算機(jī)新書暢銷書75折搶購</li>  
                            <li>?2009年孩子最喜歡的書>></li>  
                            <li>?弗洛伊德作品精選集59折</li>  
                            <li>?2010考研英語大綱到貨75折...</li>  
                            <li>?權(quán)威定本四大名著（人民文...</li>  
                            <li>?口述歷史權(quán)威唐德剛先生國...</li>  
                            <li>?袁偉民與體壇風(fēng)云：實話實...</li>  
                            <li>?我們臺灣這些年：轟動兩岸...</li>  
                            <li>?暢銷教輔推薦：精品套書50...</li>  
                            <li>?2010版法律碩士聯(lián)考大綱75...</li>  
                            <li>?計算機(jī)新書暢銷書75折搶購</li>  
                            <li>?2009年孩子最喜歡的書>></li>  
                            <li>?弗洛伊德作品精選集59折</li>  
                            <li>?2010考研英語大綱到貨75折...</li>  
                            <li>?權(quán)威定本四大名著（人民文...</li>  
                            <li>?口述歷史權(quán)威唐德剛先生國...</li>  
                            <li>?袁偉民與體壇風(fēng)云：實話實...</li>  
                            <li>?我們臺灣這些年：轟動兩岸...</li>  
                            <li>?暢銷教輔推薦：精品套書50...</li>  
                            <li>?2010版法律碩士聯(lián)考大綱75...</li>  
                            <li>?計算機(jī)新書暢銷書75折搶購</li>  
                            <li>?2009年孩子最喜歡的書>></li>  
                            <li>?弗洛伊德作品精選集59折</li>  
                            <li>?2010考研英語大綱到貨75折...</li>  
                            <li>?權(quán)威定本四大名著（人民文...</li>  
                            <li>?口述歷史權(quán)威唐德剛先生國...</li>  
                            <li>?袁偉民與體壇風(fēng)云：實話實...</li>  
                            <li>?我們臺灣這些年：轟動兩岸...</li>  
                            <li>?暢銷教輔推薦：精品套書50...</li>  
                            <li>?2010版法律碩士聯(lián)考大綱75...</li>  
                            <li>?計算機(jī)新書暢銷書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">高效能人士的七個習(xí)慣</a></li>  
                                <li><a href="#" class="blue">被迫強(qiáng)大</a></li>  
                                <li><a href="#" class="blue">遇見心想事成的自己</a></li>  
                                <li><a href="#" class="blue">世界上最偉大的推銷員</a></li>  
                                <li><a href="#" class="blue">我的成功可以復(fù)制</a></li>  
                            </ul>  
                        </div>  
                        <!--勵志結(jié)束-->  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
<!--右側(cè)部分結(jié)束-->  
</div>  
<!--網(wǎng)站版權(quán)部分開始-->  
<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">網(wǎng)站聯(lián)盟</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>

相關(guān)推薦：

jQuery仿支付寶首頁焦點(diǎn)圖效果

JS首頁新聞滑動效果

css使用relative模仿百度首頁top

以上就是html當(dāng)當(dāng)網(wǎng)首頁實例的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。