CSS——小米官网之商城初练习

Bonsoir777

已于 2022-07-04 23:28:49 修改

阅读量144

点赞数 2

分类专栏： css/css3 文章标签： css css3 html 前端

于 2022-07-03 23:08:29 首次发布

本文链接：https://blog.csdn.net/Bonsoir777/article/details/125590694

版权

css/css3 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

文章目录

前言
一、输入框区域
二、底部工具栏
总结

前言

最近在练习写小米商城，想了很久不知道写什么，那就把实现过程记录下来吧……

一、输入框区域

HTML结构

     <!-- 右侧搜索框 -->
            <div class="search">
                <form action="">
                    <input type="text" value="  Readmi Note 9 Pro">
                    <div class="textlist">
                        <ul>
                            <li>小米11</li>
                            <li>笔记本</li>
                            <li>Note 9</li>
                            <li>耳机</li>
                            <li>小米10</li>
                            <li>加湿器</li>
                            <li>洗衣机</li>
                            <li>全部商品</li>
                        </ul>
                    </div>
                    <button><i class="fas fa-search"></i></button>
                </form>
            </div>

CSS样式

/* header 右侧搜索框 */
.nav-head .header .search{

    height: 50px;
    line-height: 50px;
    position: relative;
    width: 296px;
    margin: 25px auto;
    float: left;
    background-color: red;
}
.header .search input{
    color: #757575;
    float: left;
    /* margin:25px auto; */
    width: 241px;
    height: 49px;
    padding: 0px;
    background-color: white;
    border: 1px #E3E3E3 solid;
    outline: none;
    border-right: none;
}
.header .search button{
    font-size: 18px;
    color: #616161;
    background-color: white;
    float: left;
    /* margin: 25px 0px; */
    width: 52px;
    line-height: 49px;
    padding: 0px;
    border: 1px #E3E3E3 solid;
    /* border-left: none; */
    box-sizing: content-box;
    outline: none;
}
.header .search:hover input,.search:hover button{
    border-color: #B0B0B0;
}
.header .search button:hover{
    color: white;
    background-color: #FF6700;
    border: 1px #ff6700 solid;
}
/* 设置文本框获取焦点后的变化 */
.header .search input:focus
{
    border: 1px #FF6700 solid;
    border-right: none;
}
.header .search input:focus + .textlist{
    display: block;
}
.header .search input:focus + .textlist + button{
    border: 1px #FF6700 solid;
    /* border-left: none; */
}
/* 文本框获取焦点时的弹框 */
.textlist{
    display: none;
    border: 1px #FF6700 solid;
    height: 242px;
    position: absolute;
    width: 241px;
    top: 50px;
    background-color: white;
    z-index: 2;
    /* border: 1px #FF6700 solid; */
}
.header .search .textlist li{
    font-size: 12px;
    color: #424242;
    line-height: 30px;
    margin-left: 15px;
}

二、底部工具栏

1.HTML结构

  <!-- 底部工具栏 -->
    <div class="bottom">
        <div class="bottom-nav w">
            <ul class="left-bar">
                <li>
                    <a href="">
                        <i class="iconfont">&#xe63a;</i>
                        <p>小米秒杀</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont">&#xe613;</i>
                        <p>企业团购</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont">&#xe632;</i>
                        <p>F码通道</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont">&#xe637;</i>
                        <p>米粉卡</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont">&#xe71a;</i>
                        <p>以旧换新</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont">&#xe6a8;</i>
                        <p>话费充值</p>
                    </a>
                </li>
                <ul class="line-row">
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <ul class="line-col">
                    <li></li>
                    <li></li>
                </ul>
            </ul>
            <div class="img-list">
                <img src="./XiaomiProject/img/1.jpg" alt="">
                <img src="./XiaomiProject/img/2.jpg" alt="" class="img2">
                <img src="./XiaomiProject/img/3.jpg" alt="">
            </div>
        </div>
    </div>

2.CSS样式

/* 底部工具栏 */
.bottom{
    height: 170px;
    margin-top: 14px;
    /* position: relative; */
}
.bottom .bottom-nav{
    position: relative;
    height: 170px;
}
.bottom .bottom-nav .left-bar{
    position: relative;
    width: 234px;
    height: 170px;
    float: left;
    margin-right: 14px;
    background-color: #5f5750;
}

.bottom .bottom-nav .left-bar li{
    float: left;
    height: 85px;
    width: 78px;
    text-align: center;
}
.bottom .bottom-nav .left-bar li i{
    color: #CFCCCA;
    display: block;
    height: 23px;
    margin-top: 20px;
    margin-bottom: 7px;
    font-size: 22px;
}
.bottom .bottom-nav .left-bar li p{
    font-size: 10px;
    color: #CFCCCA;
}
.bottom .bottom-nav .left-bar li:hover p,
.bottom .bottom-nav .left-bar li:hover i{
    color: white;
}

/* 工具框内部白线 */
.bottom .bottom-nav .left-bar .line-row li{
    position: relative;
    top: -84px;
    height: 1px;
    width: 64px;
    margin: 0px 7px;
    float: left;
    background-color: #665E57;
}
.bottom .bottom-nav .left-bar .line-col li{
    position: relative;
    top: -170px;
    height: 70px;
    width: 77px;
    margin: 6px 78px;
    margin-top: 8px;
    border: 1px #665E57 solid;
    border-top: none;
    border-bottom: none;
    z-index:none;
}
.bottom-nav .img-list{
    float: left;
    width: 978px;
}
.bottom-nav .img-list img{
    width: 316px;
}
.bottom-nav .img-list .img2{
    margin: 0px 11px;
}

.tool{
    width: 26px;
    height: 206px;
    position: fixed;
    bottom: 100px;
    right: 50%;
    margin-right: -639px;
    z-index: 1;
}
.tool ul li i{
    float: left;
    border: 1px #F5F5F5 solid;
    font-size: 20px;
    width: 26px;
    line-height: 41px;
    margin-top: -1px;
    text-align: center;
    background-color: white;
}
.tool ul li:hover{
    color: #FF6700;
}

今天就先写这两块儿吧，改天再分享其他部分