首页 > 其他分享 >小米商城实例（部分）

小米商城实例（部分）

时间：2022-11-05 21:57:26浏览次数：54  
标签：width color height phone 实例 background 小米 无线 商城

xiaomiShop.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/xiaomiShop.css">
</head>
<body>
    <div class="head-nav">
        <!--加个container容器是因为小米商城的内容都是在同一宽度内的
        左右两边都有一定的安全距离，便以container为基准，把内容放里面
        -->
        <div class="container">
            <div class="head-nav-left">
                <a href="#">小米官网</a>
                <span class="sep">|</span>
                <a href="#">小米商城</a>
                <span class="sep">|</span>
                <a href="#">MIUI</a>
                <span class="sep">|</span>
                <a href="#">IoT</a>
                <span class="sep">|</span>
                <a href="#">云服务</a>
                <span class="sep">|</span>
                <a href="#">天星数科</a>
                <span class="sep">|</span>
                <a href="#">有品</a>
                <span class="sep">|</span>
                <a href="#">小爱开放平台</a>
                <span class="sep">|</span>
                <a href="#">企业团购</a>
                <span class="sep">|</span>
                <a href="#">资质证照</a>
                <span class="sep">|</span>
                <a href="#">协议规则</a>
                <span class="sep">|</span>
                <a href="#" class="download">下载app
                    <div class="appcode">
                        <img src="img/download.png" alt="">
                        <p>小米商城APP</p>
                    </div>
                </a>
                <span class="sep">|</span>
                <a href="#">Select Location</a>
            </div>
            <div class="head-nav-right">
                <ul>
                    <li>
                        <a href="#">登录</a>
                        <span class="sep">|</span>
                    </li>
                    <li>
                        <a href="#">注册</a>
                        <span class="sep">|</span>
                    </li>
                    <li class="message">
                        <a href="#">消息通知</a>
                        <div class="dropmenu">
                            <div class="dropmenu-inner">
                                <p class="nomessage">暂无消息通知</p>
                            </div>
                        </div>
                    </li>
                    <li class="cart">
                        <a href="#"><i class="cart-icon"></i>购物车<span>( 0 )</span></a>
                        <div class="dropmenu">
                            <div class="dropmenu-inner">
                                <p class="nogoods">购物车中还没有商品，赶紧选购吧！</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="neck">
        <div class="container">
            <div class="neck-logo">
                <a href="#">
                    <img src="img/logo-mi2.png" alt="">
                </a>
            </div>
            <div class="neck-nav">
                <ul>
                    <li>
                        <a href="#">Xiaomi手机</a>
                    </li>
                    <li>
                        <a href="#">Redmi手机</a>
                    </li>
                    <li>
                        <a href="#">电视</a>
                    </li>
                    <li>
                        <a href="#">笔记本</a>
                    </li>
                    <li>
                        <a href="#">平板</a>
                    </li>
                    <li>
                        <a href="#">家电</a>
                    </li>
                    <li>
                        <a href="#">路由器</a>
                    </li>
                    <li>
                        <a href="#">服务中心</a>
                    </li>
                    <li>
                        <a href="#">社区</a>
                    </li>
                </ul>
            </div>
            <div class="search">
                <input type="text">
                <span><i></i></span>
                <div class="search-category">
                    <ul>
                        <li>
                            <a href="#">全部商品</a>
                        </li>
                        <li>
                            <a href="#">洗衣机</a>
                        </li>
                        <li>
                            <a href="#">冰箱</a>
                        </li>
                        <li>
                            <a href="#">耳机</a>
                        </li>
                        <li>
                            <a href="#">红米</a>
                        </li>
                        <li>
                            <a href="#">手机</a>
                        </li>
                        <li>
                            <a href="#">显示器</a>
                        </li>
                        <li>
                            <a href="#">黑鲨5 Pro</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="banner">
        <div class="container">
            <div class="banner-swiper">
                <ul id="banner-ul">
                    <!--li的图片要叠在一起，就要用到绝对定位-->
                    <li>
                        <a href="#">
                            <img src="img/banner1.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/banner2.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/banner3.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/banner4.jpg" alt="">
                        </a>
                    </li>
                </ul>
                <!--小圆点也要绝对定位，所以相对定位设置在swiper身上-->
                <div id="banner-dot">
                    <span class="active" data-idx="0"></span>
                    <span data-idx="1"></span>
                    <span data-idx="2"></span>
                    <span data-idx="3"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="ad">
        <!--设置安全距离-->
        <div class="container">
            <a href="#">
                <img src="img/ad1.jpg" alt="">
            </a>
        </div>
        
    </div>

    <div class="product-phone">
        <div class="container">
            <div class="phone-top">
                <h2>手机</h2>
                <div class="show-more">
                    <a href="#">查看更多</a>
                    <!--图标有背景和图片组成，span负责背景，i负责图片-->
                    <span class="phone-background">
                        <i></i>
                    </span>
                </div>
            </div>
            <div class="phone-bottom">
                <div class="phone-bottom-left">
                    <ul>
                        <li>
                            <a href="">
                                <img src="img/type-img1.jpg" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="phone-bottom-right">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--左侧两张图-->
    <div class="product-phone">
        <div class="container">
            <div class="phone-top">
                <h2>手机</h2>
                <div class="show-more">
                    <a href="#">查看更多</a>
                    <!--图标有背景和图片组成，span负责背景，i负责图片-->
                    <span class="phone-background">
                        <i></i>
                    </span>
                </div>
            </div>
            <div class="phone-bottom">
                <div class="phone-bottom-left">
                    <ul>
                        <li class="li-2">
                            <a href="">
                                <img src="img/type-img1.jpg" alt="">
                            </a>
                        </li>
                        <li class="li-2">
                            <a href="">
                                <img src="img/type-img1.jpg" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="phone-bottom-right">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li class="li-2r">
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                        <li class="li-2r">
                            <a href="#">
                                <img src="img/type-good-img1.png" alt="">
                                <div class="phone-name">
                                    Redmi Buds 3半入耳真无线蓝牙耳机
                                </div>
                                <div class="phone-desc">
                                    轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
                                </div>
                                <div class="phone-price">
                                    799元  <span>1999元</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="js/xiaomiShop.js"></script>
