[移动端] 小案例---左右滚动 分类页面

最新推荐文章于 2022-06-16 15:11:42 发布
最新推荐文章于 2022-06-16 15:11:42 发布
阅读量308 收藏 3
点赞数
分类专栏： # 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14993591/article/details/119728753
版权

网页设计 潮流穿搭 商品分类 用户体验 前端开发
关键词由CSDN通过智能技术生成 
<!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,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <link rel="stylesheet" href="css/02.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <title>Document</title>
</head>
<body>
    <header>
        <input type="text" placeholder="搜索商品名或粘贴淘宝标题"> 
    </header>
    <section>
        <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>
        </ul>
        <div>
            <p>优选榜单</p>
            <main>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
            </main>
            <p>优选榜单</p>
            <main>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
            </main>
            <p>优选榜单</p>
            <main>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
            </main>
        </div>
    </section>

    <footer>
        <div class="iconfont icon-shouye">
            <p>首页</p>
        </div>
        <div class="iconfont icon-fenlei">
            <p>分类</p>
        </div>
        <div class="iconfont icon-shoucang">
            <p>收藏</p>
        </div>
        <div class="iconfont icon-wode">
            <p>我的</p>
        </div>
    </footer>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

img {
    vertical-align: middle;
}

a {
    text-decoration: none;
}

input {
    outline: none;
    border: 0;
}

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.wnqc::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

