欢迎光临!中国网页设计提供最新的免费网页制作教程,网页设计技术,HTML5+DIV3...中国站长必上的网站。
加入收藏设为首页广告合作
您当前位置:网站首页 >> 网页特效 >> 图形特效 >> 仿淘宝头条,淘宝客链接推广样式
  • 文本特效
  • 鼠标特效
  • 页面特效
  • 导航菜单
  • 图形特效
  • 其它特效
  • 仿淘宝头条,淘宝客链接推广样式

    来源:中国网页设计 浏览:384

    内容提要:在淘宝头条上看到文章里的淘宝客链接推广样式,有图片,标题,价格,图文并茂,非常好看而且吸引用户点击,由是中国网页设计就自己做了一个仿淘宝头条的淘宝客链接推广样式,并在手机521网站使用,先看下效果吧。

    在淘宝头条上看到文章里的淘宝客链接推广样式,有图片,标题,价格,图文并茂,非常好看而且吸引用户点击,由是中国网页设计就自己做了一个仿淘宝头条的淘宝客链接推广样式,并在手机521网站使用,先看下效果吧。

    仿淘宝头条,淘宝客链接推广样式|中国网页设计原创

    查看效果

    是不是很赞,现在给大家分享下我一下午的成绩,仿淘宝头条,淘宝客链接推广样式代码。

    页面代码:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>淘宝头条,淘宝客链接推广样式|中国网页设计原创</title>
    <link href="1.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="content">
    <a href="http://www.mobile521.com/goto/ht8o" target="_blank">
    <div class="product">
     <div class="product-pic"><img src="http://img03.taobaocdn.com/bao/uploaded/i3/TB1ILS6PpXXXXbEXpXXXXXXXXXX_!!0-item_pic.jpg" /></div>
     <div class="product-info">
      <div class="product-title">【送耳机电源等】Meizu/魅族 魅蓝Note5全网通手机</div>
      <div class="product-price"><ins class="price-new"><strong>¥1009.00</strong></ins><del class="price-old">¥1009.01</del></div>
      <div class="product-btn">去购买</div>
     </div>
    </div>
    </a>
    </div>
    </body>
    </html>

    CSS代码:

    .content .product{position:relative;display:block;width:470px;margin:10px 0;padding:20px;background:#f7f7f7;text-decoration:none;*cursor:pointer;clear:none!important;*zoom:1}
    .content .product:after{content:"";clear:both;display:block!important;height:0}
    .content .product:visited .product-title{color:#818181}
    .content .product:hover{background:#eee}
    .content .product .product-pic{float:left;height:140px;width:140px;margin-right:20px;overflow:hidden}
    .content .product .product-info{position:relative;height:140px;overflow:hidden;*zoom:1}
    .content .product .product-title{ font-weight:bold;line-height:1.5;color:#333;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
    .content .product .product-price{position:absolute;left:0;bottom:5px;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",arial}
    .content .product .price-new{color:#f50}
    .content .product .price-new strong{font-size:24px;font-weight:400}
    .content .product .price-old{margin-left:10px;color:#999}
    .content .product .product-btn{position:absolute;right:0;bottom:5px;height:30px;width:100px;line-height:30px;border:1px solid #da0d15;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#da0d15;text-align:center}
    img{ width:100%;}
    .product a{ text-decoration:none; }

    发表评论 共有0人对本文发表评论
    网名:
    评论:
    验证:
    (网友评论仅供表达个人看法,并不表明本站同意其观点或证实其描述)
    联系我们 - 网站调查 - 免责声明 - 站长简介 - 站点综合查询 - 课件习题 - 友情链接 - 站长统计