html 商品展示框

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>LNG罐车</title>

<style>

body,  ul, li {

    margin: 0px;

    padding: 0px;

}

.wrapper {

    width: 1000px;

    margin:  auto;

    position: relative;

}

.nav-mod {

    position: relative;

    z-index: ;

}

h3.topic_title {

    border-bottom: 2px solid #BDCFDC;

    font-size: 14px;

    padding-left: 18px;

    margin-bottom: 20px;

}

.categoryhd {

    border-bottom: 2px solid #0759C4;}

.categoryhd { position:relative; height:40px; line-height:40px;  }

.categoryhd { border-bottom:2px solid #0759c4; }

.more-mod {

    position: absolute;

    bottom: 6px;

    right: 0px;

    padding: 0px 30px 0px 20px;

    height: 20px;

    line-height: 20px;

    display: block;

    font-family: simsun;

    color: #;

}

.goods_request{

    height: 293px;

    border-right: 1px solid #E3E3E3;

    border-width: 0px 1px 1px;

    border-style: none solid solid;

    border-color: -moz-use-text-color #E3E3E3 #E3E3E3;

    -moz-border-top-colors: none;

    -moz-border-right-colors: none;

    -moz-border-bottom-colors: none;

    -moz-border-left-colors: none;

    border-image: none;

}

.goods_request.first{

    width: 233px;

    border-left: 0px none;

}

.goods_request li {

    float: left;

    width: 234px;

    border-left: 1px solid #E3E3E3;

}

</style>

</head>

<body>

   <div class="wrapper">

    <div class="nav-mod categoryhd">

        <h3>LNG罐车需求</h3>

        <a href="#" target="_blank" class="more-mod">更多><i></i></a>

    </div>

        <ul class="goods_request">

      <li class="first">

          <img src="LNG罐车/tu.png"/>

      </li>

        <li>

          <div>

         <img src="LNG罐车/tu.png"/>

        </div>

     </li>

             <li>

          <div>

         <img src="LNG罐车/tu.png"/>

        </div>

     </li>

      <li>

          <div>

         <img src="LNG罐车/tu.png"/>

        </div>

     </li>

        </ul>

       </div>

</body>

</html>

展示图：

aaarticlea/png;base64,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" alt="" />

html 商品展示框的更多相关文章

HTML网页设计基础笔记 • 【第4章 CSS3基础】
全部章节 >>>> 本章目录 4.1 CSS 概述 4.1.1 CSS 简介 4.1.2 CSS3 基本语法 4.1.3 样式表的分类 4.2 CSS 基本选择器 4.2. ...
如何一步一步用DDD设计一个电商网站（四）—— 把商品卖给用户
阅读目录前言怎么卖领域服务的使用回到现实结语一.前言上篇中我们讲述了“把商品卖给用户”中的商品和用户的初步设计.现在把剩余的“卖”这个动作给做了.这里提醒一下,正常情况下,我们的每一步业 ...
DDD 领域驱动设计-商品建模之路
最近在做电商业务中,有关商品业务改版的一些东西,后端的架构设计采用现在很流行的微服务,有关微服务的简单概念: 微服务是一种架构风格,一个大型复杂软件应用由一个或多个微服务组成.系统中的各个微服务可被独 ...
【Machine Learning】决策树案例：基于python的商品购买能力预测系统
决策树在商品购买能力预测案例中的算法实现作者:白宁超 2016年12月24日22:05:42 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本 ...
电商系统中的商品模型的分析与设计—续
前言在<电商系统中的商品模型的分析与设计>中,对电商系统商品模型有一个粗浅的描述,后来有博友对货品和商品的区别以及属性有一些疑问.我也对此做一些研究,再次简单的对商品模型做一个介 ...
Redis命令拾遗四（集合类型）—包含简单搜索筛选商品设计实例。
本文版权,归博客园和作者吴双共同所有.转载和爬虫请注明博客园蜗牛Redis系列文章地址 http://www.cnblogs.com/tdws/tag/NoSql/ Redis数据类型之集合(Set) ...
C#开发微信门户及应用(23)-微信小店商品管理接口的封装和测试
在上篇<C#开发微信门户及应用(22)-微信小店的开发和使用>里面介绍了一些微信小店的基础知识,以及对应的对象模型,本篇继续微信小店的主题,介绍其中API接口的封装和测试使用.微信小店的相 ...
python推荐淘宝物美价廉商品
完成的目标: 输入搜索的商品以及淘宝的已评价数目.店铺的商品描述(包括如实描述.服务态度.快递的5.0打分): 按要求,晒选出要求数量的结果,并按"物美价廉算法"排序后输出思 ...
Java Web之网上购物系统（注册、登录、浏览商品、添加购物车）
眼看就要期末了,我的专业课也迎来了第二次的期末作业---------<网上购物系统>.虽然老师的意图是在锻炼我们后台的能力,但是想着还是不利用网上的模板,准备自己写,以来别人写的静态页看不 ...

随机推荐

为Android GridView 设置行背景
经常有这样的需求,你的功能图标要像一个个物品,摆放在书架上,像这样: 我的思路比较简单,重载GridView,在他绘制子视图前,先把背景绘制完成 1 2 3 4 5 6 7 8 9 10 11 12 ...
Android中GridView拖拽的效果
最近看到联想,摩托罗拉等,手机launcher中有个效果,进入mainmenu后,里面的应用程序的图标可以拖来拖去,所以我也参照网上给的代码,写了一个例子.还是很有趣的,实现的流畅度没有人家的那么 ...
poj3348 Cows 凸包+多边形面积水题
/* poj3348 Cows 凸包+多边形面积水题 floor向下取整,返回的是double */ #include<stdio.h> #include<math.h> # ...
[转] git修改author
Changing author info To change the name and/or email address recorded in existing commits, you must ...
解决dispaly:inline-block 遗留间隙的问题
今天做一个项目 .本来我打算是作成表格的 ,后来觉得太费事直接搞成一个div 里面直接放四个a ,然后我将a 设置成inline-block.刚开始还没发现任何间隙问题,(对了说到这里博主给新手介绍 ...
c读mysql产生乱码问题
在编写接口API时,发现中文字utf8输入的在linux下采用c读取显示为”??”问号,这是由于编码造成的. 很简单的两个地方做修改就搞定. 1.先找到mysql的my.cnf配置文件/etc/my. ...
javascript社交平台分享-新浪微博、QQ微博、QQ好友、QQ空间、人人网
整理的五个社交平台的分享 <!doctype html> <html lang="en"> <head> <meta charset=&q ...
SpringMVC4+thymeleaf3的一个简单实例（篇三：页面参数获取）
本篇将通过示例介绍页面参数是如何传递到后台的.我们继续沿用之前搭好的程序结构,如果你不知道,请参照前两篇.为方便跳转页面,我们在首页以及zoolist.html页面都加上彼此地址的链接:首页: zoo ...
mem 族函数的实现
1.void * memcpy ( void * dest, const void * src, size_t num ); 头文件:#include <string.h>memcpy() ...
Vijos1523 NOI2002 贪吃的九头龙树形dp
思路不算很难,但细节处理很麻烦前面建图.多叉转二叉,以及确定dp处理序列的过程都是套路,dp的状态转移过程以注释的形式阐述 #include <cstdio> #include < ...

html 商品展示框

html 商品展示框的更多相关文章

随机推荐

热门专题