前端基础学习-（2）京东搜索框

最新推荐文章于 2023-04-20 11:25:40 发布

形同陌路love

最新推荐文章于 2023-04-20 11:25:40 发布

阅读量2.9k

点赞数 7

文章标签： css css3 html

本文链接：https://blog.csdn.net/YYLOVEYY520/article/details/113413859

版权

前端基础学习-（2）京东搜索框

作为前端学习的小白，个人在学习过程中认知：京东搜索框使用到了浮动(float)、定位(position)、垂直水平居中、图标引用等知识。

实现效果

在这里插入图片描述

代码实现

html代码如下:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东搜索框</title>
    <link rel="stylesheet" href="../CSS/fontawesome-free-5.12.1-web/css/all.min.css">
    <link rel="stylesheet" href="../CSS/reset.css">
    <link rel="stylesheet" href="../CSS/京东搜索框.css">
</head>

<body>
    <div class="search_wrapper">
        <div class="search">
            <input class="search_input" type="text" placeholder="派克钢笔">
            <a href="#"><i class="fas fa-camera"></i></a>
            <span class="search_do">
                <i class="fas fa-search"></i>
            </span>
        </div>
        <div class="shopping">
            <i class="fas fa-shopping-cart"></i>
            <a href="#">我的购物车</a>
        </div>
        <ul class="key_word">
            <li><a href="#" class="active">低至9.9</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="#">oled电视</a></li>
            <li><a href="#">白酒</a></li>
            <li><a href="#">居家年货</a></li>
        </ul>
    </div>

</body>

</html>

京东搜索框基本CSS样式
/* 整个搜索布局 */
.search_wrapper {
    margin: 54px auto;
    height: 34px;
    line-height: 34px;
    width: 750px;
}

/* 搜索框+搜索按钮定位 */
.search {
    position: relative;
    display: inline-block;
    /* border: 2px solid #E2231A; */
}

/* 搜索框样式 */
.search_input {
    width: 550px;
    height: 32px;
    line-height: 32px;
    border: 2px solid #E2231A;
    padding-left: 10px;
    outline: none;
}

/* 搜索框中拍照样式 */
.search a {
    position: absolute;
    /* 垂直居中 */
    margin-top: auto;
    margin-bottom: auto;
    top: 0;
    bottom: 0;
    font-size: 14px;
    right: 80px;
}

/* 搜索框中拍照移入状态显示 */
.fa-camera:hover {
    color: #E2231A;
}

/* 搜索按钮div样式 */
.search_do {
    width: 60px;
    height: 34px;
    line-height: 34px;
    background-color: #E2231A;
    text-align: center;
    position: absolute;
    left: 505px;
    margin-top: auto;
    margin-bottom: auto;
    top: 0;
    bottom: 0;
}

/* 搜索按钮搜索图标样式 */
.search_do i {
    font-size: 12px;
    color: #ffffff;
}

/* 我的购物车样式 */
.shopping {
    display: inline;
    height: 34px;
    line-height: 34px;
    margin-left: 16px;
    border: 1px solid #dad8d8;
    padding: 6px 16px;
    position: relative;
    top: 2px;
}

/* 购物车中图标样式 */
.shopping i {
    font-size: 12px;
    color: #C81623;
    margin-right: 8px;
}

/* 我的购物车文字样式 */
.shopping a {
    text-decoration: none;
    color: #C81623;
    font-size: 12px;
}

/* 我的购物车文字移入状态显示 */
.shopping:hover {
    border: 1px solid #C81623;
}

/* 设置搜索框下面的内容的样式 */
.key_word li {
    float: left;
    margin: 0 4px;
}

/* 设置搜索框下面的内容的文字样式 */
.key_word a{
    text-decoration: none;
    font-size: 12px;
    color: #B5B5B5;
}

/* .key_word .active {
    color: #E2231A;
} */

/* 设置第一个元素颜色 */
ul.key_word li:first-of-type a {
    color: #E2231A;
}

/* 设置搜索框下面的内容移入时效果 */
.key_word a:hover {
    color: #E2231A;
}

形同陌路love

关注

7
点赞
踩
27

收藏

觉得还不错? 一键收藏
1
评论
前端基础学习-（2）京东搜索框

前端基础学习-（2）京东搜索框作为前端学习的小白，个人在学习过程中认知：京东搜索框使用到了浮动(float)、定位(position)、垂直水平居中、图标引用等知识。实现效果代码实现html代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