Maison > interface Web > tutoriel HTML > le corps du texte

Exemple de page d'accueil HTML Dangdang

墨辰丷
Libérer: 2018-05-11 11:58:18
original
5358 Les gens l'ont consulté

Cet article décrit principalement le cas de l'utilisation du HTML pour écrire la page d'accueil de Dangdang. Les amis intéressés par ce cas peuvent s'y référer.

Le code HTML est le suivant :

<!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>
Copier après la connexion

Recommandations associées :

Effet d'image de focus de la page d'accueil d'Alipay jQuery Imitation

Effet de glissement des actualités de la page d'accueil JS

css utilise par rapport au haut de la page d'accueil de Baidu

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!