</body>
</html>

xiaomiShop.css

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

body{
    /* 保证布局不乱 */
    min-width: 1226px;
    background-color: #f5f5f5;
}

ul,li{
    list-style: none;
}

.head-nav{
    height: 40px;
    background-color: rgb(51,51,51);
}

.container{
    width: 1226px;
    margin: 0 auto;
    /* 居中： container是div元素且宽度为1226px
    父元素body也是有宽度至少为1226px，所以当在更大屏幕的电脑打开时
    body>1226px时container就有水平居中的必要 */
}

.head-nav-left{
    float: left;
    /* line-height: 40px; */
    padding: 8px 0;/*不能用line-height，不然下面的p就有高度*/
    /*字体12px再加上行高总共16px
    要想头部导航栏的文字垂直居中，就要设置好距离
    （40-16）/2=12px*/
    /*但是left的height是45px*/
}

.head-nav .container{
    height: 40px;
    /*head-nav-left和head-nav-left浮动造成高度塌陷，
    因此设置高度*/
    /* 之所以不在上面直接写height，这是针对头部布局的container高度塌陷的
    后续其他布局也有container，最好分开来写各自的container样式
   
    overflow:hidden作用是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏。
    因为浮动会造成父元素高度为0，而浮动可以理解成溢出的部分，
    在父元素设置overflow:hidden就会使溢出的浮动效果消除
    至于为什么不用overflow:hidden，是因为浮动后父元素container高度塌陷，
    而溢不溢出取决于父元素的父元素的高度，这里是nav，高为50px
    也就是说超过50px，container里展示的内容就会被隐藏
    而container里appcode里的照片属于container的内容，同时图片还以download为默认参照物
    图片的祖先元素没有高度，图片也不会显示，且图片明显高度超过50px
    所以如果用overflow:hidden图片会被隐藏
    事实上如果用overflow:hidden，悬停在下载app时只会显示小三角（与图片无关，是另外的样式）
    方案2：既然高度塌陷，那就给它高度
    方案3：用clear:both;
    */
    /*父元素高度为1px也能显示图片
    图片要引入外部资源，加载时需要时间的，所以页面在渲染的时候不会留空间，
    因此图片的父元素是固定不了图片的大小的,也限制不了图片的大小，图片加载后才知道大小,才会在img哪里显示
    这也就是为什么如果给img的父元素设置了宽高，但是图片还是按照自己的尺寸大小显示，想要控制大小必须设置在img元素身上才有效果
    这就相当于你知道这里放了一张椅子，椅子大小是固定的，人来了，才知道够不够坐，瘦人有剩余，胖人不够坐，
    人要使用的空间大小和椅子的空间大小无关
    */
}

