立即注册
酷族设计»论坛 › 淘宝装修 › 装修代码 › 仿淘女郎子页面布局
返回列表 发新帖
查看: 955|回复: 0

仿淘女郎子页面布局

[复制链接]
渣渣

146

主题

6

回帖

223

酷币

管理员

玩命

积分
117
QQ
发表于 2014-12-21 15:44:01 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
预览地址：

http://ydc919.taobao.com/p/choose.htm?spm=a1z10.1.w5003-9596339461.6.Hgprfo&scene=taobao_shop

屏蔽自定义导航css是悲剧的，行间样式像坨屎！


  1. <!--导航标题部分-->
  2. <div class="s_pt" style="margin:20px auto;height:29px;border:none;background:transparent;line-height:29px;width:950px;">
  3.   <ul class="dht" style="list-style:none;">
  4.     <li style="float:left;font-size:16px;font-family:微软雅黑;">
  5.        <a style="color:#333;text-decoration:none;outline:none;cursor:pointer;"  title="首页">首页</a>
  6.     </li>
  7.     <li style="float:left;font-size:16px;font-family:微软雅黑;">
  8.        <em style="width:20px;height:50px;color:transparent;background:url(http://img01.taobaocdn.com/imgextra/i1/263828195/TB24mT6bXXXXXX2XXXXXXXXXXXX-263828195.png) no-repeat -2px 7px;">></em>
  9.     </li>
  10.     <li style="float:left;font-size:16px;font-family:微软雅黑;">
  11.        <a style="color:#333;text-decoration:none;outline:none;cursor:pointer;" href="#" title="发起活动">发起活动</a>
  12.     </li>
  13.     <li style="float:left;font-size:16px;font-family:微软雅黑;">
  14.        <em style="width:20px;height:50px;color:transparent;background:url(http://img01.taobaocdn.com/imgextra/i1/263828195/TB24mT6bXXXXXX2XXXXXXXXXXXX-263828195.png) no-repeat -2px 7px;">></em>
  15.     </li>
  16.     <li style="float:left;font-size:16px;font-family:微软雅黑;color:#000;">
  17.        文章内容
  18.     </li>
  19.   </ul>
  20. </div>

  22. <div class="tit">
  23.    <img src="http://img03.taobaocdn.com/imgextra/i3/263828195/TB2b.7cbXXXXXXSXXXXXXXXXXXX-263828195.png" />
  24. </div>

  26. <div class="detail_view" style="position:relative;padding:55px 0px 40px;">
  27.   <p class="tit_name" style="font-size:16px;color:#333;float:left;padding-left:10px;">发起活动</p>
  28.   <h2 style="font-size:16px;color:#333;float:left;padding-left:40px;font-weight:normal;font-family:微软雅黑;">寻找最魅女郎,华丽变身superstar,万元大奖等你来拿！</h2>
  29.   <p class="tit_date" style="float:right;font-size:16px;color:#333;margin-right:10px;font-family:微软雅黑;">2014.11.13</p>
  30. </div>
