仿京东分类页面h5的页面布局及css样式设置

最新推荐文章于 2022-02-13 11:54:36 发布
最新推荐文章于 2022-02-13 11:54:36 发布
阅读量6.4k 收藏 24
点赞数 2
分类专栏： css设置 文章标签： 仿京东分类页面h5的 html 移动 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuoyiran520081/article/details/53813213
版权

项目中用到的分类界面要的效果类似于京东移动端的分类页面：（两侧都可滑动且互不影响）
效果如图：
这里写图片描述
html代码如下：

<aside class="mainport-left">
    <ul class="categoryFirst">
        <li class="active">柴米油盐<span></span></li>
        <li>柴米油盐1</li>
        <li>柴米油盐2</li>
        <li>柴米油盐3</li>
        <li>柴米油盐4</li>
        <li>柴米油盐1</li>
        <li>柴米油盐2</li>
        <li>柴米油盐3</li>
        <li>柴米油盐4</li>
        <li>柴米油盐1</li>
        <li>柴米油盐2</li>
        <li>柴米油盐3</li>
        <li>柴米油盐4</li>
    </ul>
</aside>
<section class="mainport">
    <article class="mainport-right">
        <div class="banner img-responsive"><img src="../Images/banner.png" alt="" /></div>
        <div class="goods-list" id="goods-list1">
            <h3 class="font19">柴米油盐</h3>
            <ul>
                <li>
                    <a href="">
                        <figure class="mainFigure">
                            <img src="../Images/goods.png" alt="">
                            <figcaption>
                                <div class="goods-title">
                                    <strong class="color-a1 font25">金龙鱼 葵花籽清油</strong>
                                </div>
                            </figcaption>
                        </figure>
                    </a>

                </li>
                <li>
                    <a href="">
                        <figure class="mainFigure">
                            <img src="../Images/goods.png" alt="">
                            <figcaption>
                                <div class="goods-title">
                                    <strong class="color-a1 font25">金龙鱼 葵花籽清油</strong>
                                </div>
                            </figcaption>
                        </figure>
                    </a>

                </li>
                <li>
                    <a href="">
                        <figure class="mainFigure">
                            <img src="../Images/goods.png" alt="">
                            <figcaption>
                                <div class="goods-title">
                                    <strong class="color-a1 font25">金龙鱼 葵花籽清油</strong>
                                </div>
                            </figcaption>
                        </figure>
                    </a>

                </li>
            </ul>

        <!--</div>
        <div class="goods-list">-->
            <h3 class="font19">柴米油盐</h3>
            <ul>
                <li>
                    <a href="">
                        <figure class="mainFigure">
                            <img src="../Images/goods.png" alt="">
                            <figcaption>
                                <div class="goods-title">
                                    <strong class="color-a1 font25">金龙鱼 葵花籽清油</strong>
                                </div>
                            </figcaption>
                        </figure>
                    </a>

                </li>
                <li>
                    <a href="">
                        <figure class="mainFigure">
                            <img src="../Images/goods.png" alt="">
                            <figcaption>
                                <div class="goods-title">
                                    <strong class="color-a1 font25">金龙鱼 葵花籽清油</strong>
                                </div>
                            </figcaption>
                        </figure>
                    </a>

                </li>
                <li>
                    <a href="">
                        <figure class="mainFigure">
                            <img src="../Images/goods.png" alt="">
                            <figcaption>
                                <div class="goods-title">
                                    <strong class="color-a1 font25">金龙鱼 葵花籽清油</strong>
                                </div>
                            </figcaption>
                        </figure>
                    </a>

                </li>
            </ul>
        </div>

        <!--<div class="goods-list" id="goods-list2">
            <h3 class="font19">柴米油盐</h3>
        </div>

        <div class="goods-list" id="goods-list3">
            <h3 class="font19">柴米油盐</h3>
        </div>-->

    </article>
</section>
<div class="clearfix"></div>

css设置为：

