【Html】 Html写静态淘宝页面

80 阅读 0 评论 53 点赞

我是靠谱客的博主开放雨，最近开发中收集的这篇文章主要介绍【Html】 Html写静态淘宝页面，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Html写淘宝页面

- 将源文件放在资源中共大家免费下载
- - Html
  - Css

将源文件放在资源中共大家免费下载

Html

资源下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网-淘！我喜欢</title>
    <link rel="stylesheet" type="text/css" href="淘宝.css" />
    

</head>
<body>
    <div class="wrapper">
   <div class="firstdiv" >
        <div class="infirstdiv">
            <table class="fd_table1">
            <tr >
                <td class="one small"><a href="#">中国大陆</td></a>
                <td class="one title"><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fbuyertrade.taobao.com%2Ftrade%2Fitemlist%2Flist_bought_items.htm%3Fspm%3Da21bo.2017.1997525045.2.5af911d9uOz12t">亲，请登录</a></td>
                <td class="one small"><a href="enroll.html" target="_blank">免费注册</a></td>
                <td class="one onelong"><a href="https://market.m.taobao.com/app/fdilab/download-page/main/index.html?spm=a21bo.2017.1997563273.1.5af911d9vvGbtm">手机逛淘宝</a></td>
            </tr>
        </table>
        <table class="fd_table2">
            <tr>
                <td class="one small"><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fbuyertrade.taobao.com%2Ftrade%2Fitemlist%2Flist_bought_items.htm%3Fspm%3Da21bo.2017.1997525045.2.5af911d9uOz12t">我的淘宝</a></td>
                <td class="one small"><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fbuyertrade.taobao.com%2Ftrade%2Fitemlist%2Flist_bought_items.htm%3Fspm%3Da21bo.2017.1997525045.2.5af911d9uOz12t">购物车</a></td>
                <td class="one small"><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fbuyertrade.taobao.com%2Ftrade%2Fitemlist%2Flist_bought_items.htm%3Fspm%3Da21bo.2017.1997525045.2.5af911d9uOz12t">收藏夹</a></td>
                <td class="one small"><a href="https://huodong.taobao.com/wow/tbhome/act/market-list?spm=a21bo.2017.1997563209.1.5af911d910ocmh">商品分类</a></td>
                <td class="one small"><a href="https://ishop.taobao.com/openshop/tb_open_shop_landing.htm?spm=a21bo.2017.1997525059.1.5af911d9aFSpef&accessCode=tbopenshop_personal">免费开店</a></td>
                <td class="sig">|</td>
                <td class="one twolong"><a href="https://ishop.taobao.com/openshop/tb_open_shop_landing.htm?spm=a21bo.2017.1997525059.1.5af911d9aFSpef&accessCode=tbopenshop_personal">千牛卖家中心</a></td>
                <td class="one small"><a href="https://consumerservice.taobao.com/online-help?spm=a21bo.2017.754895749.2.5af911d954TJ4x">联系客服</a></td>
                <td class="one small"><a href="#">网站导航</a></td>
            </tr>
        </table>
        </div>
   </div>
   <div class="seconddiv">
        <div class="inseconddiv">
            <div class="bannern"><a href="#"><img src="img/banner_1.png" height="95px" width="80px"></a></div>
            <div class="bannern" ><a href="#"><img src="img/banner_2.png"  class="banner_n"></div>
            <div class="bannern" ><a href="#"><img src="img/banner_3.png"  class="banner_n"></div>
            <div class="bannern" ><a href="#"><img src="img/banner_4.png"  class="banner_n"></div>
            <div class="bannern" ><a href="#"><img src="img/banner_5.png"  class="banner_n"></div>
            <div class="bannern" ><a href="#"><img src="img/banner_6.png"  class="banner_n"></div>
        </div>
        
   </div>
    <div class="threediv">
        <div class="inthreediv">

            <div class="ininthreediv1">
                <a href="http://www.taobao.com" ><img src="img/taobaologo.png" class="td_logo"></a>
            </div>
            <div class="ininthreediv2">
                <div   class="ininthreediv2_1">
                    <input type="text" class="sousuo" placeholder="  请输入:" />
                         <a href="#" class="sousuobutton"><img src="img/sousuo.button.png" ></a>
                </div>
                <div class="ininthreediv2_2">
                    <ul class=" ininthreediv2_2_ul">
                        <a href="#"><li>新款连衣裙</li></a>
                        <a href="#"><li>四件套</li></a>
                        <a href="#"><li>潮流T恤</li></a>
                        <a href="#"><li>时尚女鞋</li></a>
                        <a href="#"><li>短裤</li></a>
                        <a href="#"><li>半身裙</li></a>
                        <a href="#"><li>男士外套</li></a>
                        <a href="#"><li>墙纸</li></a>
                        <a href="#"><li>行车记录仪</li></a>
                        <a href="#"><li>新款男鞋</li></a>
                        <a href="#"><li>耳机</li></a>
                        <a href="#"><li>时尚女包</li></a>
                        <a href="#"><li>沙发</li></a>
                    </ul>
                </div>
                 
            </div>
            <div class="ininthreediv3">
                <a href="http://www.taobao.com" ><img src="img/ewm.png" class="td_ewm"></a>
            </div>
            
        </div>   
    </div>
    <div class="fourdiv">
        <div class="infourdiv">
            <div class="ininfourdiv_1">
                <h2>主题市场</h2>
                <ul class="ul_1">
                    <li>
                        <a href="#">天猫</a>
                    </li>
                    <li>
                        <a href="#">聚划算</a>
                    </li>
                    <li>
                        <a href="#">天猫超市</a>
                    </li>
                </ul>
                <ul class="ul_2">
                    <li>
                        <a href="#">|</a>
                    </li>
                    <li>
                        <a href="#">淘抢购</a>
                    </li>
                    <li>
                        <a href="#">电器城</a>
                    </li>
                    <li>
                        <a href="#">司法拍卖</a>
                    </li>
                    <li>
                        <a href="#">淘宝心选</a>
                    </li>
                    <li>
                        <a href="#">兴农扶贫</a>
                    </li>
                </ul>
                <ul class="ul_3">
                    <li>
                        <a href="#">|</a>
                    </li>
                    <li>
                        <a href="#">飞猪旅行</a>
                    </li>
                    <li>
                        <a href="#">智能生活</a>
                    </li>
                    <li>
                        <a href="#">苏宁易购</a>
                    </li>
                </ul>
            </div>
            <div class="ininfourdiv_2">
                <div class="ininfourdiv_2_1">
                    </a><div class="ininfourdiv_2_1_1"><a href="#">女装</a> /<a href="#"> 内衣</a> / <a href="#">家居</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">女鞋</a> / <a href="#">男鞋</a> / <a href="#">箱包</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">母婴</a> / <a href="#">童装</a> / <a href="#">玩具</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">男装 </a>/ <a href="#">运动户外</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">美妆</a> / <a href="#">彩妆</a> / <a href="#">个护</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">男装</a> / <a href="#">运动户外</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">美妆</a> /<a href="#">彩妆</a> / <a href="#">个护</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">手机</a> / <a href="#">数码</a> / <a href="#">企业</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">大家电</a> / <a href="#">生活电器</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">零食</a> / <a href="#">生鲜</a> / <a href="#">茶酒</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">厨具</a> / <a href="#">收纳</a> / <a href="#">清洁</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">家纺</a> / <a href="#">家饰</a> / <a href="#">鲜花</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">图书音像</a> / <a href="#">文具</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">医药保健</a> / <a href="#">进口</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a> </div>
                    <div class="ininfourdiv_2_1_1"><a href="#">房产</a> / <a href="#">装修家具</a> / <a href="#">建材</a></div>
                    <div class="ininfourdiv_2_1_1"><a href="#">手表</a> / <a href="#">眼镜</a> / <a href="#">珠宝饰品</a></div>
                    <div class="ininfourdiv_2_1_2">
                        <a href="#"><img src="img/hover.png" class="hoverimg" /></a>
                    </div>
                </div>
                <div class="ininfourdiv_2_2">
                    <a href="#"><img src="img/centerimg.png" class="centerimg"/></a>
                    
                </div>
                
                <div class="ininfourdiv_2_3">

                </div>
            </div>
            <div class="ininfourdiv_2">
                <a href="#"><img src="img/fourdivbuttom.png" class="ininfourdiv_2_img" /></a>
            </div>
        </div>
        
    </div>  
    <footer class="footerdiv">
        <div class="ft_1">
            <tr class="text3">
                
                <a href="#"><td>阿里巴巴集团&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;淘宝网&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;天猫&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;聚划算&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;全球速卖通&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;阿里巴巴国际交易市场&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;1688&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;阿里妈妈&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;飞猪&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;淘小铺&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;阿里云计算&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;ALiOS&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;阿里通信&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;一淘&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;万网&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;高德&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;UC&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;友盟&nbsp;&nbsp;&nbsp;&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;阿里安全&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;虾米&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;大麦网&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;钉钉&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;支付宝&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;优酷&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;土豆&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;阿里健康&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;阿里影业&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;阿里体育&nbsp;</td></a>
                <td>|</td>
                <a href="#"><td>&nbsp;网商银行&nbsp;</td></a>
            </tr>
             
        </div>
       
        <div class="hrr"><hr></div>
        <div class="ft_2">
            <tr>
                <a href="#"><td>关于淘宝&nbsp;</td></a>
                <a href="#"><td>合作伙伴&nbsp;</td></a>
                <a href="#"><td>营销中心&nbsp;</td></a>
                <a href="#"><td>廉政举报&nbsp;</td></a>
                <a href="#"><td>联系客服&nbsp;</td></a>
                <a href="#"><td>开放平台&nbsp;</td></a>
                <a href="#"><td>诚征英才&nbsp;</td></a>
                <a href="#"><td>联系我们&nbsp;</td></a>
                <a href="#"><td>网站地图&nbsp;</td></a>
                <a href="#"><td>隐私权政策&nbsp;</td></a>
                <a href="#"><td>法律声明&nbsp;</td></a>
                <a href="#"><td>知识产权&nbsp;</td></a>
                <td>|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <p class="text_none">© 2003-现在 chinsheng 版权所有</p>
            </tr>
        </div>
        
    </footer>
   </div> 
