前端基础学习-（3）京东搜索框下方内容

最新推荐文章于 2022-07-31 04:24:02 发布

形同陌路love

最新推荐文章于 2022-07-31 04:24:02 发布

阅读量597

点赞数

CC 4.0 BY-SA版权

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/YYLOVEYY520/article/details/113433166

本文档展示了京东搜索框下方内容的HTML和CSS实现，涉及浮动布局、定位、居中等前端基础知识。代码实现了秒杀、优惠券等模块的列表展示，并包含图片轮播和新闻列表功能，适合前端初学者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端基础学习-（3）京东搜索框下方内容

作为前端学习的小白，个人在学习过程中认知：京东搜索框使用到了浮动(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/reset.css">
    <link rel="stylesheet" href="../CSS/京东搜索框下方内容.css">
    <link rel="stylesheet" href="../CSS/fontawesome-free-5.12.1-web/css/all.min.css">
</head>

<body>
    <div class="jd_type_wrapper">
        <ul class="jd_type_list">
            <li><a href="#" class="active">秒杀</a></li>
            <li><a href="#" class="active">优惠券</a></li>
            <li><a href="#">PLUS会员</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="#">京东生鲜</a></li>
            <li><a href="#">京东国际</a></li>
            <li><a href="#">京东金融</a></li>
        </ul>
    </div>
    <div class="main clearfix">
        <div class="main_content clearfix">
            <div class="product_list">
                <ul>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">手机</a><span>/</span><a href="#">运营商</a><span>/</span><a href="#">数码</a></li>
                    <li><a href="#">电脑</a><span>/</span><a href="#">办公</a></li>
                    <li><a href="#">家居</a><span>/</span><a href="#">家具</a><span>/</span><a
                            href="#">家装</a><span>/</span><a href="#">厨具</a>
                    </li>
                    <li><a href="#">男装</a><span>/</span><a href="#">女装</a><span>/</span><a
                            href="#">童装</a><span>/</span><a href="#">内衣</a>
                    </li>
                    <li><a href="#">美妆</a><span>/</span><a href="#">个护清洁</a><span>/</span><a href="#">宠物</a></li>
                    <li><a href="#">女鞋</a<span>/</span><a href="#">箱包</a><span>/</span><a
                                href="#">钟表</a><span>/</span><a href="#">珠宝</a></li>
                    <li><a href="#">男鞋</a><span>/</span><a href="#">运动</a><span>/</span><a href="#">户外</a></li>
                    <li><a href="#">房产</a><span>/</span><a href="#">汽车</a><span>/</span><a href="#">汽车用品</a></li>
                    <li><a href="#">母婴</a><span>/</span><a href="#">玩具乐器</a></li>
                    <li><a href="#">食品</a><span>/</span><a href="#">酒类</a><span>/</span><a
                            href="#">生鲜</a><span>/</span><a href="#">特产</a>
                    </li>
                    <li><a href="#">艺术</a><span>/</span><a href="#">礼品鲜花</a><span>/</span><a href="#">农资绿植</a></li>
                    <li><a href="#">医药保健</a><span>/</span><a href="#">计生情趣</a></li>
                    <li><a href="#">图书</a><span>/</span><a href="#">文娱</a><span>/</span><a
                            href="#">教育</a><span>/</span><a href="#">电子书</a>
                    </li>
                    <li><a href="#">机票</a><span>/</span><a href="#">酒店</a><span>/</span><a
                            href="#">旅游</a><span>/</span><a href="#">生活</a>
                    </li>
                    <li><a href="#">理财</a><span>/</span><a href="#">众筹</a><span>/</span><a
                            href="#">白条</a><span>/</span><a href="#">保险</a>
                    </li>
                    <li><a href="#">安装</a><span>/</span><a href="#">维修</a><span>/</span><a
                            href="#">清洗</a><span>/</span><a href="#">二手</a>
                    </li>
                    <li><a href="#">工业品</a></li>
                </ul>
                <div class="product_list_show">
                    种类列表
                </div>
            </div>
            <div class="photo">
                <div class="img_list">
                    <a href="#">
                        <img src="../images/5.webp" alt="第一张图片">
                    </a>
                    <a href="#">
                        <img src="../images/6.webp" alt="第一张图片">
                    </a>
                    <a href="#">
                        <img src="../images/7.webp" alt="第一张图片">
                    </a>
                </div>
                <a href="#"><i class="fas fa-chevron-circle-left"></i></a>
                <a href="#"><i class="fas fa-chevron-circle-right"></i></a>
                <ul class="pointer">
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                </ul>
            </div>
            <div class="photo_three">
                <ul class="photo_list_three">
                    <li><a href="#"><img src="../images/1.webp" alt=""></a></li>
                    <li><a href="#"><img src="../images/2.webp" alt=""></a></li>
                    <li><a href="#"><img src="../images/3.webp" alt=""></a></li>
                </ul>
            </div>
            <div class="account">
                <div class="jd_account clearfix">
                    <div class="myjd_photo">
                        <a href="#"><img src="../images/myjd.png" alt="我的京东"></a>
                    </div>
                    <div class="welcome_login_register">
                        <div class="welcome">
                            <a href="#">
                                Hi~欢迎逛京东!
                            </a>
                        </div>
                        <div class="login_register">
                            <a href="#">登录</a> | <a href="#">注册</a>
                        </div>
                    </div>
                    <div class="newspeople_plus clearfix">
                        <div class="newspeople"><a href="#">新人福利</a> </div>
                        <div class="plus"><a href="#"> PLUS会员</a></div>
                    </div>
                </div>
                <div class="news_list clearfix">
                    <div class="news_title">
                        <div class="news_title_left">京东快报</div>
                        <div class="news_more"><a href="#">更多 ></a>
                        </div>
                    </div>
                    <div class="news_content clearfix">
                        <ul>
                            <li class="clearfix">
                                <div class="latest"><a href="#">最新</a> </div>
                                <div class="latest_content"><a href="#">什么是宝宝"转奶",掌握这些</a> </div>
                            </li>
                            <li class="clearfix">
                                <div class="latest"><a href="#">最新</a> </div>
                                <div class="latest_content"><a href="#">什么是宝宝"转奶",掌握这些</a> </div>
                            </li>
                            <li class="clearfix">
                                <div class="latest"><a href="#">最新</a> </div>
                                <div class="latest_content"><a href="#">什么是宝宝"转奶",掌握这些</a> </div>
                            </li>
                            <li class="clearfix">
                                <div class="latest"><a href="#">最新</a> </div>
                                <div class="latest_content"><a href="#">什么是宝宝"转奶",掌握这些</a> </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="service_list">
                    服务列表
                </div>
            </div>
        </div>
    </div>
</body>

</html>

京东搜索框下方内容基本样式
.jd_type_wrapper {
    width: 800px;
    height: 20px;
    margin: 140px auto 10px;
}

.jd_type_list li {
    float: left;
    margin: 0px 10px;
}

.jd_type_list a {
    text-decoration: none;
    color: #4C4C4C;
}

.active {
    color: #E1251B !important;
    font-weight: bold;
}

.jd_type_list a:hover {
    color: #E1251B
}

.main {
    background-color: #F4F4F4;
    height: 500px;
    width: 100%;
}

.main_content {
    width: 1220px;
    margin: 10px auto;
}

.main_content .product_list {
    float: left;
    width: 200px;
    height: 460px;
    background-color: #ffffff;
    margin-right: 10px;
    position: relative;
}

.product_list li {
    padding: 4px 8px;
    margin-right: 0;
}

.product_list li:first-of-type {
    margin-top: 10px;
}

.product_list .product_list_show {
    height: 460px;
    line-height: 460px;
    text-align: center;
    width: 988px;
    background-color: #ffffff;
    display: none;
    position: absolute;
    top: 0;
    left: 202px;
    z-index: 999;
}

.product_list a {
    text-decoration: none;
    color: #333333;
    font-size: 14px;
    line-height: 14px;
    margin: 0 4px;
}

.product_list span {
    font-size: 12px;
}

.product_list a:hover {
    color: #C81623;
}

.product_list li:hover {
    background-color: #D9D9D9;
}

.product_list ul:hover+.product_list_show {
    display: block;
}

.main_content .photo {
    float: left;
    width: 600px;
    height: 460px;
    background-color: #bbffaa;
    margin-right: 10px;
    position: relative;
}

.main_content .photo .img_list {
    overflow: hidden;
}

.main_content .photo img {
    width: 600px;
    height: 460px;
    position: absolute;
    z-index: 9;
}

.photo .pointer {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 99;
}

.photo .pointer li {
    float: left;
}

.photo .fas {
    font-size: 20px;
    position: absolute;
    right: 0px;
    height: 20px;
    width: 20px;
    margin-top: auto;
    margin-bottom: auto;
    top: 0;
    bottom: 0;
    z-index: 99;
    color: rgba(0, 0, 0, .2);
}

.photo .fa-chevron-circle-left {
    left: 0px;
}

.fa-chevron-circle-right {
    right: 0px;
}

.photo .fas:hover {
    color: rgba(0, 0, 0, .3);
}

.photo .pointer a {
    float: left;
    width: 10px;
    height: 10px;
    border: solid 2px transparent;
    border-radius: 50%;
    margin: 0 4px;
    /* 背景被裁剪到内容框。 */
    background-clip: content-box;
    background-color: rgba(0, 0, 0, .1);
}

.photo .pointer a:hover {
    background-color: #ffffff;
    border: solid 2px rgba(0, 0, 0, .4);
}

.main_content .photo_three {
    float: left;
    width: 180px;
    height: 460px;
    margin-right: 10px;
}

.photo_list_three img {
    width: 180px;
}

.photo_list_three li:nth-of-type(2) img {
    margin: 15px 0 15px;
}

.main_content .account {
    float: left;
    width: 180px;
    height: 460px;
    background-color: #ffffff;
}

.account .jd_account {
    height: 100px;
    width: 180px;
}

.jd_account .myjd_photo {
    float: left;
}

.jd_account img {
    width: 40px;
    margin-top: 15px;
    margin-left: 20px;
    border-radius: 50%;
}

.jd_account .welcome_login_register {
    float: left;
    margin-top: 18px;
    margin-left: 15px;
}

.jd_account .login_register {
    margin-top: 6px;
    color: #6F6F6F;
    font-size: 12px;
}

.jd_account .welcome_login_register a {
    font-size: 12px;
    text-decoration: none;
    color: #6F6F6F;
}

.jd_account .welcome_login_register a:hover {
    color: #C81623;
}

.jd_account .newspeople_plus {
    margin: 70px auto;
    padding-bottom: 14px;
    border-bottom: 1px solid #EEEEEE;
    width: 160px;
}

.jd_account .newspeople a {
    background-color: #E1251B;
    color: #ffffff;
    text-decoration: none;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 15px;
}

.jd_account .newspeople {
    float: left;
    margin-left: 10px;
}

.jd_account .newspeople a:hover {
    background-color: #C81623;
}

.jd_account .plus {
    float: left;
    margin-left: 10px;
}

.jd_account .plus a {
    background-color: #363634;
    color: #DBCE8B;
    text-decoration: none;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 15px;
}

.jd_account .plus a:hover {
    background-color: #C81623;
    color: #ffffff;
}

.news_list {
    margin: 10px auto;
    margin-left: 10px;
    margin-right: 10px;
}

.news_list .news_title_left {
    float: left;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
}

.news_list .news_more {
    float: right;
}
.news_list .news_more a{
    font-size: 12px;
    line-height: 20px;
    text-decoration: none;
    color: #ACACAC;
}

.news_list .news_more a:hover{
    color: #C81623;
}

.news_list .news_content {
    margin-top: 26px;
    border-bottom: 1px solid #EEEEEE;
}

.news_list .news_content li{
    height: 20px;
    margin-bottom: 6px;
}

.news_list .latest {
    float: left;
    background-color: #FDEEED;
    line-height: 20px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 6px;
}

.news_list .latest a{
    text-decoration: none;
    color: #E1251B;
    font-size: 12px;
}

.news_list .latest_content {
    float: left;
    line-height: 20px;
    margin-left: 8px;
    width: 110px;
    /* 设置超出文字变为省略号，必须要以下三个元素一起使用才会生效 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news_list .latest_content a {
    text-decoration: none;
    color: #666666;
    font-size: 12px; 
}

.news_list .latest_content a:hover {
    color: #C81623;
}

.service_list {
    line-height: 200px;
    text-align: center;
    font-size: #666666;
}

/* 清除高度塌陷和外边距重叠 */
.clearfix::before, .clearfix::after {
    content: '';
    clear: both;
    display: table;
}

其中遇到的问题：

/* 设置超出文字变为省略号，必须要以下三个元素一起使用才会生效 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;