复制代码
  1. <!--内容部分-->
  2. <div class="banner" style="height:460px;">
  3.    <img src="http://img02.taobaocdn.com/imgextra/i2/263828195/TB23cAkbXXXXXX_XpXXXXXXXXXX-263828195.jpg" />
  4. </div>


  7. <div class="skin-box-bd" style="width:948px;position:relative;min-height:1px;border:1px solid #E4E4E4;">
  8.   <div style="float:left;">
  9.     <div style="margin:0px 20px;width:640px;word-wrap:break-word;font-size:14px;overflow:hidden;color:#000;word-wrap:break-word;">
  10.       <h3 style="font-size:16px;font-weight:700;line-height:5em;text-align:center;color:#404040;"> 寻找最魅女郎,华丽变身superstar,万元大奖等你来拿！ </h3>
  11.       <p style="text-indent:2em;font-family:微软雅黑;line-height:30px;font-size:14px;"> 兰魅琪网络魅女郎评选即将进行，如果您在生活中无意拍到了自己一张满意的照片，那么请不要害羞，拿起自己的勇气，来参加【兰魅琪首届“网络代言征集”魅女郎海选大赛】吧！</p>
  12.       <p style="text-indent:2em;font-family:微软雅黑;line-height:30px;font-size:14px;">每个人都有很阳光、很幸福的体验，拿起自己的勇气，拍出您的幸福，如果您有足够的自信，就将您美丽的一面分享给我们！将您美丽的一面大方的呈现出来，晒一晒自己的美丽、晒一晒自己的幸福！</p>
  13.       <p style="text-indent:2em;font-family:微软雅黑;line-height:30px;font-size:14px;"> 我们举办“魅女郎”评选的初衷并非是要选出获胜者，而是希望所有给所有民权美女们一个展示自己的机会，激励大家敢于秀出自己的风采。所以您获得的每一票的背后，都有着家人、朋友乃至网友对您的弥足珍贵的肯定。 </p>
  14.       <p style="text-indent:2em;font-family:微软雅黑;line-height:30px;font-size:14px;">为了展示兰魅琪代言风采，展示兰魅琪“魅女郎”的气质、文化，体验其实比名次更珍贵......</p>
  15.       <p style="text-indent:2em;font-family:微软雅黑;line-height:30px;font-size:14px;"> </p>
  16.       <h3 style="font-family:微软雅黑;line-height:30px;font-size:18px;font-weight:200;color:#F36;">报名要求及格式</h3>
  17.       <p style="text-indent:2em;font-family:微软雅黑;line-height:30px;font-size:14px;"> 1、关注兰魅琪微博和微信，留意活动实时更新内容。</p>
  18.       <p style="text-indent:2em;font-family:微软雅黑;line-height:30px;font-size:14px;">2、上传个人清晰照片5张，三张素颜照+两张带妆照。</p>
  19.       <p style="text-indent:2em;font-family:微软雅黑;line-height:30px;font-size:14px;"> 3、<span style="color:#EE030E;">选手们一定要利用各种资源进行拉票。</span></p>
  20.       <p style="text-indent:2em;font-family:微软雅黑;line-height:30px;font-size:14px;">4、发微博 #兰魅琪lmq，魅女郎评选最魅代言人# @兰魅琪官方微博，关注 微信 兰魅琪 发送照片给我们客服人员，入选名单由活动举办方综合评审，平台票数和上传照片质量均为重要指标。</p>
  21.       <p style="text-indent:2em;font-family:微软雅黑;line-height:30px;font-size:14px;">5、最终获胜的选手主办方会在兰魅琪旗舰店首页公布。</p>
  22.     </div>
  23.   </div>
  24.   <div style="width:268px;font-size:14px;color:#666;float:right;">
  25.     <div style="border-left:1px solid #E4E4E4;padding:20px 0px 0px 18px;line-height:1.8em;">
  26.       <h6> <img alt="活动时间" src="http://img02.taobaocdn.com/tps/i2/T1Yy8NXiFQXXXXXXXX-79-23.gif" /> </h6>
  27.       <div style="width:220px;padding:5px 10px 5px;word-wrap:break-word;word-break:break-all;">
  28.         <p style="line-height:1.8em;"><strong>开始时间：2014-12-13</strong></p>
  29.         <p style="line-height:1.8em;"><strong>结束时间：2014-12-31</strong></p>
  30.         <p style="line-height:1.8em;">即将开始</p>
  31.       </div>
  32.       <p class="apply" style="text-align:center;padding:20px 0;"> <span class="but-dis" style="background:url("http://img03.taobaocdn.com/tps/i3/T1IQNNXX4yXXXXXXXX-170-120.gif") no-repeat right top #FE3362;border:0px none;padding-right:20px;display:inline-block;background-position:right -80px;"> <span style="display:inline-block;padding-left:20px;color:#FFF;font-size:14px;font-weight:700;height:40px;line-height:40px;cursor:pointer;">我要报名</span></span> </p>
  33.     </div>
  34.     <div style="line-height:3em;background-color:#F7F7F7;padding:20px 0px 40px 18px;border-left:1px solid #E4E4E4;">
  35.       <p style="line-height:3em;"><strong>招募地域：</strong>全国</p>
  36.       <p style="line-height:3em;" class="mm-total"> <strong>招募人数：</strong><span class="mm-total" style="color:#FF3261;font-size:36px;padding:0 10px;">8</span>人</p>
  37.       <p style="line-height:3em;"><strong>联系旺旺：</strong><a target="_blank" ><img src="http://amos.alicdn.com/online.aw?v=2&uid=ydc919%3A%E9%AD%85%E5%AA%9A&site=cntaobao&s=1&charset=utf-8" alt="点击这里给我发消息" border="0" /></a></p>
  38.       <h6 style="margin-top:10px;"><img alt="奖项设置" src="http://img04.taobaocdn.com/tps/i4/T15ldNXn4aXXXXXXXX-79-22.gif" /> </h6>
  39.       <div class="prize-d" style="border:1px dashed #FF3261;line-height:1.5em;width:220px;padding:0px 10px 5px;margin-left:5px;word-wrap:break-word;word-break:break-all;">
  40.         <p style="line-height:1.5em;font-size:12px;word-wrap:break-word;word-break:break-all;"><strong style="display:inline-block;margin-top:10px;">一等奖*1:</strong></p>
  41.         <p style="line-height:1.5em;font-size:12px;word-wrap:break-word;word-break:break-all;"><span style="color:#EE030E;">1万元现金</span>+兰魅琪神秘大礼包</p>
  42.         <p style="line-height:1.5em;font-size:12px;word-wrap:break-word;word-break:break-all;"><strong style="display:inline-block;margin-top:10px;">二等奖*2:</strong></p>
  43.         <p style="line-height:1.5em;font-size:12px;word-wrap:break-word;word-break:break-all;">拍立得相机一台 +兰魅琪神秘大礼包</p>
  44.         <p style="line-height:1.5em;font-size:12px;word-wrap:break-word;word-break:break-all;"><strong style="display:inline-block;margin-top:10px;">三等奖*3:</strong></p>
  45.         <p style="line-height:1.5em;font-size:12px;word-wrap:break-word;word-break:break-all;">价值500元兰魅琪护肤大礼包</p>
  46.         <p style="line-height:1.5em;font-size:12px;word-wrap:break-word;word-break:break-all;"><strong style="display:inline-block;margin-top:10px;">特色人气奖*1:</strong></p>
  47.         <p style="line-height:1.5em;font-size:12px;word-wrap:break-word;word-break:break-all;">价值1000元兰魅琪护肤大礼包</p>
  48.         <p style="line-height:1.5em;font-size:12px;word-wrap:break-word;word-break:break-all;"><strong style="display:inline-block;margin-top:10px;">兰魅琪品牌形象代言*1:</strong></p>
  49.         <p style="line-height:1.5em;font-size:12px;word-wrap:break-word;word-break:break-all;"><span style="color:#EE030E;">lanqichram 兰魅琪 签约合同（10万/年）</span></p>
  50.       </div>
  51.     </div>
  52.   </div>
  53. </div>