</body>
</html>

Css


    *{
    margin: 0;
    padding: 0;
    text-decoration: none;
    }
    html,body{
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    color: #3c3c3c;
    overflow-x: hidden;
    
}

.wrapper{
    width: 100%;
    height: 100%;
}


/***************************************ONE*******************************************/
    .firstdiv{
        background-color: #F5F5F5;
        height:40px;
        width:100%;
        top:0%;
        margin:0;
    }
    .infirstdiv{
        width:76%;
        position:relative;
        color:#6c6c6c;
        left:5%;
        top:20%;
    }
    .fd_table1{
        position:relative;
        left:19%;
        top:25%;
        
        width:35%;
        font-size: 13px;
        float:left;
        }
    .fd_table2{
        position:relative;
        top:25%;
        
        width:45%;
        font-size: 13px;
        float: right;
        }
    
    
    .one:hover{color:orangered}
    .onelong{width:150px;}
    .twolong{width:70px;}
    .sig{width:10px;}
    .small{width:40px;}
    a{
        color:#6c6c6c;
        text-decoration:none;
    }
    a:hover{color:orangered}
    a:active{color:orangered}
    .title{color:orangered;width:50px;}


    /***************************************TWO*******************************************/
    .seconddiv{
        height:100px;
        background-color: #ff84b6;
        }
    .inseconddiv{
        height:100px;
        position:relative;
        width:63%;
        left:19%;
        
        display:flex;
        align-items: center;
        justify-content:space-between;
    }
    .bannern{
        display:block;
        float:left;
    }
    .banner_n{
        width:90%;
        height:80%;
    }


    /***************************************THREE*******************************************/
    .threediv{
        height:122px;
        width:100%;
    }
    .inthreediv{
        width:63%;
        height:100%;
        position: relative;
        left:19%;
        display:flex;
        align-items:center;
    }
   .td_logo{
    float:left;
   }
   .ininthreediv2{
       width:60%;
   }
    .sousuo{
            width:500px;
            height:36px;
            position:relative;
            left:9.6%;
            outline:none;
            -webkit-appearance: none;
            text-shadow: none ;
            border-radius: 15px 0 0px 15px;
            border-color: orangered;
            }
    .sousuobutton{
        position:relative;
        top:15px;
        left:9%;
    }
    .ininthreediv2_2_ul li{
        list-style-type: none;
        display: inline;
      
    }  
    .ininthreediv2_2{
        position: relative;
        left:10%;
        top:10px;
        font-size:13px;
    }
    .td_ewm{
        
        width:50%;
        height:50%;
        position: relative;
        left:100%;
    }