.row,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,aside,figure,figcaption,blockquote,th,td,a
    {
    margin: 0;
    padding: 0;
    outline:none;
    font-family:"Microsoft YaHei";
}
input[type=radio]{margin: 0;}
h1,h2,h3,h4,h5,h6,label {
    font-weight: normal;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #000;
}
/*strong{font-weight: normal;}*/
body {
    background: #ececec;
}
.font21 {
    font-size: .21rem;
}
.font17 {
    font-size: .17rem;
}
.font19 {
    font-size: .19rem;
}
.font23 {
    font-size: .23rem;
}
.font24 {
    font-size: .24rem;
}
.font25 {
    font-size: .25rem;
}
.font26 {
    font-size: .26rem;
}
.font28 {
    font-size: .28rem;
}
.padding20 {
    padding: 0 .2rem 0 .2rem
}
.fff {
    background: #fff;
}
.color-a1 {
    color: #a1a1a1;
}
.color-4d {
    color: #4d4d4d;
}
/*category页面*/
.category .waitarea canvas{     /* 加载小圆圈 */
    position: absolute;
    left: 50%;
    margin-left: -65px;
}
.category .mynav p {
    height: .8rem;
    border-bottom: .1rem solid #dddddd;
}
.category .mainport {
    width: 73.5%;
    height: 100%;
    background: #fff;
    position:absolute;
    right:0;
    padding: 0.21rem .2rem 0 .2rem;
    margin-bottom: 0;
    border-bottom: none;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
.mainport-left {
    width: 26.5%;
    height: 100%;
    position:fixed;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    background: #ececec;
    display: inline-block;
    overflow-y: scroll; 
}
.mainport-left li {
    height: 1.02rem;
    border-bottom: .02rem solid #ddd;
    text-align: center;
    line-height: 1.02rem;
    font-size: .23rem;
    color: #4d4d4d;
}
.categoryFirst li span {
    display: none;
}
.mainport-left .active {
    background: #fff;
    border: none;
    width: 101%;
    color:red;
}
.banner,.banner img {
    width: 100%;
    height: 1.5rem;
}


.mainport-right h3 {
    width: 100%;
    height: .6rem;
    line-height: .6rem;
    color: #b4b4b4;
}
.mainFigure img {
    display: inline;
    width: 100%;
    height: 1.97rem;
    overflow: hidden;
}
.goods-list li {
    width: 47%;
    display: inline-block;
    margin: 1% 1% 0;
}
.goods-title strong {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: .4rem;
    font-weight: normal;
    text-align: center;
    color:#000;
}
.goods-title span {
    display: none;
}

为了兼容不同屏幕的手机，静态的布局只引用一个rem的js文件（这个是在boostrap的样式下写的，引用一下才不会让样式跑偏），代码如下：

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=640){
                docEl.style.fontSize = '100px';
            }else{
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
zuo-yiran
关注
专栏目录
HTML5期末大作业：京东网站设计——仿京东(7页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
11-10 4621
HTML5期末大作业：京东网站设计——仿京东(7页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需
html分类页面,商品分类.html
weixin_36307713的博客
06-03 2488
商品分类h1, dl, dt, dd {margin: 0px;padding: 0px;}body {background-color: #D5D5D5;}div {width: 230px;background-color: #fff;}h1 {font-size: 16px;font-weight: bold;color: #FFF;background-color: #000;text-i...
h5仿原生商品分类滑动
06-27
移动端h5仿原生商品分类滑动特效 移动端h5商品分类滑动仿原生特效 移动端商品分类滑动特效 移动端h5仿原生商品分类滑动特效 移动端h5商品分类滑动仿原生特效 移动端商品分类滑动特效
仿京东分类Html5页面
03-05
仿京东分类Html5页面，左右分栏，可滑动，支持多层级扩展，CSS样式
H5电商（仿京东首页）
09-30
Html5电商首页（仿京东首页），风格非常漂亮，源码呈现，值得借鉴。
仿京东--分类页面
yin_chenglong的博客
07-01 1616
主页面package com.example.administrator.myapplication111.persenter.fragment; import android.content.Intent; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v...
仿京东商城H5主页面源代码，html、css、js 下载
05-13
【描述】"仿京东商城H5主页面源代码，html、css、js"说明了这个项目主要由三部分组成：HTML负责结构，CSS负责样式，JavaScript则用于增加交互性。HTML（HyperText Markup Language）是网页的基础，它定义了网页的...
Html+Css简单仿京东商品分类导航
10-12
用HTML语言写的一个仿京东商城的界面，商品分类导航。
仿京东左侧菜单分类
05-30
非常好用！多多下载！
h5 移动端左右联动分类页面
风如白话的博客
05-14 2366
h5移动端左右联动分类页面 查看演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" t
简单实现京东分类页面(二)
qq_40592484的博客
01-21 1833
昨天实现了右边滑动左边跟着改变 今天是 左边点击后右边滑动到指定的位置 有个地方需要注意 左边的点击监听函数 怎么把状态的改变 通知到整体 其实可以左边的adapter 注册一个接口 整体实现这个接口 ,初始化adapter是注册一个 回调对象,即C++里面的钩子函数 不过Java 不支持函数为第一类型 就把函数包装为一个对象 ,然后注入到adapter 具体代码有解释 public clas...
模拟京东手机页面（一）
weixin_30374009的博客
12-15 672
首页页面 1.移动端页面的设置和css文件和js文件的创建以及引入。 1 <meta name="viewport" 2 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 3 &l...
HTML+CSS+JS作品展示（仿写京东移动端首页②）
weixin_42541725的博客
02-13 1015
使用插件添加轮播图效果
h5学习笔记：左右布局
夏天的树人的专栏
12-30 5607
最近在学习css的时候会经常用到左右布局。所以会先建立一个div容器，里面添加图形和文本 效果图如下。 于是第一步会先建立一个div，然后在内部添加两个div。<div class="item-box"> <div class="item-box-icon"> </div> <div class="item-box-text"> <span>人均
HTML+CSS作品展示（仿写京东移动端首页①）
weixin_42541725的博客
01-26 3003
仿写京东移动端首页①
仿京东移动端分类页面的布局及css设置_左亦然_新浪博客
zuo-yiran的博客
12-22 359
项目中用到的分类界面要的效果类似于京东移动端的分类页面：（两侧都可滑动且互不影响）放弃了，代码到这上面又变的奇怪了不少，直接到csdn上看吧！地址是：http://blog.csdn.net/zuoyiran520081/article/details/53811671 效果如图： html代码如下： 柴米油盐 柴米油盐1 柴米油盐2 柴米油盐3 ...
手机京东菜单html,jQuery仿京东商城手机端商品分类滑动切换特效
weixin_36460310的博客
06-05 316
js代码//设置cookiefunction setCookie(cname, cvalue, exdays) {var d = new Date();d.setTime(d.getTime() + (exdays*24*60*60*1000));var expires = "expires="+d.toUTCString();document.cookie = cname + "=" + cva...
仿移动端京东商城
宏斌的博客
01-17 1105
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shop</title> <link rel="stylesheet" href="../css/小商城.css"> <script sr...
网页布局的分类
WYJ的博客
10-29 5187
一、静态布局（Static Layout） 即传统web设计，网页上的所有元素的尺寸一律使用px作为单位。 布局特点：不管浏览器具体尺寸是多少，网页布局始终按照最初写代码时候的布局来显示。常规的pc的网站都是静态的（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度，就会出现滚动条，如果大于这个宽度，则内容居中外加背景，这种设计常见于pc端。 设计方法： pc：居中布局...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值