.head-nav-left>a{
    font-size: 12px;
    color: #B0B0B0;
    text-decoration: none;
}

.head-nav-left>.sep{
    margin: 0 .3em;/*span是内联元素，margin只能设置其左右*/
    color: rgb(66,66,66);
}

.download{
    position: relative;
}

.appcode{
    position: absolute;
    /*居中 left是移动父元素的50%的距离*/
    left: 50%;
    /*translateX平移的时候设置百分比是根据自身的大小*/
    transform: translateX(-50%);
    /*设置盒子大小，方便图片位置调整、文本居中等操作*/
    width: 124px;
    background-color: #fff;
    box-shadow: 0 3px 5px rgba(0,0,0,.1);
    top: 28px;
    /* height: 150px; 合适的高度*/
    height: 0;/*从零开始渐变*/
    /* display: none; 
    渐变处理的元素不能用display转换，否则渐变不会生效，所以采用高度渐变
    */
    overflow: hidden;
     /*高度设为0后还是能显示图片，所以用hidden隐藏起来
    但同时也把appcode里面的三角也隐藏掉了，所以把三角挪出去，与download同级
    */
    transition: height .3s linear;/*通过高度来渐变*/
    z-index: 2;
}

.appcode img{
    /*因为图片加载的特性浏览器事先不知道它的大小
    所以常常手动给图片设置宽度来限制图片大小*/
    width: 90px;
    margin: 18px 17px 12px;
}

.appcode p{
    font-size: 14px;
    color: rgb(51,51,51);
    text-align: center;
}

.head-nav-left>a:hover{
    color: white;
}

.download::before{
    content: "";/*别忘了加这个，否则三角不会出来*/
    position: absolute;
    /* width: 0;
    height: 0; */
    border: 8px solid transparent;
    border-bottom-color: white;
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
    display: none;
}

/*当悬停在下载app的情况下高度变为184px，也间接把图片显示出来*/
.download:hover>.appcode{
    height: 150px;
}

/*当鼠标悬停在下载app上时才去对伪元素设置效果*/
.download:hover:before{/*hover和before位置不能换*/
    display: block;
    /*设置的效果是将伪元素转换为块元素，block能将隐藏的元素显示出来*/
}

.head-nav-right{
    float: right;
}

.head-nav-right ul>li{
    float: left;
}

.head-nav-right li>a{
    text-decoration: none;
    color: #B0B0B0;
    font-size: 12px;
    height: 40px;
    display: inline-block;/*会产生幽灵空白，a的高度会略微超出50px*/
    vertical-align: top;/*只要不是默认的base-line都行，现在a的高度就不会超出了*/
    line-height: 40px;
}

.head-nav-right .sep{
    margin: 0 .3em;
    line-height: 40px;
}

.cart{
    position: relative;
}

.cart-icon{
    display: inline-block;
    vertical-align: middle;
    background: url(../img/cart-show.png) no-repeat;
    padding-bottom: 5px;
    width: 20px;
    height: 20px;
    background-size: 100%;
}

.cart:hover .cart-icon{
    background:url(../img/cart-hover.png) no-repeat;
    padding-bottom: 5px;
    width: 20px;
    height: 20px;
    background-size: 100%;
}

.cart>a{
    width: 120px;
    margin-left: 20px;
    box-sizing: border-box;
    background-color: rgb(66,66,66);
    text-align: center;
}



.head-nav-right li>a:hover{
    color: #fff;
}

.cart:hover>a{
    color: #FA6600 !important;
    background-color: #fff;
}

