小米商城首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0; /*两边没间隔*/
        }
        img{
            width:100%;
            height:100%;
        } /*设置图片是父类的百分百,就按照父类尺寸走*/

        .left{
            float:left;
        }

        .header{

            background-color:#333; /*背景颜色*/
        }
        .container{
            width: 1226px;  /*高度*/
            margin: 0 auto;  /* 内容居中*/
        }

        .header .menu{
            float:left; /*浮动左边*/
            color:white; /*颜色*/
        }
        .header .account{
            float: right; /*浮动到右边*/
            color:white;

            text-decoration:none;
        }
        .header account:hover{
                color:white;
        }

        .header a{
                color:#b8b8b8;
                line-height:40px; /*行高度*/
                display:inline-block;  /*块级转行内*/
                font-size: 12px;  /*字体大小*/
                margin-right:10px; /*距离左边10边距*/

                text-decoration:none;
        }
        .header a:hover{
                color:white;
        }


         .sub-header{
                height:100px;
        }

        .sub-header .ht{
                height: 100px;
        }

        .sub-header .logo{
            width: 234px;
            float: left;
        }
        .sub-header .logo a{
            margin-top:22px;
            display:inline-block;
        }
        .sub-header .logo a img{
            height:56px;
            width:56px;
        }

        .sub-header .menu-list{
            float:left;
            line-height:100px;
        }

        .sub-header .menu-list a{
            display: inline-block;
            padding: 10px;
            font-color:#333;
            font-size:16px;

            text-decoration: none; /*去掉超链接下的下划线*/
        }

        .sub-header .menu-list a:hover{ /* :hover: 鼠标放上是什么颜色*/
                color:#ff6788;
        }

        .sub-header .search{
            float:right;
        }

        .slider .sd-img{
            width:1226px;
            height: 460px;
        }

        .news{
            margin-top: 14px;
        }

        .news .channel{
            width:228px;
            height:164px;
            background-color:#5f5750;
            padding:3px;
        }

        .news .channel .item{
            height: 82px;
            width: 76px;
            float:left;
            text-align:center;
        }

        .news .channel .item a{
            display: inline-block;
            font-size: 12px;
            padding-top: 18px;
            color:#fff;
            text-decoration: none;

            opacity: 0.7; /*背景透明度*/
        }

        .news .channel .item a:hover{
                 opacity: 1;
        }

        .news .channel .item img{
            height: 24px;
            width: 24px;
            display: block;
            margin: 0 auto 4px; /*顶部0px,左右auto,下方4px*/


        }

        .news .list-item{
            width:316px;
            height:170px;
        }

        .back{
            position: fixed;
            height: 60px;
            width:60px;
            border:1px solid red;
            right: 10px;
            bottom:50px;
        }

        .app{
            position:relative;
        }
        .app .download{
            position:absolute;
            height:100px;
            width:100px;
            display:none;
        }
        .app:hover .download{
            display: block;
        }


    </style>

</head>
<body>
<div class="header">
    <div class="container">

        <div class="menu">
            <a href="https://blog.csdn.net/">小米商城</a>
            <a href="https://blog.csdn.net/">MIUI</a>
            <a href="https://blog.csdn.net/">优品</a>
            <a href="https://blog.csdn.net/">开放平台</a>
            <a href="https://blog.csdn.net/" class="app">下载APP
                <div class="download">
                    <img src="../imgs/c1.png" alt="">
                </div>
            </a>
            <a href="https://blog.csdn.net/">云服务</a>
            <a href="https://blog.csdn.net/">油品</a>
            <a href="https://blog.csdn.net/">开放平台</a>

        </div>

        <div class="account">
            <a href="https://blog.csdn.net/">登陆</a>
            <a href="https://blog.csdn.net/">注册</a>
            <a href="https://blog.csdn.net/">消息通知</a>
        </div>

        <div style="clear:both"></div>
    </div>
</div>

<div class="sub-header">
    <div class="container">
        <div class="ht logo">
        <a href="https://blog.csdn.net/">
            <img src="../imgs/1.png">
        </a>
        </div>
        <div class="ht menu-list">
            <a href="https://blog.csdn.net/">小米手机</a>
            <a href="https://blog.csdn.net/">红米手机</a>
             <a href="https://blog.csdn.net/">电视</a>
             <a href="https://blog.csdn.net/">笔记本</a>
             <a href="https://blog.csdn.net/">平板</a>

        </div>
        <div class="ht search">3</div>
        <div class="clear:both"></div>
    </div>
</div>

<div class="slider">
    <div class="container">
        <div class="sd-img">
            <img src="../imgs/b.png" alt="">
        </div>

    </div>

</div>

<div class="news">
    <div class="container">
        <div class="channel left">
            <div class="item">
                <a href="https://home.firefoxchina.cn/">
                    <img src="../imgs/c1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                 <a href="https://home.firefoxchina.cn/">
                    <img src="../imgs/c1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                 <a href="https://home.firefoxchina.cn/">
                    <img src="../imgs/c1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                 <a href="https://home.firefoxchina.cn/">
                    <img src="../imgs/c1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                 <a href="https://home.firefoxchina.cn/">
                    <img src="../imgs/c1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                 <a href="https://home.firefoxchina.cn/">
                    <img src="../imgs/c1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="clear:both"></div>
        </div>
        <div class="list-item left">
            <img src="../imgs/1.png" alt="">
        </div>
        <div class="list-item left">
            <img src="../imgs/1.png" alt="">
        </div>
        <div class="list-item left">
            <img src="../imgs/1.png" alt="">
        </div>
        <div class="clear:both"></div>


    </div>

</div>

<div class="back"></div>
</body>
</html>

登录框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .dialog{
            position: fixed;
            height:300px;
            width:500px;
            background-color:white;

            left:0;
            right:0;
            margin:0 auto;
            top: 200px;
            z-index:1000 /*设置优先级,那个达大就放在最上面*/
        }
        .mask{
            background-color:black;
            position:fixed;
            left:0;
            right:0;
            top:0;
            bottom:0;
            opacity:0.7;
            z-index:999
        }

    </style>

</head>
<body>
<!--内容-->
<div style="height: 1000px">12312312</div>
<!--幕布-->
<div class="mask"></div>
<!--弹窗-->
<div class="dialog"></div>
</body>
</html>

原文地址:http://www.cnblogs.com/kh-1314/p/16699993.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性