/* 头部 */
header {
    height: 44px;
    background-image: url(../img/bgc2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 44px;
    /* background-color: #ff5d32; */
    /* display: flex; */
    text-align: center;
    /* justify-content: center;
    align-items: center; */
}

header input {
    /*注意是百分比*/
    width: 92%;
    height: 30px;
    background-color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    /* margin: auto; */
    border-radius: 15px;
    background-image: url(../img/search1.png);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    /* 设置百分比 */
    background-position: 20% center;
    /* color: teal; */
}

/* 更改placeholder颜色 */
/* input::-webkit-input-placeholder{
    color: violet;
} */

section {
    flex: 1;
    /* background-color: rgb(233, 155, 155); */
    display: flex;
    /* 添加滚动条 */
    overflow: auto;

}

section ul {
    /* 给固定的宽度 */
    width: 90px;
    background-color: #f6f6f6;
    /* 添加滚动条 */
    overflow: auto;
}

section ul li {
    line-height: 48px;
    text-align: center;
    color: #616161;
    font-size: 14px;
}

section ul li:hover {
    background-image: url(../img/bgc3.png);
    background-repeat: no-repeat;
    background-size: 4px 4px;
    background-position: 5px center;
    background-color: #fff;
    color: #fd2a24;
}

section>div {
    flex: 1;
    background-color: #fff;
    /* 添加滚动条 */
    overflow: auto;
}

section>div>p {
    line-height: 62px;
    /* background-color: rgb(185, 50, 50); */
    font-size: 12px;
    font-weight: bold;
    padding-left: 26px;
}

section>div>main {
    height: 250px;
    /* background-color: rgb(224, 151, 151); */
    display: flex;
    flex-wrap: wrap;
}

section>div>main>div {
    width: 33.33%;
    height: 125px;
    /* border: 1px solid #000; */
    box-sizing: border-box;
    text-align: center;

}

section>div>main>div>img {
    width: 61px;
    margin-top: 15px;
}

section>div>main>div>p {
    font-size: 12px;
    color: #061b28;
    line-height: 26px;
}


/* 隐藏移动端的滚动条 */
::-webkit-scrollbar{
    display: none;
}
/* 尾部 */
footer {
    height: 59px;
    /* background-color: rgb(207, 40, 40); */
    display: flex;
    justify-content:space-around;
    align-items: center;
}
footer>div{
    width: 30px;
    height: 49px;
    /* background-color: rgb(211, 130, 130); */
    font-size: 17px;
    text-align: center;
    padding-top: 9px;
    box-sizing: border-box;
    color: #777777;
}
footer>div:hover{
    color: #ff2725;
}
footer>div>p{
    font-size: 10px;
}

在这里插入图片描述

533_
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端-左右滑动列表，点击元素，使元素滚动居中
qq_41154522的博客
08-31 381
移动端-左右滑动列表，点击元素，使元素滚动居中。
移动端H5页面左右滑动并加载分页 dropload+swiper
04-19
最近公司要求做一个移动端商品类目展示效果，利用dropload+swiper两个插件结合写了以上内容
首页左右滚动页面
weixin_34198881的博客
06-21 269
1、左边广告<DIV id="floaterleft" style="Z-INDEX: 100; LEFT: 10px; VISIBILITY: visible; WIDTH: 145px; POSITION: absolute; float: left;display: none;" > <div style="width: 145px;"><...
移动端左右滑动插件
12-08
插件描述：移动端左右滑动插件. 参考示例：http://www.jq22.com/jquery-info5051
手机网站移动端左右自动滚动
03-27
手机网站移动端左右自动滚动
微信小程序 - 全屏动画滚动源码.zip
最新发布
05-05
总之，这个压缩包提供了一个实战性的学习案例，对于想要在微信小程序中实现全屏动画滚动效果的开发者来说，是一份宝贵的资料。通过研究和实践，开发者可以提升自己的小程序开发技能，并创造出更加吸引人的用户体验。
微信小程序开发-数字滚动案例源码.zip
08-15
在这个“微信小程序开发-数字滚动案例源码.zip”压缩包中，我们找到了一个关于数字滚动效果实现的示例项目。这个案例对于学习和理解微信小程序开发，特别是动态效果的实现，具有很高的参考价值。 首先，我们要了解...
Vue移动端项目-电子书阅读器.zip
10-21
这个Vue移动端电子书阅读器项目不仅涵盖了Vue.js的基本应用，还涉及到移动端优化和电子书阅读器的特定功能实现，对于学习和实践Vue.js开发者来说，是一个很好的案例。通过深入研究项目源码，可以提升对Vue.js及其...
移动端商城-supermall.zip
07-19
在SuperMall的页面中，特别是在商品列表或者分类页，Butter-scroll可以实现细腻的滚动体验，使用户在浏览商品时感觉更为流畅。 SuperMall项目综合运用了Vue.js、vue-router、vuex、axios和Butter-scroll等多个技术...
微信小程序开发-番茄时钟案例源码.zip
11-21
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的应用服务。在这个“微信小程序开发-番茄时钟案例源码.zip”压缩包中，包含了一个使用微信小程序...
移动端商城菜单左右各自滑动的窍门.zip
07-25
商城的菜单导航，左边nav分类，右边商品小分类，可以实现各自滑动，互不干扰，不用照搬，里面的JS代码也有不少是值得参考学习的
手机移动端web分类页面
09-17
该移动端web分类页面是使用HTML5+CSS3+JQuery写的，样式采用LESS写法，适应各类分辨率的手机屏幕，适合前端小白对移动端web端开发的实践项目，欢迎下载学习！
列表左右箭头滑动_移动端列表设计
weixin_39621819的博客
12-30 317
首先先说一下垂直列表，它是纵向罗列多个条目，这是最基本的列表形式，无论是手机端还是网页端都会使用到这种布局，在App中也应用广泛，这是一种非常干净和清晰的列表方式，用户容易理解，也很容易找到自己的目标。垂直列表对于垂直列表，用户的阅读习惯是从左往右，从上往下，再者就是条目的详细程度与数量之间的平衡。就是条目越详细，意味着占的空间越大，单屏上显示的数量就会越少，所以具体情况要根据需求做出判断，对于订...
移动端 滚动菜单栏练习 iscroll.js的应用实现区域滚动效果
qq_42039912的博客
05-12 194
category.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动web项目--京东分类</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
移动端ajax滑动分页,移动端web滚动分页的实现方法
weixin_39926739的博客
08-06 433
本文实例为大家分享了移动端web滚动分页展示的具体代码，供大家参考，具体内容如下方法一：前端代码：var page = 2; //当前页的页码var flagNoData = false; //falsevar allpage = @Model.PageCount; //总页码，会从后台获取function showAjax(currentIndex) {$.ajax({url: "@Url.Ac...
移动端 网易云 左右滚动导航栏
柒柒柒柒
06-16 984
移动端 网易云 左右滚动导航栏
原生撸移动端顶部滚动菜单栏，实现可滚动控制滚动边界动态样式
见贤思齐焉，见不贤内自省
11-13 1126
原生撸移动端顶部滚动菜单栏 实现的效果为： 可以自由滚动，设置滚动的左边界和有边界 html和css为 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA
仿淘宝、京东、美团使用ViewPager+GridView实现左右滑动查看更多分类导航功能
DvlpNews
06-12 1035
一：使用GridView作为每个ViewPager的页面，也就是说每个ViewPager的页面都是inflate出一个GridView新实例二：如何将GridView和ViewPager关联起来：在刚刚第一点所说的，有多少个ViewPager的页面就会inflate出多少个GridView作为每页的VIew加入集合中，并将这个集合作为ViewPager的数据源传给ViewPager的Adapter/
移动端解决左右滑动的纯css布局
管乐明的博客
05-29 404
移动端解决左右滑动的纯css布局 <!DOCTYPE html> <html> <head> <title>纯css实现左右滑动</title> <style type="text/css"> ul,li{ list-style: none;; } .slide-box{ margin-top:200px;
css 移动端-webkit-overflow-scrolling
05-27
-webkit-overflow-scrolling 是 CSS 的一个属性，用于在移动设备上优化 overflow 元素的滚动效果。它的值可以为 auto、touch、scroll 或者 unset。 - 当值为 auto 时，元素在滚动时会根据内容的大小和容器大小自动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值