.dropmenu{/*为了后续方便扩展下拉栏而把下拉栏绝对定位*/
    position: absolute;
    box-shadow: 0 3px 5px rgba(0,0,0,.1);
    /* top: 30px; */
    height: 0;
    overflow: hidden;
    transition: height .3s linear;
    background-color: #fff;/*不设置的话会被ad的图片挡住*/
    z-index: 2;
}

li:hover .dropmenu{
    min-width: 316px;
    min-height: 100px;
}

.head-nav-right .dropmenu-inner{
    text-align: center;
    line-height: 100px;
}

.cart .dropmenu{
    right: 0;
    width: 316px;
    /* height: 100px; *//*合适的高度*/
}

.cart .nogoods{
    font-size: 12px;
}

.cart:hover>.dropmenu{
    height: 100px;
}

.head-nav-right .message{
    position: relative;
}

.message .dropmenu{
    right: 0;
    width: 316px;
}

.message .nomessage{
    font-size: 12px;
}

.message:hover .dropmenu{
    height: 100px;
}

.ad{
    margin-top: 30px;
}

.ad a{
    display: block;/*想要调整宽高就要先转为块元素*/
    width: 100%;/*父元素宽度的100%，即1226px*/
}

.ad img{
    width: 100%;
    /*照片这种资源在加载时网页不清楚它的大小，需要自己设置
    同时inline-block元素网页会给它加个幽灵空白，用F12检查元素会发现
    照片下面有一些高出3px左右的部分*/
    vertical-align: top;/*清除幽灵空白*/
}

.product-phone{
    margin-top: 30px;
}

.product-phone .phone-top{
    position: relative;
}

.product-phone h2{
    height:58px;
    /* 内容垂直居中  一行 */
    line-height:58px;
    font-size:22px;
    font-weight:200;
    color:#333;
}

.product-phone .show-more{
    position: absolute;
    right: 0;
    /* 设置行高是为了增大show-more的区域的高度，方便top:0跟手机居中 */
    line-height:58px;
    top:0;
}

.product-phone .show-more a{
    text-decoration: none;
    font-size:16px;
    color:#424242;
    transition: all .3s linear;/*颜色渐变*/
}

.product-phone .phone-background{
    display: inline-block;
    width: 26px;
    height: 26px;
    background:#B0B0B0;  
    border-radius:13px;
    vertical-align: middle;
    transition: all .3s linear;/*颜色渐变*/
}

.phone-background>i{
    display: inline-block;/*i标签也是内联元素*/
    width: 26px;
    height: 26px;
    background: url(../img/arrow-right.png) no-repeat;
    /* 设置背景图片的大小 == 该元素宽度的100% */
    background-size: 100%;
    vertical-align: top;
    /*因为span里只有一个没有内容的i标签，如果i标签的对齐方式是top
    那么i标签就与span在同一水平线上。而span又居中于查看更多，
    所以i也居中于查看更多*/
}

.show-more:hover>a{
    color: #FA6600;
}
.show-more:hover .phone-background{
    background-color: #FA6600;
}

.phone-bottom img{
    width: 234px;
    vertical-align: top;
}

.phone-bottom-left{
    float: left;
}

.phone-bottom{
    height: 628px;/*清除浮动*/
    /*不用overflow:hidden来解决塌陷是因为图片要求有阴影效果，
    阴影会略微超过盒子大小，如果用hidden就会隐藏掉一部分阴影效果*/
}

.phone-bottom-left a{/*使整张照片都能点击链接*/
    display: block;
}

.phone-bottom-left .li-2 img{
    height: 300px;
}

.phone-bottom-left li{
    margin-bottom: 14px;
}

.phone-bottom-right{
    float: right;
    width: 992px;
}

.phone-bottom-right li{
    float: left;
    text-align: center;
    /*通过继承让子元素都居中，不用在子元素中一个个写居中*/
    width: 234px;
    height:300px;
    background:#fff;
    margin-left:14px;
    margin-bottom:14px;
}

.phone-bottom-right img{
    width: 160px;
}

.phone-bottom-right li a{
    text-decoration: none;
    display: block;
    padding:24px 16px;
    height:100%;/*使整个li盒子都能点击链接*/
    box-sizing: border-box;
    text-decoration: none;
}