复制代码
  1. <!--留言部分-->
  2. <div style="width:800px;height:260px;overflow:auto;margin:10px auto;outline:none;">
  3.   <div class="sns-widget" data-comment="{

  5.   ';isAutoHeight';:false,
  6.    ';param';:{
  7.       ';target_key';:';nspx_61585472';,
  8.         ';type_id';:';1100035';,
  9.         ';rec_user_id';:';-1';,
  10.         ';view';:';detail_list';,
  11.         ';title';:';女神评选';,
  12.         ';moreurl';:';http://ydc919.taobao.com/p/choose.htm'; },
  13.     ';paramList';:{';view';:';list_trunPage';}}">
  14.      
  15.   </div>
  16. </div>
复制代码
  1. <!--分享部分-->
  2. <div class="share-con" style="height:58px;overflow:hidden;padding:0 10px;float:right;margin:30px 65px 0 0;">
  3.    <span class="tit" style="color:#000;line-height:20px;float:left;padding:0 10px;">分享截图给客服有惊喜：</span><a class="sns-widget" data-sharebtn="{
  4. 'client_id':68,
  5. 'comment':'兰魅琪将计划发起网络女神评选活动，万元大奖等你来拿！——兰魅琪Lanqicharm护肤品官方旗舰店：http://ydc919.taobao.com',
  6. 'isShowFriend':false,
  7. 'type':'webpage',
  8. 'title':'女神评选',
  9. 'skinType':3,
  10. 'key':'http://ydc919.taobao.com/p/choose.htm'}" style="display:inline-block;width:266px;height:20px;overflow:hidden;background:url(http://img04.taobaocdn.com/imgextra/i4/263828195/TB2K5b_bXXXXXcaXXXXXXXXXXXX-263828195.png) no-repeat;cursor:pointer;float:left;"> </a>
  11. </div>
复制代码
  1. <!--下一页部分-->
  2. <div class="newsLsit" style="margin-top:20px;">
  3.   <ul class="composition_title">
  4.     <li style="border-top:1px dotted #DDD;border-bottom:1px dotted #DDD;height:65px;list-style:none;">
  5.        <a  title="亲爱的，兰魅琪靠不靠谱？" style="display:inline-block;text-align:center;float:left;height:65px;color:#333;font-size:16px;line-height:65px;width:950px;"> <span class="cate" style="display:inline-block;text-align:center;float:left;width:15%;padding-left:40px;">上一页</span> <span style="display:inline-block;text-align:center;float:left;width:65%;text-align:left;overflow:hidden;white-space:nowrap;padding-left:30px;" class="title">亲爱的，兰魅琪靠不靠谱？</span> <span class="date" style="display:inline-block;text-align:center;float:right;width:110px;">2014.11.12</span> </a>
  6.     </li>
  7.     <li style="border-bottom:1px dotted #DDD;height:65px;list-style:none;">
  8.        <a href="#" style="display:inline-block;text-align:center;float:left;height:65px;color:#333;font-size:16px;line-height:65px;width:950px;"> <span class="cate" style="display:inline-block;text-align:center;float:left;width:15%;padding-left:40px;">没有下一页</span> <span style="display:inline-block;text-align:center;float:left;width:65%;text-align:left;overflow:hidden;white-space:nowrap;padding-left:30px;" class="title"> </span> <span class="date" style="display:inline-block;text-align:center;float:right;width:110px;"> </span> </a>
  9.     </li>
  10.   </ul>
  11.   <div style="clear:both;height:0;line-height:0;visibility:visible;">
  12.      
  13.   </div>
  14. </div>
复制代码

ps:这个活动是真实有效的，希望论坛的妹子麻溜的咨询客服，汉子也可以让女朋友或者女性朋友来参加， 多多给予活动留言支持下哈！
苦逼设计师的现状——每一个苦逼设计师的背后都有一群指点江山的大神。
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

酷族设计团队官方推荐上一条 /3 下一条

自定义Xxx

自定义Xxx 自定义Xxx 自定义Xxx

自定义Xxx

自定义Xxx 自定义Xxx 自定义Xxx

自定义Xxx

自定义Xxx 自定义Xxx 自定义Xxx
  • 站长QQ
  • 站长微信
  • 交流群

QQ|Archiver|手机版|小黑屋|酷网页

GMT+8, 2026-3-16 19:08 , Processed in 0.064123 second(s), 30 queries .

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

关灯 快速发帖
有偿服务QQ
有偿服务微信
 返回顶部
返回顶部