19.小米商城练习

小米商城

实现目标

实现代码

CSS

 

/* 主页index.html的样式 */

/* 顶部导航条外部容器 */
.top-bar-wrapper {
    width: 100%;
    height: 40px;
    /* 垂直居中 */
    line-height: 40px;
    background-color: #333333;
}

/* 设置超链接 */
.top-bar a {
    font-size: 12px;
    color: #B0B0B0;
    /* 将a设置为块元素，实现整片区域都可点击 */
    display: block;
}

/* 设置超链接 触发效果*/
.top-bar a:hover {
    color: #fff;
}

/* 设置中间分割线 */
.top-bar .link {
    margin: 0 .3em;
    color: #424242;
    vertical-align: middle;
}

/* 顶部左侧导航栏*/
.service,
.top-bar li {
    float: left;
}

/* 设置右侧导航栏 */
.shop-cart,
.user-infor {
    float: right;
}

/* 设置触发“下载app”时的白色三角 */
.app {
    position: relative;
}

.app a::after {
    content: '';
    display: block;
    border: 10px solid;
    border-color: #fff transparent;
    border-top: none;
    position: absolute;
    top: 31px;
    left: 15px;
    display: none;
}

/* 设置触发“下载app”时的二维码展示 */
.bicode {
    /* height: 150px; */
    /* 将默认高度设置为0 */
    height: 0px;
    /* 将元素溢出部分隐藏 */
    overflow: hidden;
    width: 125px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    /* 重置行高，截断导航栏行高传递 */
    line-height: 1;
    text-align: center;
    /* 默认状态下隐藏 */
    /* display: none; */
    position: absolute;
    top: 40px;
    left: -35px;
    z-index: 9999;

    /* 设置高度经过3s加载完整 */
    transition: height 1s;
}

.app:hover .bicode {
    /* 下载app，被触发时替换高度为150px */
    height: 150px;
}

.app:hover .bicode,
.app:hover a::after {
    /* 触发时显示 */
    display: block;
}

.app .bicode img {
    width: 90px;
    height: 90px;
    margin: 17px;
}

.app .bicode span {
    display: block;
    font-size: 15px;
    color: #333333;
    margin-top: -10px;
}

/* 购物车 */
.shop-cart {
    width: 120px;
    height: 40px;
    font-size: 50px;
    text-align: center;
    background-color: #424242;
    margin-left: 25px;
    position: relative;
}

.shop-cart:hover a {
    background-color: #fff;
    color: orange;
}

.shop-cart i {
    /* 购物车图表距离 */
    margin-right: 2px;
}

/* 购物车列表 */
.cart-list {
    width: 316px;
    height: 100px;
    line-height: 100px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    position: absolute;
    left: -196px;
    z-index: 9999;
    display: none;
}

.shop-cart a:hover .cart-list {
    display: block;
}

/* 设置中间外部容器header-wrapper */
.header-wrapper {
    position: relative;
}

/* 设置中间header */
.header {
    height: 100px;
}

/* 设置小米logo */
.logo {
    height: 55px;
    width: 55px;
    margin-top: 22px;
    float: left;
    /* 开启相对定位 */
    position: relative;
    /* 开启溢出隐藏 */
    overflow: hidden;
    /* 隐藏logo中的‘小米官网’字体 */
    text-indent: -5px;
}

.logo .home {
    height: 55px;
    width: 55px;
    color: white;
    background-color: #ff6900;
    font-size: 30px;
    text-align: center;
    line-height: 55px;
    /* 开启绝对定位 */
    position: absolute;
    left: -55px;
    /* 将left延迟至0.1s */
    transition: left 0.1s;
}

.logo .mi {
    height: 55px;
    width: 55px;
    background-color: #ff6900;
    background-image: url(../img/mi.png);
    background-position: center;
    background-size: cover;
    /* 绝对定位 */
    position: absolute;
    left: 0;
    /* 将left延迟至0.1s */
    transition: left 0.1s;
}

.logo:hover .mi {
    left: 55px;
}

.logo:hover .home {
    left: 0px;
}