.phone-bottom-right .phone-name{
    color: #333;
    font-size: 14px;
    /* 让文本强制一行显示 */
    white-space: nowrap;
    /* 设置溢出隐藏 */
    overflow: hidden;
    /* 设置文本溢出的样式...*/
    text-overflow: ellipsis;
}
.phone-bottom-right .phone-desc{
    font-size:12px;
    color:#b0b0b0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 10px;
}
.phone-bottom-right .phone-price{
    font-size:14px;
    color:#FF6A00;
    margin-top:20px;
}
.phone-bottom-right .phone-price span{
    color:#b0b0b0;
    text-decoration: line-through;/*文本划掉效果*/
}

.phone-bottom-right .li-2r{
    height:143px;
}

.phone-bottom-right .li-2r img{
    float:right;
    width:80px;
    height:80px;
}

/* 对 type-bottom下面的li盒子施加阴影效果*/
.phone-bottom li:hover{
    box-shadow: 0 5px 14px rgba(0,0,0,.1);
    transform: translateY(-3px);
}

.phone-bottom li{
    transition: all .2s linear;
}

.banner{
    background-color: #fff;
}

.banner-swiper{
    position: relative;
    height: 460px;/*absolute脱离文档流，父元素高度塌陷*/
}

#banner-ul{
    height: 100%;
}

#banner-ul li{
    position: absolute;
    opacity: 0;/*透明度，0就看不见了，1就是正常*/
    transition: all .5s linear;/*点击切图的效果渐变*/
}

#banner-ul li:first-child{
    /* 选中class="banner-ul“下面的第一个li */
    opacity: 1;
}

#banner-ul img{
    width:100%;
}

#banner-dot{
    position: absolute;
    bottom:20px;
    right:15px;
}

#banner-dot span{
    display: inline-block;
    vertical-align: top;

    width:6px;
    height:6px;
    border:2px solid #A7A8AA;
    background:#373734;

    border-radius:5px;
    margin-left:3px;
}

#banner-dot .active{
    background:#fff;
    border-color:#8B8B8D;
}

.neck{
    background: #fff;
    padding-top: 12px;
}

.neck-logo{
    float: left;

}
.neck-logo a{
    display: block;
    height: 88px;
    padding-top: 10px;
    box-sizing: border-box;
}

.neck-nav{
    float: left;
    margin-left: 166px;
}

.search{
    float: right;
    font-size: 0;
    /*消除搜索栏和搜索图标间的幽灵空白，但是子元素的字号也会变0，
    要单独设置*/
    margin-top: 12px;
    position: relative;
}

.neck .container{
    height: 88px;
}

.neck-logo img{
    width: 56px;
}

.neck-nav li{
    float: left;
}

.neck-nav li a{
    display: block;
    text-decoration: none;
    height: 88px;
    color:rgb(51 51 51);
    padding: 26px 10px 38px;
    box-sizing: border-box;
}

.neck-nav li:hover a{
    color: #FF6A00;
}

.neck-nav ul{
    height: 88px;
    /* line-height: 88px; */
}

.search input{
    /*input是inline-block*/
    width: 245px;
    height: 50px;
    padding: 0 10px;
    box-sizing: border-box;
    vertical-align: middle;/*跟span对齐*/
    border:1px solid rgb(224,224,224);
    transition: all .3s linear;
    outline:none;/**/
}

.search span{
    display: inline-block;
    width: 50px;
    height: 48px;
    border: 1px solid rgb(224,224,224);
    border-left:0;
    /*input跟span左右边重叠使得重叠部分加粗了
    消除一边使得重叠部分看起来像平常的1px边界一样*/
    vertical-align: middle;/*跟input对齐*/
    transition: all .3s linear;
}

.search span i{
    display: inline-block;/*i标签是内联元素*/
    width: 50px;
    height: 48px;
    background: url(../img/icon-search.png) no-repeat;
    background-size: 33%;/* 控制背景图片大小 */
    background-position: center;/* 控制背景图片的位置 */
    transition: all .3s linear;
}

