【考拉海购网站】之【搜索框那一栏】

在这里插入图片描述

第一步，分析布局

在这里插入图片描述
这是布局的具体情况 >>>

左边一个劳拉网的logo图案
中间一个圆角边的div，div里面包裹了一个没有边线的input输入框和一个放大镜搜索按钮
在这里插入图片描述
右边一个圆角的购物车提交框按钮

接上一篇文章(电商项目实战第一节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【顶部导航】)的代码后面开始写

第二步，在html代码里面补全需要的标签

这些标签的布局结构是根据个人对网页的分析得来的，为了减少文章内容过长造成阅读疲劳，我会把分析过程注释在代码里面 >>>

   <!-- 主要内容 -->
    <div class="container">
        <!-- 搜索栏那一栏 -->
        <div class="searchBar">
            <a href=""><img src="./logo.png" alt=""></img></a>
            <a href="" class="shopCar"><i class="shopIcon"></i> 购物车</a>
            <div class="searchText">
                <span class="zoomIcon"></span>
                <input type="text" placeholder="数据库爆破工具">
                <span class="searchButton"><i></i></span>
            </div>
        </div>
    </div>

在这里插入图片描述

第三步，写CSS样式美化html

/* ---------------搜索框那一栏---------------------*/
/* 搜索框整体 */
.searchBar {
    width: 1090px;
    height: 100px;
    margin: 0 auto;
    margin-top: -12px;
}

/* 左边的logo图案，是一个超链接 */
.searchBar a {
    display: block;

}

/* 设置左边logo图案 */
.searchBar a img {
    float: left;
    width: 210px;
    height: 68px;
    cursor: pointer;
    margin-top: 20px;
    z-index: 9;
}

/* 搜索输入框部分 */
.searchText {
    float: right;
    width: 510px;
    height: 36px;
    padding-left: 1px;
    margin-top: 28px;
    margin-right: 62px;
    background-color: #ffffff;
    border: 2px solid #ff2337;
    border-radius: 40px;
}

/* 输入框样式设置 */
.searchText input[type="text"] {
    display: block;
    width: 80%;
    margin-top: 9px;
    margin-left: 36px;
    border: 0px;
}

/* 输入框的提示字段字体样式，这里设置为italic，表示斜体 */
.searchText input[type="text"]::placeholder {
    font-style: italic;
}

/* 当时点击输入框时，输入框默认的外边框会别隐藏 */
.searchText input[type="text"]:focus {
    outline: none;
}

/* 购物车 */
.shopCar {
    display: block;
    float: right;
    width: 106px;
    height: 36px;
    margin-top: 28px;
    margin-right: 75px;
    line-height: 36px;
    border: 2px solid #ff1e32;
    border-radius: 36px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
}

/* 当鼠标移动到购物车标签上时，购物车标签的字体颜色和底色的变化 */
.shopCar:hover {
    color: #ff1e32;
    background-color: #fff4f5;
}

/* 购物车icon图标 */
.shopIcon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 2px;
    margin-bottom: -5px;
    background: url(./购物车.png) no-repeat 0 0;
}


.searchText img {
    transform: scale(0.5);
    border: 1px solid;
    margin-top: -4px;
    background-color: rgb(214, 214, 214);
}

/* 设置输入框左边的那个小放大镜，这里有个细节 */
/* all_Icon.png实际是一个很大的雪碧图，我们这里使用css3的背景定位，设置要裁剪的区域为-466px,-677px这个位置 */
.searchText .zoomIcon {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    margin-top: 11px;
    background-position: -466px -667px;
    background-image: url('./all_Icon.png');
    border: 1px;
}

/* 搜索按钮 */
.searchButton {
    display: block;
    float: right;
    width: 56px;
    height: 38px;
    margin-right: -4px;
    margin-top: -29px;
    background-color: #ff2337;
    border-radius: 30px;
    cursor: pointer;
}

/* 搜索按钮的放大镜图标 */
.searchButton i {
    display: block;
    width: 56px;
    height: 38px;
    margin-right: -4px;
    margin-top: 0px;
    background-image: url('./放大镜大.png');
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 30px;
}

/* 当鼠标移动到搜索按钮上时会发生的变化 */
.searchButton:hover {
    background: linear-gradient(270deg, #f85a7d, #ff3234);
}