`

看着淘宝首页的热卖单品，自己做的div css热卖单品

web div css 热卖单品 
阅读更多

 先上实截图，

<!--StartFragment -->

 


 
 

 

再上css和html
<style type="text/css">
.hotsale {
 height: 432px;
 width: 1000px;
 margin-right: auto;
 margin-left: auto;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: none;
 border-left-style: solid;
 border-top-color: #d8d8d8;
 border-right-color: #d8d8d8;
 border-bottom-color: #d8d8d8;
 border-left-color: #d8d8d8;
}
.hotsale .hotsale_nav {
 background-color: #f6f6f6;
 display: block;
 line-height: 1px;
 height: 32px;
 font-size: 12px;
 float: left;
 padding-left: 12px;
 width:988px;
}
.hotsale .hotsale_nav h3 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 width: 63px;
 padding-top: 0px;
 display: block;
 float: left;
 margin-top: 14px;
 margin-right: 14px;
}
.hotsale .hotsale_nav a {
 color: #3366cc;
 text-decoration: none;
 font:12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
 margin-right: 4px;
}
.hotsale .hotsale_nav a:hover{
 color:#F63;
 text-decoration:underline; 
 }
.hotsale .hotsale_nav .hotsale_nav_items {
 font-size: 12px;
 float: left;
 height: 34px;
 margin-right: 15px;
 text-align: center;
 vertical-align: middle;
 margin-top: 4px;
}
.hotsale div ul {
 height: auto;
 width: 967px;
 border: 1px solid #60F;
 list-style-type: none;
 font-size: 12px;
 margin-right: 10px;
 padding-top: 1px;
 padding-right: 1px;
 padding-bottom: 1px;
 padding-left: 24px;
 color: #3e3e3e;
}
.hotsale .hotsale_list {
 width: 1000px;
 height: 436px;
}
.hotsale .hotsale_list ul li h4 {
 font-size: 12px;
 text-align: left;
 display: block;
 height: auto;
 width: auto;
 margin-bottom: 1px;
 margin-top: 1px;
 font-weight: normal;
}
.hotsale .hotsale_list ul li {
 float: left;
 height: 180px;
 width: 125px;
 margin-top: 5px;
 margin-right: 18px;
 margin-left: 18px;
 margin-bottom: 5px;
 display: block;
 color: #333;
}
.hotsale .hotsale_list ul li span {
 font-size: 14px;
}
.hotsale .hotsale_list ul li .yuexiao_ziti {
 background-image: url(images/taobao_hot_sale/hot_sale.jpg);
 background-repeat: no-repeat;
 background-position: left;
 padding-right: 10px;
 text-indent: 8;
}
</style>
<div class="hotsale">
    <div class="hotsale_nav">
        <h3>热卖单品</h3>
        <div class="hotsale_nav_items">
        <a href="#">钱包男</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">照片墙</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">真皮女包</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">装饰画</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">油画</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">挂钟</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">收纳箱</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">喜糖盒</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">行李箱</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">女包</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">真皮</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">无框画</a></div>
      <a style="display:block;float:left;width:54px;font-weight:bold;line-height: 1em;padding-top:8px;" href="#">更多热卖</a>
    </div>
    <div class="hotsale_list">
        <ul >
        <li>
        <img src="images/tb_DIVCSS_01.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        <span class="yuexiao_ziti">月销<span style="color:#666">99</span></span>
        </li><li>
        <img src="images/tb_DIVCSS_02.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30;font-size:14px;">255.00</span><br />
        月销<span style="color:#666;font-size:14px;">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_01.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#F60">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_04.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_01.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_05.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li>
        <li>
        <img src="images/tb_DIVCSS_05.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_01.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_03.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_01.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_07.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_01.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li>
       
      </ul>
    </div>
</div> 
注：在IE8和FF浏览器上测试过，正常。
  • 大小: 130.2 KB
分享到：
| QTP的web版测试报告 增强版xsl样式对xm ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    单页模板单品宣传html模板.zip

    在div+css模板中，“div”是一个通用的容器元素，通过CSS可以对它进行定位、大小调整和样式设置，实现网页布局。例如，`display: flex`或`grid`可以创建灵活的多列布局，`@media query`用于根据设备屏幕尺寸应用不同...

    快打折淘宝客折扣系统(免API采集) v3.0 免费版.zip

    七、前台整合商家报名投稿中心，后台配置QQ/淘宝/微博 免注册一键登录接口，产品页整合多说留言板，后台自定义设置首页幻灯片，友情连接等。 八、本程序采用Php Mysql自主开发，安全性及网站程序运行性能上都是超...

    淘程序返利网CMS

    解决了淘宝客API站百度等搜索引擎不收录的问题，采用DIV+CSS技术制作的页面，对搜索引擎更加友好。网站后台可添加管理友情链接，同时强大的自定义标题关键词等功能更是能极大提高网站的标题内容的个性化，让网页更...

    快打折淘客程序

    快打折淘宝客折扣系统》是一款适用于淘宝客打折单品推广的程序，无论老手或新手 都能短时间内赚取大量佣金的淘宝客网站程序，不同于现在广泛的淘宝客单品推广网站 。本程序可手动添加商品，同时也配置强大的全自动...

    课后作业.zip

    "小米明星单品页面.html"可能是一个用HTML编写的网页源代码，学生需要理解和运用HTML元素如`&lt;head&gt;`, `&lt;body&gt;`, `&lt;div&gt;`, `&lt;img&gt;`等来构建页面布局和内容。 2. **CSS（层叠样式表）**：虽然在文件列表中没有直接...

    岗位职责】程序员2页.doc

    精通ASP.NET+SQL Sever进行网站开发，熟悉DIV+CSS网页设计规范和SEO。 - 多语言技能：了解PHP，熟练使用Photoshop、Flash、Dreamweaver等工具，具备独立开发网站的能力，了解B2B、B2C网站架构。 - 软技能：良好的...

    maven+springmvc+mybatis+svn+hudson

    - 开发技术：使用Jsp、Freemarker、jQuery、CSS+Div、JSTL、Struts-Menu、FCKEditor。SpringMVC、Spring、MyBatis作为核心框架，Cxf处理服务交互，图片服务器处理图像，Maven、svn、Hudson实现构建、版本控制和持续...

    网钛淘拍(TaoPaiCMS)系统源码V1.60

    网钛淘拍CMS（TaoPaiCMS）是当前最有发展潜力的淘宝客程序和拍拍客程序，集文章系统、淘宝客系统、拍拍客系统3大系统为一身，全站采用主流DIV+CSS框架布局，功能强大，操作人性化，不但可以适用于广泛的淘宝客网站...

    bondonshop_wareframe

    4. `&lt;section&gt;`和`&lt;article&gt;`：用于组织内容，比如产品类别、单品介绍等。 5. `&lt;aside&gt;`：侧边栏，可能包含推荐商品、广告或用户信息。 6. `&lt;footer&gt;`：页脚，包含版权信息、联系方式等。 7. `&lt;form&gt;`：用于用户交互...

    E-Shop:网上商店课程项目

    `&lt;h1&gt;`至`&lt;h6&gt;`定义了标题等级，`&lt;p&gt;`用于段落，`&lt;a&gt;`用于链接，`&lt;img&gt;`用于插入图像，`&lt;div&gt;`和`&lt;span&gt;`则用于分组元素并进行样式控制。 在构建E-Shop网上商店时，HTML将与CSS（层叠样式表）和JavaScript一起工作...

    岗位职责】程序员-2页.doc

    - 技能要求：至少两年的网站开发经验，精通ASP.NET+SQL Sever，熟悉DIV+CSS，了解SEO。 - 优先条件：熟悉PHP，掌握Photoshop、Flash、Dreamweaver等工具，有大型网站经验者优先。 - 能力素质：优秀的沟通协作能力...

Magicbox
Global site tag (gtag.js) - Google Analytics