.search:hover input{
    border-color: #B8B8B8;
    outline:none;
}
.search:hover span{
    border-color: #B8B8B8;
}
.search span:hover{
    background:#FF6A00;
    border-color:#FF6A00;
}
.search span:hover i{
    /* background:url(./icon-seach-active.png) no-repeat;     
     background-size:50%;    
     background-position:center; 
     这种方式要重新设置一次背景太麻烦，直接换背景图就行*/
    background-image: url(../img/icon-seach-active.png);
}

.search input:focus{
    border-color: #FF6A00;
    outline:none;/*不显示元素轮廓*/
    /*对于input、button这样的组件，没有outline:none时focus改变不了
    边界颜色等*/
}

.search input:focus + span{
    /*兄弟选择器，a+b
    a和b是兄弟，会选择a下面紧贴着的一个b*/
    border-color: #FF6A00;
}

.search-category ul{
    z-index: 1;
    position: absolute;
    background-color: #fff;
    border:1px solid #FF6A00;
    border-top: 0;/*ul跟input重叠，消除一边以消除重叠加粗*/
    width: 243px;
    display: none;/*没点击搜索栏就隐藏*/
}

.search-category li>a{
    display: block;
    font-size: 12px;
    color: #424242;
    text-decoration: none;
    padding: 6px 15px;
}

.search-category li a:hover{
    background-color: rgb(250,250,250);
}

.search input:focus + span + div ul{
    display: block;/*点击搜索栏才显示*/
}

xiaomiShop.js

window.onload=function(){

    //实现点击圆点切换图片
    //选择id为banner-dot的元素
    var bannerDots=document.getElementById("banner-dot");
    //banner-dot的子元素span的集合，用来控制idx
    var spanElems=bannerDots.children;
    //banner-ul的子元素li集合，用来控制opacity
    var liElems=document.getElementById("banner-ul").children;

    //点击圆点切换图片
    bannerDots.onclick=function(e){

        //过滤span
        if(e.target.nodeName=="SPAN"){
            //获取当前点击对象的序号
            var idx=e.target.getAttribute("data-idx");
        }

        var i;
        for(i=0;i<spanElems.length;i++){
            if(i==idx){
                //对应的span的类名改为active
                spanElems[i].className="active";
                //对应li的opacity改为1
                liElems[i].style.opacity=1;
            }
            else{
                //对应的span的类名改为空
                spanElems[i].className="";
                //对应li的opacity改为0
                liElems[i].style.opacity=0;
            }
            activeId=idx;//点击的时候才会给activeId赋值当前的idx
        }
    }

    //定时器轮播
    //通过类名选择元素，最后要用[]下标选择
    var bannerSwiper=document.getElementsByClassName("banner-swiper")[0];
    //页面加载轮播
    var activeId=0;//用来记录span自动轮播到了哪里,从0开始，与idx对应
    var bannerInterval = setInterval(function(){
        activeId++;
        if(activeId>3){
            activeId=0;//超过3回到0，一直循环0123
        }

        var i;
        for(i=0;i<spanElems.length;i++){
            if(i==activeId){
                //对应的span的类名改为active
                spanElems[i].className="active";
                //对应li的opacity改为1
                liElems[i].style.opacity=1;
            }
            else{
                //对应的span的类名改为空
                spanElems[i].className="";
                //对应li的opacity改为0
                liElems[i].style.opacity=0;
            }
        }

    },3000);

    //鼠标移入停止轮播
    bannerSwiper.onmouseenter=function(e){
        clearInterval(bannerInterval);
    }

    //鼠标移出继续轮播
    bannerSwiper.onmouseleave=function(e){
        bannerInterval = setInterval(function(){
            activeId++;
   
            if(activeId>3){
                activeId=0;//超过3回到0，一直循环0123
            }
    
            var i;
            for(i=0;i<spanElems.length;i++){
                if(i==activeId){
                    //对应的span的类名改为active
                    spanElems[i].className="active";
                    //对应li的opacity改为1
                    liElems[i].style.opacity=1;
                }
                else{
                    //对应的span的类名改为空
                    spanElems[i].className="";
                    //对应li的opacity改为0
                    liElems[i].style.opacity=0;
                }
            }
    
        },3000);
    }
}

标签：width,color,height,phone,实例,background,小米,无线,商城
From： https://www.cnblogs.com/ben10044/p/16805995.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99