/* 设置头部中间导航条 */
.nav-wrapper {
    float: left;
    line-height: 100px;
}

.nav-wrapper .nav {
    padding-left: 20px;
}

.nav-wrapper li {
    float: left;
    font-size: 17px;
    padding-left: 20px;
}

.nav-wrapper a {
    display: block;
    color: #333333;
}

.nav-wrapper a:not(.left-item):hover {
    color: #ff6700;
}

.nav-wrapper .all-goods {
    /* 隐藏全部商品分类，但仍会占据原来位置 */
    visibility: hidden;
    position: relative;
}

/* 商品下拉框 */
.nav-wrapper .goods-info {
    height: 0px;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 100px;
    left: 0px;
    z-index: 999;
    transition: height 0.3s;
}

.nav-wrapper li:not(.all-goods):hover~.goods-info,
.goods-info:hover {
    height: 280px;
    border-top: 1px solid #ccc;
    box-shadow: 0px 8px 10px rgba(0, 0, 0, .15);
}

/* 设置顶部搜索框容器 */
.search-wrapper {
    width: 300px;
    height: 50px;
    float: right;
    line-height: 50px;
    margin-top: 25px;
}

.search-wrapper .search-inp {
    float: left;
    width: 225px;
    height: 50px;
    padding: 0 10px;
    border: 0px solid transparent;
    outline: 1px solid #e0e0e0;
}

.search-wrapper .search-but {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 0%;
    background-color: #ffffff;
    border: 0px solid transparent;
    outline: 1px solid #e0e0e0;
}

.search-inp:focus,
.search-inp:focus~.search-but {
    outline: 1px solid #ff6700;
}

.search-but:hover {
    background-color: #ff6900;
    outline: 0px solid #ff6900;
}

/* 左侧导航条 */
.nav-left {
    width: 234px;
    height: 440px;
    padding-top: 20px;
    background-color: rgba(105, 101, 101, 0.6);
    line-height: 1;
    /* 将继承自父类的不可见，设置为可见 */
    visibility: visible;
    float: left;
    position: absolute;
    left: -75px;
    z-index: 9999;
}

.nav-left li {
    width: 100%;
    line-height: 40px;
    float: left;
    padding-left: 0;
}

.nav-left a {
    display: block;
    height: 42px;
    color: #fff;
    font-size: 14px;
    margin-left: 30px;
}

.nav-left a::after {
    content: '\f105';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    float: right;
    margin-right: 20px;
}

.nav-left li:hover {
    background-color: #ff6700;
}

/* 左侧导航条-商品分类展示 */
.goods-classify {
    width: 992px;
    height: 460px;
    background-color: rgba(18, 237, 47, 0.5);
    position: absolute;
    top: 0px;
    left: 234px;
    font-size: 50px;
    /* 隐藏商品分类框 */
    display: none;
}

.nav-left:hover .goods-classify {
    display: block;
}

/* 设置主体区域-轮播图 */
.banner {
    height: 460px;
    width: 1226px;
    position: relative;
    background-color: red;
}

.banner img {
    width: 1226px;
    height: 460px;
    position: absolute;
}

.banner .roll-point {
    list-style: circle;
    position: absolute;
    right: 0px;
    bottom: 20px;
}

.banner .roll-point a {
    width: 6px;
    height: 6px;
    float: left;
    background-color: #919192;
    background-clip: content-box;
    margin-right: 10px;
    border-radius: 50%;
    border: 2px solid #a7a8aa;
}

.banner .roll-point .active,
.banner .roll-point a:hover {
    background-color: #fff;
}

