<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        li{

            list-style: none;

        }

        div{

            width: 1226px;

            height: 460px;

            border: 1px solid red;

            margin: 50px auto;

            position: relative;

        }

        div .tab{

            overflow: hidden;

            border: 1px solid red;

            width: 120px;

            border-radius: 20px;

            position: absolute;

            bottom: 20px;

            right: 50px;

        }

        div .tab li{

            width: 10px;

            height: 10px;

            background: #b864ff;

            float: left;

            border-radius: 50%;

            margin: 5px;

        }

        div .btn li{

            width: 50px;

            height: 100px;

            text-align: center;

            line-height: 100px;

            background: #ddd;

            font-size: 25px;

            font-weight: bold;

            position: absolute;

            top: 50%;

            margin-top: -50px;

        }

        div .btn li.left{

            left: 234px;

        }

        div .btn li.right{

            right: 0;

        }

        div .list{

            position: absolute;

            top: 0;

            left: 0;

            width: 234px;

            /*height: 460px;*/

            background: #333;

            padding: 20px 0;

            font-size: 14px;

        }

        div .list li{

            padding-left: 30px;

            line-height: 42px;

            height: 42px;

        }

        div .list li:hover{

            background: #ffa31e;

            cursor: pointer;

        }

        div .list li a{

            text-decoration: none;

            color: white;

        }

        div .list li a span{

            position: absolute;

            left: 200px;

        }

        div .list li.item1 div{

            width: 800px;

            height: 460px;

            background: #b864ff;

            position: absolute;

            top: -50px;

            left: 234px;

            z-index: 2;

            display: none;

        }

        div .list li.item1:hover div{

            display: block;

        }

    </style>

</head>

<body>

    <div>

        <img src="http://i1.mifile.cn/a4/xmad_15277566791601_pEzCs.jpg" width="1226" height="460">

        <ul class="list">

            <li class="item1"><a href="#">手机 电话卡 <span>&gt;</span></a>

                <div>

                </div>

            </li>

            <li><a href="#">手机 电话卡 <span>&gt;</span></a></li>

            <li><a href="#">手机 电话卡 <span>&gt;</span></a></li>

            <li><a href="#">手机 电话卡 <span>&gt;</span></a></li>

            <li><a href="#">手机 电话卡 <span>&gt;</span></a></li>

            <li><a href="#">手机 电话卡 <span>&gt;</span></a></li>

            <li><a href="#">手机 电话卡 <span>&gt;</span></a></li>

            <li><a href="#">手机 电话卡 <span>&gt;</span></a></li>

            <li><a href="#">手机 电话卡 <span>&gt;</span></a></li>

            <li><a href="#">手机 电话卡 <span>&gt;</span></a></li>

        </ul>

        <ul class="tab">

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

        <ul class="btn">

            <li class="left">&lt;</li>

            <li class="right">&gt;</li>

        </ul>

    </div>

</body>

html-模仿小米首页定位案例的更多相关文章

  1. 模仿百度首页“元宵节汤圆”动图（js的定时任务：setInterval）

    模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...

  2. 模仿东京首页banner轮播，京东新闻上下滚动动画实现（动画实现）

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...

  3. 海盗船长小米首页小船来回摆动CSS3.0效果

    海盗船长小米首页小船来回摆动CSS3.0效果,偶然之间看到的,就写了一个. <!DOCTYPE html> <html lang="en"> <hea ...

  4. 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  5. js模仿京东首页的倒计时功能

    模仿京东首页的倒计时 我们学习了定时器,可以用定时器做一个倒计时,于是我模仿了京东首页倒计时. 先看看京东首页的倒计时. 思路: 如何倒计时? 给一个未来的时间.然后计算未来时间到现在的时间戳. 用定 ...

  6. 网络错误定位案例 ICMP host *** unreachable - admin prohibited

    1. 环境 一台物理服务器 9.115.251.86,上面创建两个虚机,每个虚机两个网卡: vm1:eth0 - 9.*.*.232 eth1:10.0.0.14 vm2: eth0 - 9.8.*. ...

  7. 入门html第一次copy小米首页布局

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. 模仿NetFlix首页效果

    之前写过UWP 带左右滚动按钮的横向ListView———仿NetFlix首页河的设计,讲述了如何设计一个带有左右滚动按钮横向的ListView. 不过我在半年之前挖了一个坑,由于工作关系,没时间来填 ...

  9. 如何用微信小程序模仿豆瓣首页

    程序思路: 用微信自带组件swiper来实现轮播图 用豆瓣提供的api(这里使用的电影api)来获取最近的电影数据[豆瓣api地址] 获取数据用微信的request方法,只需要提供豆瓣api的url链 ...

随机推荐

  1. PHP中使用Redis长连接笔记

    pconnect函数声明 其中time_out表示客户端闲置多少秒后,就断开连接.函数连接成功返回true,失败返回false: pconnect(host, port, time_out, pers ...

  2. 任意N位二进制的补码实现——队列存放

    正在学习计算机组织与结构,为了写一些底层的算术操作模拟,比如一个二进制补码数的加减乘除,发现这很麻烦,因为不管是什么语言,都只提供了8位.32.64位等部分位数的补码形式,那么怎么实现任意任意位的补码 ...

  3. 如何获取STM32 MCU的唯一ID

    前段时间由于应用需要对产品授权进行限制,所以研究了一下有关STM32 MCU的唯一ID的资料,并最终利用它实现了我们的目标. 1.基本描述 在STM32的全系列MCU中均有一个96位的唯一设备标识符. ...

  4. VM_Centos7.3_X64_安装Oracle12C 总结笔记

    声明:本文居多内容参考原文来之网络: 一:安装Centos7.3 虚拟机 1:操作系统下载 CentOS 7官方下载地址:https://www.centos.org/download/ 说明:本案例 ...

  5. 用来表达更复杂的sql语句！！！！！extra 原声sql

    extra 用来表达更复杂的sql语句!!!!! extra可以指定一个或多个 参数,例如 select, where or tables. 这些参数都不是必须的,但是你至少要使用一个!要注意这些额外 ...

  6. Java和C冒泡排序

    Java 示例代码: public class test { public static void main(String[] args) { String str = "321dca5&q ...

  7. Spring Boot 导出Excel表格

    Spring Boot 导出Excel表格 添加支持 <!--添加导入/出表格依赖--> <dependency> <groupId>org.apache.poi& ...

  8. django linux环境部署

    一．操作环境: 1操作系统:Ctrip-CentOS-7.1-x86_64-R3 Python版本:2.7.5 Django版本: Django 1.8.19 (LTS) 二.部署流程 pip ins ...

  9. SHELL打印两个日期之间的日期

    SHELL打印两个日期之间的日期 [root@umout shell]# cat date_to_date.sh THIS_PATH=$(cd `dirname $0`;) cd $THIS_PATH ...

  10. 洛谷 P1217

    题目链接如下https://www.luogu.org/problemnew/show/P1217 找出a到b 是回文数并且是素数的数. 这还不简单 前两天刚学的线性筛素数.卡卡卡卡一顿猛敲.最后一个 ...