草庐IT

京东页面的响应式布局

Kimariiii 2023-03-28 原文
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font_jd/iconfont.css">
    <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
            box-sizing: border-box;
        }
 
        .box {
            width: 29.3125rem;
            height: 100vh;
            display: flex;
            flex-direction: column;

        }
 
        header {
            height: 3.5625rem;
            /* */
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
        }

        section>.left {
            width: 6.75rem;
            overflow: auto;
        }

        section>.left>ul>li {
            text-align: center;
            height: 3.75rem;
            line-height: 3.75rem;
            font-size: 1.125rem;
            color: black;
            background-color: #F8F8F8;
        }

        section>.left li:hover {
            background-color: white;
            color: red;
        }

        section {
            display: flex;
            flex: 1;
            overflow: auto;
        }

        section>.right {
            overflow: auto;
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            box-sizing: border-box;
            /* flex-direction: column; */
        }

        section>.right>.title {
            display: flex;
            flex-direction: row;
            height: 3.125rem;
            width: 22.5625rem;
            box-sizing: border-box;
            justify-content: space-between;
            align-items: center;
            padding: 0rem ，.3125rem;
            box-sizing: border-box;
        }

        section>.right>.title>p {
            font-size: 1.25rem;
            line-height: 3.125rem;
            font-weight: bold;
        }

        section>.right>.title>.iconfont {
            color: red;
        }

        section>.right>.title>i>span {
            color: black;
        }

        section>.right>.content {
            width: 33%;
            box-sizing: border-box;
            height: 10rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: .625rem;
            box-sizing: border-box;
        }

        section>.right>.content p {
            font-size: .875rem;
            text-align: center;
            padding: .9375rem ，0rem;
            box-sizing: border-box;
        }

        section>.right>.content img {
            width: 100%;
        }

        /* 隐藏谷歌浏览器中的滚动条样式 */
        ::-webkit-scrollbar {
            display: none;
        }

        @media screen and (orientation:portrait) {
            section>.right>.content {
                width: 24%;
            }
        }

        header>.inconfont {
            font-size: 1.125rem;
            line-height: 1.875rem;
        }

        header>i>a {
            text-decoration: none;
            text-align: center;
            padding-left: 1.25rem;
            box-sizing: border-box;
        }

        header>i {
            width: 15%;
        }

        header>.sec {
            width: 85%;
            position: relative;
        }

        header>.sec>p {
            position: absolute;
            left: .625rem;
            top: .3125rem
        }

        header>.sec>input {
            width: 20.625rem;
            height: 2.25rem;
            border-radius: .3125rem;
        }

        input::placeholder {
            text-indent: 3.125rem;
        }

        footer {
            height: 4.0625rem;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
       
        }

        footer>div>img {
            width: 100%;
        }

        footer>div {
            width: 24%;
            background-color: #F8F8F8;
        }

        footer>div:hover {
            background-color: white;
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <header>
            <i><a href="#" class="icon iconfont icon-fenxiang"></a></i>

            <div class="sec">
                <input type="search" placeholder="键鼠套装">
                <p class="icon iconfont icon-sousuo"></p>
            </div>
        </header>
        <section>


            <div class="left">
                <ul>
                    <li>热门推荐</li>
                    <li>手机数码</li>
                    <li>京东超市</li>
                    <li>家用电器</li>
                    <li>电脑办公</li>
                    <li>玩具乐器</li>
                    <li>家具厨具</li>
                    <li>家居家装</li>
                    <li>男装</li>
                    <li>男鞋</li>
                    <li>女装</li>
                    <li>女鞋</li>
                    <li>美妆护肤</li>
                    <li>医药保健</li>
                    <li>酒水饮料</li>
                    <li>运动户外</li>
                    <li>汽车生活</li>
                    <li>礼品鲜花</li>
                    <li>京东国际</li>
                    <li>宠物生活</li>
                    <li>二手商品</li>
                    <li>拍卖</li>
                    <li>箱包手袋</li>
                    <li>钟表珠宝</li>
                    <li>农资绿植</li>
                    <li>生活旅行</li>
                    <li>奢饰品</li>
                    <li>计生情趣</li>
                    <li>艺术邮市</li>
                    <li>工艺品</li>
                </ul>
            </div>
            <div class="right">

                <div class="title">
                    <p>热门推荐</p>
                    <i class="icon iconfont icon-paihangbang"> <span> 排行榜&gt;</span></i>
                </div>

                <div class="content">
                    <img src="img/养生壶.jpg" alt="">
                    <p>养生壶 </p>
                </div>
                <div class="content">
                    <img src="img/咖啡机.jpg" alt="">
                    <p>咖啡机</p>
                </div>
                <div class="content">
                    <img src="img/多用途锅.jpg" alt="">
                    <p>多用途锅</p>
                </div>
                <div class="content">
                    <img src="img/微波炉.jpg" alt="">
                    <p>微波炉</p>
                </div>
                <div class="content">
                    <img src="img/料理机.jpg" alt="">
                    <p>料理机</p>
                </div>
                <div class="content">
                    <img src="img/榨汁机.jpg" alt="">
                    <p>榨汁机</p>
                </div>
                <div class="content">
                    <img src="img/热水壶.jpg" alt="">
                    <p>热水壶</p>
                </div>
                <div class="content">
                    <img src="img/煮蛋器.jpg" alt="">
                    <p>煮蛋器</p>
                </div>
                <div class="content">
                    <img src="img/电压力锅.jpg" alt="">
                    <p>电压力锅</p>
                </div>
                <div class="content">
                    <img src="img/电炖锅.jpg" alt="">
                    <p>电炖锅</p>
                </div>
                <div class="content">
                    <img src="img/电烤箱.jpg" alt="">
                    <p>电烤箱</p>
                </div>
                <div class="content">
                    <img src="img/电烧烤炉.jpg" alt="">
                    <p>电烧烤炉</p>
                </div>
                <div class="content">
                    <img src="img/电热饭盒.jpg" alt="">
                    <p>电热饭盒</p>
                </div>
                <div class="content">
                    <img src="img/电磁炉.jpg" alt="">
                    <p>电磁炉</p>
                </div>
                <div class="content">
                    <img src="img/电饭煲.jpg" alt="">
                    <p>电饭煲</p>
                </div>

                <div class="content">
                    <img src="img/电饼铛.jpg" alt="">
                    <p>电饭煲</p>
                </div>

                <div class="content">
                    <img src="img/空气炸锅.jpg" alt="">
                    <p>空气炸锅</p>
                </div>

                <div class="content">
                    <img src="img/豆浆机.jpg" alt="">
                    <p>豆浆机</p>
                </div>

                <div class="content">
                    <img src="img/酸奶机.jpg" alt="">
                    <p>酸奶机</p>
                </div>

                <div class="content">
                    <img src="img/面包机.jpg" alt="">
                    <p>面包机</p>
                </div>

                <div class="content">
                    <img src="img/面条机.jpg" alt="">
                    <p>面条机</p>
                </div>

                <div class="content">
                    <img src="img2/其他设备.jpg" alt="">
                    <p>其他设备</p>
                </div>

                <div class="content">
                    <img src="img2/剃须刀.jpg" alt="">
                    <p>剃须刀</p>
                </div>

                <div class="content">
                    <img src="img2/卷发器.jpg" alt="">
                    <p>卷发器</p>
                </div>

                <div class="content">
                    <img src="img2/按摩器.jpg" alt="">
                    <p>按摩器</p>
                </div>

                <div class="content">
                    <img src="img2/按摩椅.jpg" alt="">
                    <p>按摩椅</p>
                </div>

                <div class="content">
                    <img src="img2/牙刷.jpg" alt="">
                    <p>牙刷</p>
                </div>

                <div class="content">
                    <img src="img2/理发器.jpg" alt="">
                    <p>理发器</p>
                </div>

                <div class="content">
                    <img src="img2/电吹风.png" alt="">
                    <p>电吹风</p>
                </div>

                <div class="content">
                    <img src="img2/电子秤.jpg"">
                    <p>电子秤</p>
                </div>

                <div class=" content">
                    <img src="img2/美容器.jpg" alt="">
                    <p>美容器</p>
                </div>

                <div class="content">
                    <img src="img2/脱毛器.jpg" alt="">
                    <p>脱毛器</p>
                </div>

                <div class="content">
                    <img src="img2/足浴盆.jpg" alt="">
                    <p>足浴盆</p>
                </div>


            </div>
        </section>


        <footer>
            <div><img src="img/首页.png" alt=""></div>
            <div><img src="img/京喜.png" alt=""></div>
            <div><img src="img/分类.png" alt=""></div>
            <div><img src="img/购物车.png" alt=""></div>
            <div><img src="img/未登录.png" alt=""></div>
        </footer>
    </div>
</body>
<script>
    document.documentElement.style.fontSize =
        document.documentElement.clientWidth / 469 * 16 + "px";
</script>

</html>
京东页面nbspdivgtHTML5

有关京东页面的响应式布局的更多相关文章

  1. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  2. ruby - nanoc 和多种布局 - 2

    是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'

  3. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成？ - 2

    在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  4. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

  5. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  6. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？ 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

  7. ruby-on-rails - RoR && "coming soon"页面 - 2

    我正在寻找一种简单的方法来为我在RubyonRails上的项目实现简单的“即将推出”(预启动)页面。用户应该能够留下电子邮件以便在项目启动时收到通知。有没有这样的插件\gem？或者我应该自己做... 最佳答案 LaunchingSoon是一个Rails插件。它还集成了MailChimp或Campaignmonitor. 关于ruby-on-rails-RoR&&"comingsoon"页面，我们在StackOverflow上找到一个类似的问题： https:/

  8. ruby - 如何让 GitHub 页面使用 master 分支？ - 2

    我有一个使用Jekyll托管在GitHub上的静态网站。问题是，我真的不需要master分支，因为存储库唯一包含的是网站。这样我就必须gitcheckoutgh-pages，然后gitmergemaster，然后gitpushorigingh-pages。有什么简单的方法可以摆脱gh-pages分支并直接从master推送？ 最佳答案 Theproblemis,Idon'treallyneedthemasterbranch,astheonlythingtherepositorycontainsisthewebsite.Isthere

  9. ruby - 如何设置 Mechanize 页面编码？ - 2

    我试图通过点击一个链接获得一个带有ISO-8859-1编码的页面，所以代码类似于这样:page_result=page.link_with(:text=>'link_text').click到目前为止，我得到的结果编码错误，所以我看到的字符如下:'T�tulo:'insteadof'Título:'我尝试了几种方法，包括:使用代理在第一个请求中声明编码:@page_search=@agent.get(:url=>'http://www.server.com',:headers=>{'Accept-Charset'=>'ISO-8859-1'})说明页面本身的编码page_result.

  10. ruby-on-rails - 仅在某些页面上使用 rails_xss - 2

    我正在使用rails_xss运行Rails2.3.14插入。我有另一个用于创建管理仪表板View的插件。我的问题是rails_xss正在转义我的仪表板插件生成的所有HTML。有没有一种方法可以将rails_xss配置为不转义匹配example.com/admin或基于目录(app/views/admin)或任何类似的页面结果一样吗？ 最佳答案 更新仪表板生成插件以使用raw或html_safe进行内容输出可能会更简单。 关于ruby-on-rails-仅在某些页面上使用rails_xss

随机推荐