/* 设置图片左右指针-雪碧图 */
.prev-next a {
    width: 41px;
    height: 69px;
    background-image: url(./left-right.jpeg);
    /* 设置图片唯一 */
    background-repeat: no-repeat;
    /* 调整背景图片位置 */
    background-size: auto 85px;
    /* 设置图片偏移量 */
    background-position: -11px -5px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.prev-next .prev {
    left: 234px;
    background-position: -200px -5px;
}

.prev-next .next {
    right: 0;
    background-position: -295px -5px;
}

.prev-next .prev:hover {
    background-position: -11px -5px;
}

.prev-next .next:hover {
    background-position: -106px -5px;
}

/* 设置去顶部导航栏 */
.back-top {
    width: 26px;
    height: 206px;
    background-color: red;
    position: fixed;
    margin-top: -120px;
    right: 50%;
    margin-right: -639px;
    z-index: 9999;
}

/* 设置下部分广告图片 */
.ad {
    margin-top: 14px;
}

.ad .shortcut {
    width: 234px;
    height: 170px;
    background-color: #5f5750;
    float: left;
}

.ad .shortcut li {
    width: 76px;
    height: 82px;
    float: left;
    position: relative;
}

/* 设置左下角功能方块中间的分隔线 */
/* 上分隔线 */
.ad .shortcut li::before {
    content: '';
    width: 64px;
    height: 2px;
    background-color: #665e57;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: 2px;
}
/* 右分隔线 */
.ad .shortcut li::after {
    content: '';
    width: 2px;
    height: 70px;
    background-color: #665e57;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
    margin-top: 10px;
}

.ad .shortcut a {
    width: 70px;
    height: 64px;
    display: block;
    color: #cfccca;
    text-align: center;
    padding-top: 18px;
}

.ad .shortcut a:hover {
    color: #fff;
}


.ad .shortcut i {
    font-size: 20px;
    display: block;
    text-align: center;
}

.ad-item {
    float: left;
}

.ad-item li {
    margin-right: 15px;
    float: left;
}

.ad-item li:last-child {
    margin-left: 0;
}

.ad-item img {
    width: 315px;
}

HTML

<!DOCTYPE html>
<html lang="">

<head>
    <title>小米商城 - Xiaomi 12、Redmi K50、MIX FOLD，小米电视官方网站</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入重置样式 -->
    <link href="css/reset.css" rel="stylesheet">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="fontawesome/css/all.css">
    <!-- 引入当前页面样式 -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 顶部导航条 -->
    <!-- 顶部导航条外部容器 -->
    <div class="top-bar-wrapper">
        <!-- 内部容器 -->
        <div class="top-bar interW clearfix">
            <!-- 左侧导航 -->
            <ul class="service">
                <li><a href="javascript:;">小米官网</a></li>
                <li class="link">|</li>
                <li><a href="javascript:;">小米商城</a></li>
                <li class="link">|</li>
                <li><a href="javascript:;">MIUI</a></li>
                <li class="link">|</li>
                <li><a href="javascript:;">loT</a></li>
                <li class="link">|</li>
                <li><a href="javascript:;">云服务</a></li>
                <li class="link">|</li>
                <li><a href="javascript:;">天星数科</a></li>
                <li class="link">|</li>
                <li><a href="javascript:;">有品</a></li>
                <li class="link">|</li>
                <li><a href="javascript:;">小爱开放平台</a></li>
                <li class="link">|</li>
                <li><a href="javascript:;">企业团购</a></li>
                <li class="link">|</li>
                <li><a href="javascript:;">资质证照</a></li>
                <li class="link">|</li>
                <li><a href="javascript:;">协议规则</a></li>
                <li class="link">|</li>
                <li class="app">
                    <a href="javascript:;">
                        下载app
                        <div class="bicode">
                            <img src="img/bicode.png" alt="">
                            <span>小米商城app</span>
                        </div>
                    </a>
                </li>
                <li class="link">|</li>
                <li><a href="javascript:;">SelectLocation</a></li>
            </ul>
            <!-- 购物车 -->
            <div class="shop-cart">
                <a href="javascript:;">
                    <i class="fas fa-shopping-cart"></i>
                    <span>购物车(0)</span>
                    <div class="cart-list">
                        <span>购物车中还没有商品，赶紧选购吧!</span>
                    </div>
                </a>
            </div>
            <!-- 用户登录注册 -->
            <ul class="user-infor">
                <li><a href="javascript:;">登录</a></li>
                <li class="link">|</li>
                <li><a href="javascript:;">注册</a></li>
                <li class="link">|</li>
                <li><a href="javascript:;">消息通知</a></li>
            </ul>
        </div>
    </div>

    <!-- 创建一个头部外部容器 -->
    <div class="header-wrapper">
        <div class="header interW">
            <!-- 创建一个logo -->
            <h1 class="logo">
                <!-- '/'可以跳转到主页 -->
                小米官网
                <a class="home fas fa-home" href="/"></a>
                <a class="mi" href="/"></a>
            </h1>

            <!-- 创建一个中间导航条容器 -->
            <div class="nav-wrapper">
                <ul class="nav">
                    <li class="all-goods">
                        <a href="javascript:;">全部商品分类</a>
                        <ul class="nav-left">
                            <li>
                                <a class="left-item" href="#">手机 电话卡</a>
                            </li>
                            <li>
                                <a class="left-item" href="#">手机 电话卡</a>
                            </li>
                            <li>
                                <a class="left-item" href="#">手机 电话卡</a>
                            </li>
                            <li>
                                <a class="left-item" href="#">手机 电话卡</a>
                            </li>
                            <li>
                                <a class="left-item" href="#">手机 电话卡</a>
                            </li>
                            <li>
                                <a class="left-item" href="#">手机 电话卡</a>
                            </li>
                            <li>
                                <a class="left-item" href="#">手机 电话卡</a>
                            </li>
                            <li>
                                <a class="left-item" href="#">手机 电话卡</a>
                            </li>
                            <li>
                                <a class="left-item" href="#">手机 电话卡</a>
                            </li>
                            <li>
                                <a class="left-item" href="#">手机 电话卡</a>
                            </li>

                            <!-- 商品分类展示 -->
                            <div class="goods-classify">
                                这里有一些内容.........
                            </div>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:;">Xiaomi手机</a>
                    </li>
                    <li>
                        <a href="javascript:;">Redmi红米</a>
                    </li>
                    <li>
                        <a href="javascript:;">电视</a>
                    </li>
                    <li>
                        <a href="javascript:;">笔记本</a>
                    </li>
                    <li>
                        <a href="javascript:;">家电</a>
                    </li>
                    <li>
                        <a href="javascript:;">路由器</a>
                    </li>
                    <li>
                        <a href="javascript:;">智能硬件</a>
                    </li>
                    <li>
                        <a href="javascript:;">服务</a>
                    </li>
                    <li>
                        <a href="javascript:;">社区</a>
                    </li>

                    <!-- 设置商品下拉框 -->
                    <div class="goods-info">

                    </div>
                </ul>
            </div>

            <!-- 创建搜索框容器 -->
            <div class="search-wrapper">
                <form class="search" action="#">
                    <input class="search-inp" type="text">
                    <button class="search-but">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- 创建主体内容容器 -->
    <div class="main-wrapper">
        <div class="main interW">
            <!-- 创建轮播图 -->
            <div class="banner">
                <a href="javascript:;">
                    <img src="./img/main04.jbg" alt="智能空气炸烤箱">
                </a>
                <a href="javascript:;">
                    <img src="./img/main02.webp" alt="智能空气炸烤箱">
                </a>
                <a href="javascript:;">
                    <img src="./img/main03.webp" alt="智能空气炸烤箱">
                </a>
                <a href="javascript:;">
                    <img src="./img/main01.webp" alt="智能空气炸烤箱">
                </a>

                <!-- 创建轮播图圆点 -->
                <div class="roll-point">
                    <a class="active" href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>

                <!-- 创建图片两端左右箭头 -->
                <div class="prev-next">
                    <a class="prev"></a>
                    <a class="next"></a>
                </div>
            </div>

            <!-- 创建一个去顶部的导航栏 -->
            <div class="back-top">
            </div>

            <!-- 创建广告容器 -->
            <div class="ad interW">
                <ul class="shortcut">
                    <li>
                        <a href="#">
                            <i class="fas fa-clock"></i>
                            小米秒杀
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-city"></i>
                            企业团购
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-baby-carriage"></i>
                            F码通道
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-sd-card"></i>
                            米粉卡
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-money-bill-transfer"></i>
                            以旧换新
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-money-bill-trend-up"></i>
                            话费充值
                        </a>
                    </li>
                </ul>

                <ul class="ad-item">
                    <li>
                        <a href="#">
                            <img src="./img/ad01.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/ad02.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/ad03.jpg" alt="">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

 

效果展示：

 

 

 

遇到的问题

问题一

如下图所示的白色三角如何实现？

 

问题分析：

这个白色的三角可以利用伪元素：：after或：：before加在下载app的下面，或者加在二维码块的上面，

再利用position定位移动到合适位置。

那如何问题来了，白色三角该如何做出来呢？

 

问题解决：

方法一：利用盒子和边框的组合，去掉顶部边框，左右设为透明。

   .box1 {

            width:0px;

            height:0px;

            border:10pxsolid;

            border-color:redtransparentbluetransparent;

            border-top:none;

        }

 

效果：

 

方法二：没有第一种方法麻烦，首先得到一个实心方框，再旋转45°也能实现。

.box2 {

            width:0px;

            height:0px;

            border:10pxsolid;

            border-color:blueredredblue;

            /* 以中心顺时针旋转45° */

            transform:rotate(45deg);

        }

 

效果：

 

 

问题二

下图小米商城app为什么被挤下来了呢（图片和文字互为兄弟，在同一个div中）

 

问题分析：

这里的图片和文字的父元素其实和下载app同为兄弟元素，都隶属于导航框这一父元素下。

同样的也都继承了导航框的行高，而图片和文字也子承父业继承了导航框的行高，导致溢出。

 

解决方法：

在图片和文字的父元素上重置行高，截断导航栏的行高传递。

CSS代码

 

/* 设置触发“下载app”时的二维码展示 */

.app.bicode {

    width:125px;

    height:150px;

    box-shadow:0010pxrgba(0,0,0,.5);

    /* 重置行高，截断导航栏行高传递 */

    line-height:1;

}

 

HTML代码：

 

<liclass="app">

  <ahref="javascript:;">

     下载app

      <divclass="bicode">

          <imgsrc="img/bicode.png"alt="">

          <span>小米商城app</span>

      </div>

  </a>

</li>

 

效果

 

问题三

下图中点击白色三角，下载app不亮了。

 

问题分析：

这个三角在制作时是在下载app后用伪元素::after追加上去的，按理说应该和下载app相同效果的。

不应该触发它下载app不亮啊。是不是追加错位置了呢？

让我我们看一下HTML

<liclass="app">

<ahref="javascript:;">

      下载app

      <divclass="bicode">

          <imgsrc="img/bicode.png"alt="">

          <span>小米商城app</span>

      </div>

</a>

</li>

再看一下CSS

.app::after {

    content:'';

    display:block;

    border:10pxsolid;

    border-color:#ffftransparent;

    border-top:none;

    position:absolute;

    top:31px;

    left:15px;

    display:none;

}

果然是应为追加错了位置，应该是追加在a上的，结果却追加在了其父元素app上。

可为题又来了，我们应该是鼠标移动到下载app所在li整个区域下载app亮，而追加的白三角形也是li的一部分也继承li的所有属性，可点它为何下载app不亮呢？

打开查看器查看，可以看到li整个区域都被a所覆盖，所以想触发li是不可能的，所以前面必然是对li下的a做了触发处理。li没有做任何触发效果，所以白三角追加在li的后果就是触发没效果下载app不亮。

 

问题解决：

将 .app:: after{ 改为.app a:: after{

.appa::after {

    content:'';

    display:block;

    border:10pxsolid;

    border-color:#ffftransparent;

    border-top:none;

    position:absolute;

    top:31px;

    left:15px;

    display:none;

}

.app:hover.bicode,

.app:hovera::after {

    /* 触发时显示 */

    display:block;

}

 

效果

 

问题四

如何实现二维码图片上下缓慢伸缩的效果？

 

问题分析：

二维码伸缩必然和高度有关，既然是与高度有关那我们该如何控制高度缓慢增加或减少哪？

 

问题解决：

引出transition：方法，实现二维码高度的缓慢上升下降效果。

/* 设置高度经过3s加载完整 */

transition: height 3s;

 

代码

.bicode {

    /* height: 150px; */

    /* 将默认高度设置为0 */

    height: 0px;

    /* 将元素溢出部分隐藏 */

    overflow: hidden;

    width:125px;

    box-shadow:0010pxrgba(0,0,0,.5);

    /* 重置行高，截断导航栏行高传递 */

    line-height:1;

    text-align:center;

    /* 默认状态下隐藏 */

    /* display: none; */

    position:absolute;

    top:40px;

    left:-35px;

    /* 设置高度经过3s加载完整 */

    transition: height 3s;

}

.app:hover.bicode {

    /* 下载app，被触发时替换高度为150px */

   height: 150px;

}

红色粗体代码缺一不可

 

效果

 

问题五

不能通过行高line-heigh:去设置a另起垂直居中，应为a被设置成了块元素。但是会继承给a的子元素，如果a的子元素中有行内元素那么其行高被改变，相应的位置也会改变。

而且不论a还是溢出的a的子元素都可以触发（父元素属性的继承）

/* 设置中间header */

.header {

    height:100px;

    line-height: 100px;

    background-color:#B0B0B0;

}

.logo {

    float:left;

}

.logoa {

    display: block;

    height:55px;

    width:55px;

    background-color:red;

    /* margin-top: 22px; */

}

 

.logoimg {

    height:55px;

    width:55px;

}

 

解决方法：

.logoa {

    display:block;

    height:55px;

    width:55px;

    background-color:red;

    margin-top: 22px;

}

 

效果

 问题六

如何设置全部商品分类隐藏而又占据页面位置呢？

使用visibility: hidden;

 

问题七

如何让红色长条始终紧贴在图片最右侧而不随窗口变化脱离原来位置？

 

问题分析：

布局等式  left + margin-left + width + margin-right + right = 视口宽度

原图等式  auto + 0 + 26px + 0 + 60px =  视口宽度（margin不设置默认为0）

根据原图等式可知道，我们移动视口left会自动改变宽度，相当于红色长条左边一直在变化，而右边始终保持不变。

该如何将红色长条牢牢贴在图片左下角呢？

由于网页中间内容部分的宽度是固定不变的，那我们是不是可以利用百分比将红色长条固定在视口中间呢？

布局等式  left + margin-left + width + margin-right + right = 视口宽度

原图等式  auto + 0 + 26px + 0 + 50% =  视口宽度（margin不设置默认为0，left默认auto）

此时红色长条左右两边都可以自适应变化，红色长条始终保持在视口50%处。

那问题是怎么移动红色长条到右边去呢？

• 直接margin-left吗？

不可以！应为红色长条定死了50%，而margin-left和left=auto都在左侧，你增我减无论如何变化最终都没变化。

• 设置margin-right吗？

可以 应为右侧right写死了不会出现你增我减的情况，margin-right减少left就增加，右减左加红色长条右移。

 

代码

/* 设置去顶部导航栏 */

.back-top {

    width:26px;

    height:206px;

    background-color:red;

    position:fixed;

    margin-top:-120px;

   right: 50%;

    margin-right: -639px;

    z-index:9999;

}

 

效果

 

问题八

图中这些分隔线如何实现呢？

 

问题分析：

看到这两条线，首先我们想到的是边框，但是这两条线并不闭合，显然边框做不到。

那只能在这些块身上追加某些元素了，提到追加元素必然想到：：after 和 ：：before，没错就用他俩。

改变他们的高和宽就能变成线条，再移动他们的位置实现最终效果。

注意：追加的线条必须设置成块元素或者开启定位才能显示出来。

 

代码：

/* 设置左下角功能方块中间的分隔线 */

/* 上分隔线 */

.ad.shortcutli::before {

    content:'';

    width:64px;

    height:2px;

    background-color:#665e57;

    position:absolute;

    top:0;

    left:0;

    right:0;

    margin:0auto;

    margin-top:2px;

}

/* 右分隔线 */

.ad.shortcutli::after {

    content:'';

    width:2px;

    height:70px;

    background-color:#665e57;

    position:absolute;

    top:0;

    bottom:0;

    right:0;

    margin:auto0;

    margin-top:10px;

}

 

效果：