/***************************************FOUR*******************************************/
.fourdiv{
        background-color:#f4f4f4;
        height:620px;
        }
.wrapper .fourdiv .infourdiv{
    width: 63%;
    height: 100%;
    position: relative;
    left:19%;
}

.wrapper .fourdiv .infourdiv .ininfourdiv_1{
    width: 100%;
    height: 30px;
    background: linear-gradient(to right,#ff9000 0,#ff5000 100%);
    margin: 0 auto;
    
}

.wrapper .fourdiv .infourdiv .ininfourdiv_1 h2{
    float: left;
    color: #fff;
    font-family: "等线 Light";
    font-size: 18px;
    width: 180px;
    height: 100%;
    background-color: #ff5000;
    text-align: center;
    line-height: 30px;
}

.wrapper .fourdiv .infourdiv .ininfourdiv_1 ul{
    float: left;
    list-style: none;
}

.wrapper .fourdiv .infourdiv .ininfourdiv_1 ul li{
    float: left;
    margin: 0 4px;
    padding: 0 4px;
    position: relative;
}

.wrapper .fourdiv .infourdiv .ininfourdiv_1 ul li:hover::before{
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url('./img/up.png') no-repeat;
    background-size: center;
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -15px;
}

.wrapper .fourdiv .infourdiv .ininfourdiv_1 ul li a{
    line-height: 30px;
    color: #fff;
    font-weight: 600;
}
.wrapper .fourdiv .infourdiv .ininfourdiv_2 .ininfourdiv_2_1{
    width:178px;
    height: 479px;
    border:1px solid orangered;
    
    background-color: white;
}
.wrapper .fourdiv .infourdiv .ininfourdiv_2 .ininfourdiv_2_1 .ininfourdiv_2_1_1{
    width:100%;
    height:28px;
    font-size: 13px;
    text-align: center;
    line-height: 28px;
   
}
.wrapper .fourdiv .infourdiv .ininfourdiv_2 .ininfourdiv_2_1 .ininfourdiv_2_1_1:hover{
    background-color:#ffe4dc;
    
}

.wrapper .fourdiv .infourdiv .ininfourdiv_2{
    display:flex;
    justify-content:flex-start;
    
    
}
.ininfourdiv_2_2{
    float:left;
}
.centerimg{
    width:680px;
    height:470px;
}
.hoverimg{
    width:400px;
    height:480px ;
}
.wrapper .fourdiv .infourdiv .ininfourdiv_2 .ininfourdiv_2_1 .ininfourdiv_2_1_2{
    
    position: absolute;
    left:180px;
    top:30px;
    display:none;
}
.wrapper .fourdiv .infourdiv .ininfourdiv_2 .ininfourdiv_2_1 .ininfourdiv_2_1_1:hover .ininfourdiv_2_1_2{
    
    display:block;
}
.ininfourdiv_2_3{
    width:203px;
    height:480px;
    background-color: peru;
}
.ininfourdiv_2_img{
    width:100%;
    height: 110px;
    position: relative;
    top:-5px;
}


/***************************************FIVE*******************************************/
.footerdiv{
            background-color: white;
            height:150px;
        }
        .ft_1{
            width:70%;
            height:70px;
            position: relative;
            left:15%;
            background-color: white;
            font-size: 15px;
            color:#6c6c6c ;display:flex;
            flex-wrap: wrap;
            justify-content:flex-start;
            align-content:space-around;
            /*word-break:break-all;*/
            }
.hrr{
    width:70%;
    position: relative;
    left:15%;
    color:#dddddd;
}

.text3{
    border-collapse:separate;
    border-spacing: 10px;
}
.ft_2{
    width:70%;
    height:35px;
    position: relative;
    left:15%;
    background-color: white;
    font-size: 15px;
    color:#6c6c6c ;
    display:flex;
    flex-wrap: wrap;
    justify-content:flex-start;
    align-content:space-around;
    
    }     
.text_none{
    color:#9c9c9c;
    float: left;
}