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

最新推荐文章于 2021-06-04 13:34:22 发布

原创

最新推荐文章于 2021-06-04 13:34:22 发布 · 615 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

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

前端基础学习-（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<