小米耳机页面

 <style>

       * {

            margin: 0;

            padding: 0;

        }

        body {

            width: 1226px;

            background-color: #f5f5f5;

            margin: 0 auto;

        }

        .clearfix:after {

            /*伪元素是行内元素 正常浏览器清除浮动方法*/

            content: "";

            display: block;

            height: 0;

            clear: both;

            visibility: hidden;

        }

        .clearfix {

            *zoom: 1;

            /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/

        }

        li {

            list-style: none;

        }

        a {

            text-decoration: none;

        }

        .header {

            height: 58px;

            line-height: 58px;

        }

        h2 {

            float: left;

        }

        .type li a {

            float: right;

            margin-left: 30px;

            color: black;

        }

        .type li a:hover {

            color: orange;

            padding: 3px 0;

            border-bottom: 1px solid orange;

        }

        .erji .item {

            float: left;

            width: 234px;

            height: 300px;

            margin-right: 14px;

            margin-bottom: 14px;

            background-color: red;

        }

        .erji {

            margin-right: -14px;

        }

        .erji .item.items1 {

            height: 614px;

        }

        .erji .item.items9,

        .item.items10 {

            height: 143px;

        }

</style>


<body>

    <div class="header clearfix">

        <h2>智能穿戴</h2>

        <ul class="type">

            <li><a href="#">耳机</a></li>

            <li><a href="#">穿戴</a></li>

        </ul>

    </div>

    <div>

        <ul class="erji">

            <li class="item items1"></li>

            <li class="item items2"></li>

            <li class="item items3"></li>

            <li class="item items4"></li>

            <li class="item items5"></li>

            <li class="item items6"></li>

            <li class="item items7"></li>

            <li class="item items8"></li>

            <li class="item items9"></li>

            <li class="item items10"></li>

        </ul>

    </div>

</body>





.type 中的耳机，穿戴的border没写好，不知道为啥下边框离文字那么远，把下面的盒子都订下去了。。。。

