xx闪购—主体选项卡

最新推荐文章于 2021-12-22 19:29:40 发布

iheyu

最新推荐文章于 2021-12-22 19:29:40 发布

阅读量293

点赞数

分类专栏： html 文章标签：主体选项卡

本文链接：https://blog.csdn.net/iheyu/article/details/103907070

版权

html 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

<div class="seckill-nav">
            <ul>
                <li class="active"><em>18:00 </em> <spent>即将开始 距开始 01:25:15</spent></li>
                <!--em标签用做强调,spen标签用做不强调-->
                <li><em>20:00</em> <spen>即将开始</spen></li>
                <li><em>22:00</em> <spen>即将开始</spen></li>
                <li><em>00:00</em> <spen>明天开始</spen> </li>
                <li><em>08:00</em> <spen>明天开始</spen></li>
            </ul>
        </div>

1.把“小米闪购”图片放到——>img里面：

D:\cc\img

2.把图片显示出来：

<div class="topbar-cart">
                <a href=""><i class="iconfont">&#xe7b2;</i> 购物车(0)<span></span></a>
            </div>
            <div class="topbar-info clearfix">
                <a href="">登录</a><span>|</span>
                <a href="">注册</a><span>|</span>
                <a href="" class="sep">消息通知</a>
             </div>
        </div>
    </div>

    <div class="header">
        <!--居中 -->
        <div class="container">
            <div class="header-logo">
                <a href="#" class="lr">小米官网</a>
            </div>
            <!-- 头部下面 的导航 -->
            <div class="header-nav">
              <!--clearfix 清浮动-->
                <ul class="nav-list clearfix">
                    <li class="nav-category">
                        <a href="">全部商品分类</a>
                    </li>
                    <li class="nav-item">
                        <a href="">小米手机</a>
                    </li>
                    <li class="nav-item">
                        <a href="">红米</a>
                    </li>
                    <li class="nav-item">
                        <a href="">电视</a>
                    </li>
                    <li class="nav-item">
                        <a href="">笔记本</a>
                    </li>
                    <li class="nav-item">
                        <a href="">空调</a>
                    </li>
                    <li class="nav-item">
                        <a href="">新品</a>
                    </li>
                    <li class="nav-item">
                        <a href="">路由器</a>
                    </li>
                    <li class="nav-item">
                        <a href="">智能硬件</a>
                    </li>
                    <li class="nav-item">
                        <a href="">服务</a>
                    </li>
                    <li class="nav-item">
                        <a href="">社区</a>
                    </li>
                </ul>
            </div>
            
            <div class="header-search">
                
                <from action="" class="search-form">
                    <input type="search" name="keyword" class="search-text" >
                    <input type="submit" value="&#xe632;" class="search-btn iconfont">
                </from>

           </div>  
           
        </div>

    </div>

<div class="seckill">
    <div class="seckill-head"></div>
    <div class="seckill-nav"></div>

</div>

/*seckill主体和选项卡*/
.seckill {
    background-color: #f5f5f5;
}
/*图片当成背景图*/  
.seckill-head {
    margin-top: 19px;
    height: 170px;
    background: url(../img/seckill-head.jpg) no-repeat 50% 0;
}

在浏览器中显示效果：

3.做小米选项卡：

3.1.用ul和li把选项卡内容包裹起来：

编辑(E)——>选择最下面的"Emmet"——>选择" 输入缩写包围个别行"——>输入ul>li* 回车；

1  shift+Tab键（前移）

3.2.加样式是鼠标点击变红：

<div class="seckill">
    <div class="seckill-head"></div>
    <!--container控制所有内容居中-->
    <div class="container">
         <div class="seckill-nav">

         <ul>
             <li>18:00 即将开始</li>
             <li>距开始 01:25:15</li>
             <li>20:00 即将开始</li>
             <li>22:00 即将开始</li>
             <li>00:00 明天开始</li>
             <li>08:00 明天开始</li>
         </ul>

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

</div>

在浏览器中显示效果：

3.2.1.

