html + css 实现淘宝首页（静态页面）
待续。。。
效果图：
html代码如下：
<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>淘宝网 - 淘！我喜欢</title><linkrel="stylesheet"type="text/css"href="css/index.css"><linkrel="icon"href="favicon.ico"><basetarget="_blank"></head><body><!-- 头部信息 --><divid="headMessage"class="clearfix layer"><!-- 左边 --><ulclass="fl"><li><span>中国大陆</span><span></span></li><liclass="mr7"><ahref="#"class="login mr7">亲，请登录</a><ahref="#">免费注册</a></li><liclass="mr7"><ahref="#">手机逛淘宝</a></li><li><ahref="#">网页无障碍</a></li></ul><!-- 右边 --><ulclass="fr"><li><ahref="#">我的淘宝</a><span></span></li><li><spanclass="mr5 c4"></span><ahref="#">购物车</a><strongclass="c4">0</strong><span></span></li><li><ahref="#"><span></span>收藏夹</a><span></span></li><li><ahref="#">商品分类</a><ahref="#">免费开店</a></li><liclass="line">|</li><li><ahref="#">千牛卖家中心</a><span></span></li><li><ahref="#">联系客服</a><span></span></li></ul></div><!-- 头部搜索 --><divid="headSearch"><divclass="clearfix layer"><!-- <h1><a href="#"><img src="images/logo.jpg" alt="淘宝网"></a></h1> --><h1class="fl"><ahref="#">淘宝网</a></h1><divclass="fr code"><spanclass="inonfont close"></span><spanclass="c5">手机淘宝</span><imgsrc="images/code.jpg"></div><divclass="search"><!-- 上边 --><ulclass="searchTab clearfix"><liclass="active">宝贝</li><liclass="active">天猫</li><liclass="active">店铺</li></ul><!-- 中间 --><divclass="searchContent clearfix"><formaction="#"><divclass="searchBox fl"><inputtype="text"name=""><divclass="placeholder"><iclass="inonfont imgSearch"></i><span>毛绒玩具</span></div><spanclass="inonfont"></span></div><divclass="searchButton fl"><buttontype="submit">搜索</button></div></form></div><!-- 下边 --><divclass="hotKey"><ahref="#">新款连衣裙</a><ahref="#">四件套</a><ahref="#">潮流T恤</a><ahref="#">时尚女鞋</a><ahref="#">短裤</a><ahref="#">半身裙</a><ahref="#">男士外套</a><ahref="#">墙纸</a><ahref="#">行车记录仪</a><ahref="#">新款男鞋</a></div></div></div></div><!-- 导航 --><divid="nav"class="layer clearfix"><!-- 左边 --><h2class="fl">主题市场</h2><!-- 右边 --><ulclass="fl"><liclass="size"><ahref="#">天猫</a></li><liclass="size"><ahref="#">聚划算</a></li><liclass="size"><ahref="#">天猫超市</a></li><liclass="line"><ahref="#">|</a></li><li><ahref="#">司法拍卖</a></li><li><ahref="#">飞猪旅行</a></li><li><ahref="#">天天特卖</a></li><liclass="line"><ahref="#">|</a></li><li><ahref="#">造点新货</a></li><li><ahref="#">苏宁易购</a></li><li><ahref="#">淘宝心选</a></li><li><ahref="#">智能生活</a></li><li><ahref="#">淘宝直播</a></li></ul></div><!-- 首屏内容 --><divid="firstScreen"class="layer clearfix"><!-- 左边的内容 --><divclass="firstLeft fl"><!-- 侧边导航 --><divclass="sideNav fl"><ul><li><ahref="#">女装</a> / <ahref="#">内衣</a> / <ahref="#">家居</a><spanclass="inonfont fr">></span></li><li><ahref="#">女鞋</a> / <ahref="#">男鞋</a> / <ahref="#">箱包</a><spanclass="inonfont fr">></span></li><li><ahref="#">母婴</a> / <ahref="#">童装</a> / <ahref="#">玩具</a><spanclass="inonfont fr">></span></li><li><ahref="#">男装</a> / <ahref="#">运动户外</a><spanclass="inonfont fr">></span></li><li><ahref="#">美妆</a> / <ahref="#">彩妆</a> / <ahref="#">个护</a><spanclass="inonfont fr">></span></li><li><ahref="#">手机</a> / <ahref="#">数码</a> / <ahref="#">企业礼品</a><spanclass="inonfont fr">></span></li><li><ahref="#">大家电</a> / <ahref="#">生活电器</a><spanclass="inonfont fr">></span></li><li><ahref="#">零食</a> / <ahref="#">生鲜</a> / <ahref="#">茶酒</a><spanclass="inonfont fr">></span></li><li><ahref="#">厨具</a> / <ahref="#">收纳</a> / <ahref="#">清洁</a><spanclass="inonfont fr">></span></li><li><ahref="#">家纺</a> / <ahref="#">家饰</a> / <ahref="#">鲜花</a><spanclass="inonfont fr">></span></li><li><ahref="#">图书音像</a> / <ahref="#">文具</a><spanclass="inonfont fr">></span></li><li><ahref="#">医药保健</a> / <ahref="#">进口</a><spanclass="inonfont fr">></span></li><li><ahref="#">汽车</a> / <ahref="#">二手车</a> / <ahref="#">用品</a><spanclass="inonfont fr">></span></li><li><ahref="#">房产</a> / <ahref="#">装修家具</a> / <ahref="#">建材</a><spanclass="inonfont fr">></span></li><li><ahref="#">手表</a> / <ahref="#">眼镜</a> / <ahref="#">珠宝饰品</a><spanclass="inonfont fr">></span></li></ul></div><!-- 图片1容器 --><divclass="img1Box fr"><divclass="pic fl"><divclass="img"><ahref="#"><imgsrc="images/pic_01.jpg"></a></div><buttonclass="leftBtn"><</button><buttonclass="rightBtn">></button><divclass="circle"><spanclass="active">。</span><span>。</span><span>。</span><span>。</span><span>。</span></div></div><divclass="ad fr"><ahref="#"><imgsrc="images/ad_02.jpg"></a></div></div><!-- 图片2容器 --><divclass="img2Box fr"><divclass="pic fl"><divclass="picTitle"><divclass="text"><spanclass="fl bg">理想生活上天猫</span><spanclass="fr"><i>1</i>/6</span></div><divclass="line"><span></span></div></div><divclass="img"><ahref="#"><imgsrc="images/pic_03.jpg"></a><ahref="#"><imgsrc="images/pic_04.jpg"></a></div><buttonclass="leftBtn"><</button><buttonclass="rightBtn">></button></div><divclass="ad fr"><pclass="title">今日特卖</p><ahref="#"><imgsrc="images/ad_03.jpg"></a></div></div></div>
!-- 右边的内容 -->
<divclass="firstRight fr"><!-- 用户 --><divclass="user"><ahref="#"class="avatar"><imgsrc="images/avatar.jpg"></a><pclass="username">Hi! 你好</p><pclass="members"><ahref="#"class="gold">领淘金币抵钱</a><ahref="#"class="club">会员俱乐部</a></p><divclass="btn"><buttonclass="login">登录</button><buttonclass="register">注册</button><buttonclass="shop">开店</button></div></div><!-- 举报 --><ahref="#"class="tipOff"><span>网上有害信息举报专区</span><iclass="inonfont"></i></a><!-- 公告区 --><divclass="notice"><ulclass="title"><liclass="active"><ahref="#">公告</a></li><li><ahref="#">规则</a></li><li><ahref="#">论坛</a></li><li><ahref="#">安全</a></li><li><ahref="#">公益</a></li></ul><ulclass="content clearfix"><liclass="item1"><ahref="#">规则 淘宝网疫情影响地区发货时间要求调整公告</a></li><li><ahref="#">热点 疫情场景淘宝卖家指导手册</a></li><li><ahref="#">热点 淘宝平台打击流量造假、黑公关、网络水军公告</a></li></ul></div><!-- 图标区域 --><tableclass="inco"></table><!-- APP --><divclass="app"></div></div></div></div><!-- 右侧固定定位导航 --><divid="tool"></div></body></html>
css代码如下：
@import'reset.css';/*头部信息*/#headMessage li{float: left;line-height: 35px;padding: 0 6px;}#headMessage li a{color: #6c6c6c;}#headMessage li a.login{color: #f22e00;}#headMessage span{font-size: 12px;}#headMessage li.line{font-size: 12px;color: #ddd;padding: 0 5px;}/*头部搜索*/#headSearch{background-color: #fff;padding: 24px 0 10px 0;}#headSearch h1 a{display: block;width: 190px;height: 58px;background:url(../images/logo.jpg) no-repeat;text-indent: -9999px;overflow: hidden;margin-top: 8px;}#headSearch .code{width: 72px;height: 86px;border: 1px solid #eee;position: relative;margin-right: 110px;text-align: center;}#headSearch .code img{width: 62px;height: 62px;}#headSearch .close{position: absolute;left: -16px;top: -1px;width: 14px;height: 14px;line-height: 14px;font-size: 14px;border: 1px solid #eee;color: #ddd;cursor: pointer;}#headSearch .search{width: 630px;margin: 0 auto;}#headSearch .searchTab{height: 22px;padding-left: 17px;}#headSearch .searchTab li{float: left;width: 36px;line-height: 22px;margin-right: 4px;text-align: center;color: #f40;cursor: pointer;}#headSearch .searchTab li:hover{background-color: #ffeee5;}#headSearch .searchTab li.active{color: #fff;font-weight: bold;background-image:linear-gradient(to right, #ff9000, #ff5000);border-radius: 6px 6px 0 0;}#headSearch .searchContent{height: 40px;}#headSearch .searchBox{width: 554px;height: 40px;box-sizing: border-box;border: 2px solid #ff5000;border-right: none;border-radius: 20px 0 0 20px;overflow: hidden;position: relative;}#headSearch .searchBox input{width: 490px;height: 36px;line-height: 36px;outline: none;border: none;text-indent: 10px;position: absolute;z-index: 1;background-color: transparent;/*透明，为了能看到后面的文字*/}#headSearch .searchBox .placeholder{position: absolute;top: 6px;left: 14px;}#headSearch .placeholder span{color: #9c9c9c;vertical-align: 1px;}#headSearch .imgSearch{font-size: 28px;position: absolute;right: 20px;color: #9c9c9c;top: -2px;cursor: pointer;}#headSearch button{width: 74px;height: 40px;text-align: center;font-size: 18px;line-height: 40px;color: #fff;border: none;background-image:linear-gradient(to right, #ff9000, #ff5000);border-radius: 0 20px 20px 0;}#headSearch .hotKey{height: 25px;line-height: 25px;margin-bottom: 5px;}#headSearch .hotKey a:hover{color: #f50;}/*导航*/#nav h2{width: 190px;height: 30px;line-height: 30px;font-size: 16px;color: #fff;text-align: center;background-color: #f50;}#nav ul{/* margin-left: 190px;
overflow: hidden;*/width: 1000px;width:calc(100% - 190px);/*支持情况：IE9+*/background-image:linear-gradient(to right, #ff9000, #ff5000);}#nav ul li{float: left;line-height: 30px;margin: 0 7px;font-size: 14px;color: #fff;padding: 0 5px;}#nav ul li.size{font-size: 16px;}#nav ul li a{color: #fff;font-weight: bold;}#nav ul li.line{margin: 0;padding: 0;}/*首屏内容*/.firstLeft{width: 890px;}/*侧边导航*/.sideNav{width: 190px;height: 522px;background: #fff;border: 1px solid #ff5000;box-sizing: border-box;border-top: none;padding-top: 5px;}.sideNav li{height: 32px;line-height: 32px;padding-left: 25px;color: #999;font-size: 14px;transition: background-color 0.3s;}.sideNav li a{font-size: 14px;color: #666;}.sideNav li span{font-size: 12px;}.sideNav li:hover{background: #ffe4dc;color: #f50;}.sideNav li:hover a{color: #f50;}.sideNav a:hover{text-decoration: underline;}/*图片1容器*/.img1Box{width: 690px;height: 282px;background: #eee;margin-top: 10px;}.firstLeft .pic{width: 520px;position: relative;}.firstLeft .pic button{width: 20px;height: 30px;line-height: 30px;color: #fff;cursor: pointer;border: none;background-color:rgba(0, 0, 0, 0.3);/*支持情况：IE9+*/position: absolute;top: 50%;margin-top: -15px;display: none;}.firstLeft .pic button.leftBtn{left: 0;/*border-radius: 0 15x 15px 0;*/border-radius: 15px 0 0 15px;}.firstLeft .pic button.rightBtn{right: 0;border-radius: 15px 0 0 15px;}.firstLeft .pic:hover button{display: block;}.firstLeft .pic .circle{position: absolute;bottom: 15px;left: 50%;margin-left: -35px;border-radius: 10px;padding: 3px 0;font-size: 0;background-color:rgba(255, 255, 255, 0.3);}.firstLeft .pic .circle span{display: inline-block;width: 8px;height: 8px;border-radius: 50%;background-color: #fff;margin: 0 3px 3px 0;cursor: pointer;}.firstLeft .pic .circle span.active{background-color: #f00;}.firstLeft .ad{width: 160px;}.firstLeft .ad img{width: 160px;}/*图片2容器*/.firstLeft .img2Box{width: 690px;height: 220px;margin-top: 10px;}.firstLeft .img2Box .picTitle{height: 20px
}.firstLeft .img2Box .picTitle .text{height: 17px;line-height: 17px;}.firstLeft .img2Box .picTitle .text .bg{background:url(../images/TMAll.jpg) no-repeat left;padding-left: 136px;columns: #666;}.firstLeft .img2Box .picTitle .text i{color: #ff1648;}.firstLeft .img2Box .picTitle .line{height: 3px;background-color: #ff1648;position: relative;}.firstLeft .img2Box .picTitle .line span{width: 87px;height: 3px;background-color: #000;position: absolute;left: 0;}.firstLeft .img2Box .img{background-color: #fff;position: relative;display: flex;justify-content: space-around;align-items: center;}.firstLeft .img2Box .img img{margin: 0 10px;}.firstLeft .img2Box .ad .title{height: 20px;line-height: 20px;}.firstRight{width: 290px;margin-top: 10px;}/*用户*/.firstRight .user{height: 140px;padding-top: 5px;}.firstRight .user .avatar{display: block;width: 50px;height: 50px;margin: 0 auto;border-radius: 50%;overflow: hidden;}.firstRight .user .avatar img{width: 50px;height: 50px;}.firstRight .user .username{text-align: center;line-height: 16px;}.firstRight .user .members{text-align: center;font-size: 0;}.firstRight .user .members a{display: inline-block;font-size: 12px;border-radius: 9px;padding: 0 10px 0 20px;margin: 0 2px;}.firstRight .user .members a .gold{background: #ffe4dc url(../images/icon.jpg) 0 -572 no-repeat;}.firstRight .user .members a .club{background: #ffe4dc url(../images/icon.jpg) 0 -528 no-repeat;}.firstRight .user .btn{text-align: center;}.firstRight .user .btn button{width: 75px;height: 25px;line-height: 25px;margin: 12px 2px 0 2px;color: #fff;font-weight: bold;border-radius: 4px;border: none;background-image:linear-gradient(to right, #ff5000, #ff6f06);}.firstRight .user .btn button .login{width: 92px;}/*举报*/.firstRight .tipOff{display: block;height: 26px;line-height: 26px;color: #f40;background: #ffe4dc;text-align: center;}.firstRight .tipOff i{font-size: 12px;vertical-align: 1px;position: relative;left: 30px;}/*公告区*/.firstRight .notice{height: 108px;background-color: #fff;}.firstRight .notice .title{text-align: center;font-size: 0;padding-top: 10px;}.firstRight .notice .title li{display: inline-block;font-size: 12px;line-height: 20px;padding: 0 4px;margin: 0 10px;}.firstRight .notice .title li.active{font-weight: bold;border-bottom: 2px solid #f40;}.firstRight .notice .title li a:hover{color: #f40;}.firstRight .notice .content{margin: 0 12px;padding-top: 10px;}.firstRight .notice .content li{font-size: 12px;color: #666;margin-left: 8px;float: left;width: 295px;overflow: hidden;}.firstRight .notice .content li a:hover{color: #ff5000;}
本文转载自: https://blog.csdn.net/weixin_49981930/article/details/124809467
版权归原作者 王大傻0928 所有， 如有侵权，请联系我们删除。
版权归原作者 王大傻0928 所有， 如有侵权，请联系我们删除。