mi的更多相关文章

  1. Oracle中把一个DateTime的字符串转化成date类型。to_date('2016/12/8 18:55:43','yyyy/MM/dd hh24:mi:ss'),

    Oracle中把一个DateTime或者该形态字符串转化成date类型. to_date('2016/12/8 18:55:43','yyyy/MM/dd hh24:mi:ss'), 或者: sele ...

  2. 小米2000万买域名mi.com

    来源:互联网的一些事   移动互联网之下,域名对于企业的吸引力将会越来越低,因为网站的入口多元化,不再仅凭域名.小米用超2000万人民币的代价购买mi.com域名,仅仅是为了所谓的国际化吗?小米此举, ...

  3. GDB 的MI接口

    背景介绍: libgdb过时了,目前的GDB调试前端都不用libgdb 目前有两种比较流行:- MI接口,现在应该是MI II接口,是Eclipse CDT所采用的方式- emac输出接口,这个似乎有 ...

  4. 多重继承，虚继承，MI继承中虚继承中构造函数的调用情况

    先来测试一些普通的多重继承.其实这个是显而易见的. 测试代码: //测试多重继承中派生类的构造函数的调用顺序何时调用 //Fedora20 gcc version=4.8.2 #include < ...

  5. oracle 插入记录，字段自动获取当前系统时间（YYYY-MM-DD HH24:MI:SS）

    需求: 插入一条记录,要求自动获取当前日期,并且格式为(YYYY-MM-DD HH24:MI:SS) sql语句: insert into SY_COMM_CONFIG(CONF_ID, S_MTIM ...

  6. PCB NOSQL MongoDb MI流程指示数据存储结构

    一.MI流程指示结构 二.产品型号树结构(即盲埋孔板型号结构) 三.MI流程指示UI 小结:1.MI流程指示使用的表非常之多(30多张表),存储的数据分散到各个表中,而NOSQL 一个产品型号一条记录 ...

  7. 【图像配准】基于互信息的图像配准算法：MI、EMI、ECC算法

    简单介绍: 基于互信息的图像配准算法以其较高的配准精度和广泛的适用性而成为图像配准领域研究的热点之中的一个.而基于互信息的医学图像配准方法被觉得是最好的配准方法之中的一个.基于此.本文将介绍简单的基于 ...

  8. oracle日期格式和java日期格式区别 HH24:mm:ss和HH24:mi:ss的区别

    转载自:https://blog.csdn.net/yubin_yubin/article/details/18655553 在日期数据库数据查询出来的时候经常会to_char()一下,格式化一下日期 ...

  9. [代码质量] Maintainability Index (MI)

    转载自: http://www.projectcodemeter.com/cost_estimation/help/GL_maintainability.htm ProjectCodeMeter Ma ...

  10. 双目立体匹配经典算法之Semi-Global Matching（SGM）概述：匹配代价计算之互信息（Mutual Information，MI）

      半全局立体匹配算法Semi-Global Matching,SGM由学者Hirschmüller在2005年所提出1,提出的背景是一方面高效率的局部算法由于所基于的局部窗口视差相同的假设在很多情况 ...

随机推荐

  1. 转码服务serverless探索

    背景 公司目前主要聚焦于视频这个领域,利用视频为媒体.文旅.会议等行业进行赋能. 既然聚焦于视频领域,那么视频转码则是绕不开的话题. 为了降低成本,以及保证产品的核心能力,公司自建了一套转码系统. 转 ...

  2. 如何免费获取高清动图并将其插入到Markdown中

    一.发现问题 我在做excel笔记的时候,想要动态展示操作excel的过程,由于我平时的笔记都是使用markdown记录,所以要在md文件中插入动图. 二.解决问题 细化问题 1.如何将动图插入到md ...

  3. CMakeLists.txt模板

    编译动态库的模板 add_library 生成可执行程序换成add_executable 不需要调试信息的去掉 -g 不需要警告信息的去掉 -Wall 这应该是 -W all的组合 cmake_min ...

  4. Spark 要点总结及优化

    Spark Components:  角色组成: Driver :  由SparkContext创建,运行在main方法,负责资源申请与调度,程序分发,接收每个分区的计算结果 Cluster mana ...

  5. vue子传父 .indexOf('1')!=-1

    子传父 1.先在父级页面的子组件上加上自定义事件  <SearchSelector @attrinfo="propsinfo" /> 2.在子组件里面写方法传 //点击 ...

  6. 这里记录一下我个人对AXI4主从模块的理解（这些理解主要来自阅读 Xilinx AXI_FULL_M_module 源码）

    先只考虑读请求: 以取指模块和内存模块为例,取指模块是发出请求的模块,因此为 Master,属于AXI4MasterModule:内存模块是响应请求的模块,因此为 Slave,属于AXI4SlaveM ...

  7. 采集存储计算处理卡设计原理图：619-基于6U VPX的双FMC ZU19EG 采集存储计算处理卡

    619-基于6U VPX的双FMC ZU19EG 采集存储计算处理卡   基于6U VPX的双FMC ZU19EG 采集存储计算处理卡 一.板卡概述 该板卡是采集.存储.计算.管理一体的高集成度.加固 ...

  8. SpringCloud之配置中心（config）的使用

    配置中心的作用就在于可以在项目启动时加载远程或本地的配置文件,将配置文件集中管理 springboot版本: 2.1.6.RELEASE springcloud版本: Finchley.RELEASE ...

  9. docker下载java镜像，执行xxx.jar文件

    docker pull java:8u111

  10. windows文件夹被占用的解除办法

    1.第一步,按下快捷键组合 ctrl alt del,打开任务管理器窗口,点击上方菜单栏中的性能选项. 2. 第二步,在性能页面下找到打开资源监视器按钮并点击. 3. 第三步,进入资源监视器页面,点击 ...