zoukankan      html  css  js  c++  java
  • html-模仿小米首页定位案例

    <!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>

  • 相关阅读:
    产品经理做产品设计的九步法
    产品经理要懂多少技术?
    产品经理如何注重细节意识的培养
    产品经理如何在技术人员面前更有说服力?
    从程序员到项目经理:每个人都是管理者
    我的人才管理方式
    一个关于内部类的小例子
    java中的全局变量与静态变量的区别与联系?有时候为什么专门定义静态变量。(标题党~~)
    举一反三,一小步。
    中国移动的企业文化 ,以及中国移动都有那些业务?
  • 原文地址:https://www.cnblogs.com/cxhzy/p/10096511.html
Copyright © 2011-2022 走看看