首页 > 代码库 > 淘宝静态页面
淘宝静态页面
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <link href="http://www.mamicode.com/css/demo.css" rel="stylesheet" /> 7 </head> 8 <body> 9 <div id="d1"> 10 <p>淘宝特色服务</p> 11 <div class="item"> 12 <div class="listtitle" id="title1">主题市场</div> 13 <div class="listcon"> 14 <ul> 15 <li class="c1"><a href="http://www.mamicode.com/#">淘宝女人</a></li> 16 <li class="c2"><a href="http://www.mamicode.com/#">运动派</a></li> 17 <li class="c3"><a href="http://www.mamicode.com/#">情侣</a></li> 18 <li class="c1"><a href="http://www.mamicode.com/#">淘宝男人</a></li> 19 <li class="c2"><a href="http://www.mamicode.com/#">孕婴童</a></li> 20 <li class="c3"><a href="http://www.mamicode.com/#">家居</a></li> 21 <li class="c1"><a href="http://www.mamicode.com/#">美容护肤</a></li> 22 <li class="c2"><a href="http://www.mamicode.com/#">中老年</a></li> 23 <li class="c3"><a href="http://www.mamicode.com/#">美食</a></li> 24 <li class="c1"><a href="http://www.mamicode.com/#">保险理财</a></li> 25 <li class="c2"><a href="http://www.mamicode.com/#">有车族</a></li> 26 <li class="c3"><a href="http://www.mamicode.com/#">装修</a></li> 27 <li class="c1"><a href="http://www.mamicode.com/#">手机数码</a></li> 28 <li class="c2"><a href="http://www.mamicode.com/#">生活家</a></li> 29 <li class="c3"><a href="http://www.mamicode.com/#">游戏</a></li> 30 </ul> 31 </div> 32 </div> 33 <div class="item"> 34 <div class="listtitle" id="title2">特色购物</div> 35 <div class="listcon"> 36 <ul> 37 <li class="c1"><a href="http://www.mamicode.com/#">淘宝二手</a></li> 38 <li class="c2"><a href="http://www.mamicode.com/#">拍卖会</a></li> 39 <li class="c3"><a href="http://www.mamicode.com/#">爱逛街</a></li> 40 <li class="c1"><a href="http://www.mamicode.com/#">淘宝奇葩</a></li> 41 <li class="c2"><a href="http://www.mamicode.com/#">全球购</a></li> 42 <li class="c3"><a href="http://www.mamicode.com/#">挑食</a></li> 43 <li class="c1"><a href="http://www.mamicode.com/#">淘宝同学</a></li> 44 <li class="c2"><a href="http://www.mamicode.com/#">淘女郎</a></li> 45 <li class="c3"><a href="http://www.mamicode.com/#">星店</a></li> 46 <li class="c1"><a href="http://www.mamicode.com/#">淘宝众筹</a></li> 47 <li class="c2"><a href="http://www.mamicode.com/#">B格</a></li> 48 <li class="c3"><a href="http://www.mamicode.com/#">动漫</a></li> 49 <li class="c1"><a href="http://www.mamicode.com/#">生活服务</a></li> 50 <li class="c2"><a href="http://www.mamicode.com/#">淘宝达人</a></li> 51 <li class="c3"><a href="http://www.mamicode.com/#">搭配</a></li> 52 </ul> 53 </div> 54 </div> 55 <div class="item"> 56 <div class="listtitle" id="title3">优惠促销</div> 57 <div class="listcon"> 58 <ul> 59 <li class="c1"><a href="http://www.mamicode.com/#">天天特价</a></li> 60 <li class="c2"><a href="http://www.mamicode.com/#">免费试用</a></li> 61 <li class="c3"><a href="http://www.mamicode.com/#">清仓</a></li> 62 <li class="c1"><a href="http://www.mamicode.com/#">一元起拍</a></li> 63 <li class="c2"><a href="http://www.mamicode.com/#">淘宝币</a></li> 64 <li class="c3"><a href="http://www.mamicode.com/#">夜抢购</a></li> 65 <li class="c1"><a href="http://www.mamicode.com/#">阿里旺旺</a></li> 66 <li class="c2"><a href="http://www.mamicode.com/#">支付宝</a></li> 67 <li class="c3"><a href="http://www.mamicode.com/#">来往</a></li> 68 </ul> 69 </div> 70 </div> 71 </div> 72 </body> 73 </html>
1 body{ 2 font-family:"微软雅黑"; 3 } 4 p,ul{ 5 padding:0px; 6 margin:0px; 7 } 8 ul{ 9 list-style-type:none; 10 } 11 #d1{ 12 width:192px; 13 height:492px; 14 border:solid 1px red; 15 } 16 #d1 p{ 17 background:#ff4400; 18 height:36px; 19 line-height:36px; 20 color:#ffffff; 21 padding-left:10px; 22 } 23 .item{ 24 margin-top:10px; 25 margin-left:10px; 26 height:140px; 27 width:172px; 28 border-bottom:solid 1px #E6E7EB; 29 } 30 .listtitle{ 31 height:22px; 32 background-repeat:no-repeat; 33 padding-left:30px; 34 font-weight:bold; 35 } 36 #title1{ 37 background-image:url(../image/bg_1.jpg); 38 } 39 #title2{ 40 background-image:url(../image/bg_2.jpg); 41 } 42 #title3{ 43 background-image:url(../image/bg_3.jpg); 44 } 45 .listcon li{ 46 float:left; 47 } 48 .listcon li a{ 49 color:#3c3c3c; 50 text-decoration:none; 51 font-size:12px; 52 display:block; 53 height:22px; 54 line-height:22px; 55 } 56 .listcon li a:hover{ 57 color:#FF4401; 58 } 59 .c1{ 60 width:64px; 61 } 62 .c2{ 63 width:54px; 64 } 65 .c3{ 66 width:38px; 67 }
淘宝静态页面
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。