小米耳机页面

 <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. Java 反射概念的引入

    反射是什么 学Java的人都知道类概念,反射技术就是一种控制类的技术,JAVA程序在运行时,通过反射这个技术,能动态的获取到类实例的信息.创建实体类.操作实体类. 反射的功能列表: 获取任意类的名称. ...

  2. LeetCode-393 UTF-8编码验证

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/utf-8-validation 题目描述 给定一个表示数据的整数数组 data ,返回它是否为有 ...

  3. 动手写了个简单版的ChatGPT的Java版客户端

    最近ChatGpt大火,我在年前申请过账号忘了下确实强大. 作为Java程序猿社畜就尝试写了个Java版本的简易版客户端. 源码地址:https://github.com/Grt1228/chatgp ...

  4. vue学习笔记：环境搭建

    一.安装node.js node.js的官方地址为:https://nodejs.org/en/download/ 下载好安装包点击安装,基本就是下一步.下一步.... 安装完成后可以通过以下两种方式 ...

  5. java struts2框架漏洞合集

    目录 struts2 s2-016 payload 数据包 返回结果 struts2 s2-016 参考:https://github.com/vulhub/vulhub/blob/master/st ...

  6. DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0

    DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. 问题解决 ...

  7. Python 20个常用库

    Requests.Kenneth Reitz写的最富盛名的http库.每个Python程序员都应该有它. Scrapy.如果你从事爬虫相关的工作,那么这个库也是必不可少的.用过它之后你就不会再想用别的 ...

  8. Spring全家桶(一)之Spring总结

    0. Spring常用注解汇总 Spring常用注解汇总 使用注解之前要开启自动扫描功能,其中base-package为需要扫描的包(含子包). <context:component-scan ...

  9. winform Message应用

    今天遇到了一个问题,winform 中使用自定义控件时,希望在点击自定义控件时设置控件为选中状态.而且这个自定义控件在一个窗体中被创建多个. 但在自定义控件中添加子控件后,导致鼠标点击事件只能响应在子 ...

  10. harbor 修改主机地址

    harbor 修改主机地址 1 # cd /var/lib/wise2c/harbor/harbor 2 # docker-comppose down 3 # vi harbor.cfg 4 host ...