/*seckill主体和选项卡*/
.seckill {
    background-color: #f5f5f5;
}
/*图片当成背景图*/  
.seckill-head {
    margin-top: 19px;
    height: 170px;
    background: url(../img/seckill-head.jpg) no-repeat 50% 0;
}  
.seckill-nav ul {
    height: 68px;
    background: #414141;
}
.seckill-nav li {
    display: block;
    float: left;
    color: #fff;
    width: 20%;
    height: 68%;
    line-height: 68px;
    text-align: center;
    /*鼠标移动上去变小手*/
    cursor: pointer;
}

在浏览器中显示效果：

****bug

.seckill-nav li {
    display: block;
    float: left;
    color: #fff;
    width: 20%;
    height: 68%;
    line-height: 68px;
    text-align: center;
    /*鼠标移动上去变小手*/
    cursor: pointer;
}
.seckill-nav .active{
    background-color: #f1393a;
}

在浏览器中显示效果：

.seckill-nav li {
    display: block;
    float: left;
    color: #fff;
    width: 20%;
    ******
    height: 68px;
    ****
    line-height: 68px;
    text-align: center;
    /*鼠标移动上去变小手*/
    cursor: pointer;
}
.seckill-nav .active{
    background-color: #f1393a;
}

在浏览器中显示效果：

3.3.上移和文字的样式：

3.3.1上移：

*seckill主体和选项卡*/
.seckill {
    background-color: #f5f5f5;
}
/*图片当成背景图*/  
.seckill-head {
    margin-top: 19px;
    height: 170px;
    background: url(../img/seckill-head.jpg) no-repeat 50% 0;
}  
/*整体上移*/
.seckill-nav {
    margin: -68px 0 22px;
}

在浏览器中显示效果：

3.3.2.修改文字样式：

<ul>
            <!--active鼠标点那里,那里就可以active-->
            <li class="active"><em>18:00</em><span>即将开始距开始01:25:15</span></li>
            <!--em标签用做强调-->
            <li><em>20:00</em> <span>即将开始</span></li>
            <li><em>22:00</em> <span>即将开始</span></li>
            <li><em>00:00</em> <span>明天开始</span></li>
            <li><em>08:00</em> <span>明天开始</span></li>
        </ul>

.seckill-nav li em {
    display: inline-block;
    /*去掉斜体*/
    font-style: normal;
    font-size: 23px;
    /*跟字体一样大小*/
    line-height: 1;
    /*垂直居中*/
    vertical-align: middle;
}
.seckill-nav .active{
    background-color: #f1393a;
}

在浏览器中显示效果：

3.3.3.

.seckill-nav li em {
    display: inline-block;
    /*去掉斜体*/
    font-style: normal;
    font-size: 23px;
    /*跟字体一样大小*/
    line-height: 1;
    /*垂直居中*/
    vertical-align: middle;
}
.seckill-nav li span {
    display: inline-block;
    text-align: left;
    line-height: 1;
    vertical-align: middle;
    font-size: 14px;
}
.seckill-nav .active{
    background-color: #f1393a;
}

在浏览器中显示效果：

.seckill-nav li em {
    display: inline-block;
    /*去掉斜体*/
    margin-left: 30px;
    font-style: normal;
    font-size: 23px;
    /*跟字体一样大小*/
    line-height: 1;
    /*垂直居中*/
    vertical-align: middle;
}
.seckill-nav li span {
    display: inline-block;
    margin-left: 15px;
    text-align: left;
    line-height: 1;
    vertical-align: middle;
    font-size: 14px;
}

在浏览器中显示效果：

3.3.4.最终调整：

<ul>
            <!--active鼠标点那里,那里就可以active-->
            <li class="active"><em>18:00</em><span><em>即将开始<br>距开始01:25:15</em></span></li>
            <!--em标签用做强调-->
            <li><em>20:00</em><span>即将开始</span></li>
            <li><em>22:00</em><span>即将开始</span></li>
            <li><em>00:00</em><span>明天开始</span></li>
            <li><em>08:00</em><span>明天开始</span></li>
        </ul>

.seckill-nav .active{
    background-color: #f1393a;
}
.seckill-nav ul li span em {
    display: inline-block;
    font-size: 14px;
    margin-left: 0;
    font-style: normal;
    /*字体对齐方式*/
    text-align: left;
    line-height: 20px;
}

在浏览器中显示效果：