足球圈移动端和京东分类页（移动端）

最新推荐文章于 2023-04-10 15:16:54 发布
最新推荐文章于 2023-04-10 15:16:54 发布
阅读量181 收藏
点赞数
分类专栏： # 练习 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46048542/article/details/125335220
版权

足球圈移动端

<!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="./足球圈移动/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        html,body{
            height: 100%;
        }
        /* 弹性布局 */
        body{
            display: flex;
            flex-direction: column;
        }
        header{
            height: 44px;
            background-color:#0cc440;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* 设置头部字体方框 */
        header div{
            width: 60px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            font-size: 12px;
        }
        /* 设置头部字体方框圆角 */
        header div:nth-child(1){
            border-radius: 12px 0 0 12px;
            background-color: #63d985; 
            color: white;
        }
        header div:nth-child(2){
            border-radius: 0 12px 12px 0;
            background-color: #3dd066;
            color: #a9e4b4;
        }
        /* 中间部分 */
        section{
            flex: 1;
            overflow: auto;
            /* 解决挤压头部空间 */
        }
        section ul{
            display: flex;
            position: sticky;
            top: 0;
            /* 使移动图片这个还在最上面 */
            background-color: white;
            /* 使移动图片最上面不覆盖字 */
        }
        /* 中间部分上面字体 */
        section ul li{
            flex: 1;
            text-align: center;
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid #d9d9d9;
            color: #8c8c8c;
            font-size: 14px;
        }
        section ul li:hover{
            border-bottom: 2px solid #08c63e;
            color: #14bf4d;
        }
        section .list{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            /* 使中间有空隙，而不是最右边有空隙 */
        }
        /* 设置包含图片和字体方框 */
        section .list>div{
            margin-top: 4px;
            width: 49%;
            border: 1px solid gray;
        }
        /* 每一行两个图片，不重叠 */
        section .list>div img{
            width: 100%;
        }
        /* 设置图片下面字体 */
        section .list>div p{
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            text-indent: 10px;
        }
        footer{
            height: 44px;
            background-color: white;
            color: #d5d5d7;
        }
        /* 使呈现一行显示 */
        footer ul{
            display: flex;
            height: 100%;
            /* 解决 justify-content: center; */
        }
        /* 使一行占满显示 */
        footer li{
            flex: 1;
            /* 使图片和字呈上下显示 */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        footer li:hover{
            color: #08ca43;
        }
        footer li i{
            height: 21px;
            line-height: 21px;
            font-size: 16px;
            text-align: center;
        }
        footer li span{
            height: 17px;
            line-height: 17px;
            font-size: 12px;
            text-align: center;
        }
        /* 设置照相机大小 */
        footer li:nth-child(3) i{
            width: 50px;
            height: 50px;
            border: 1px solid #dadada;
            border-radius: 50%;
            position: absolute; 
            /* 调整位置 */
            left: 50%;
            margin-left: -25px; 
            top: -8px;
            font-size: 30px;
            text-align: center;
            line-height: 50px;
            background-color: white;
        }
        footer li:nth-child(3){
            position: relative;
        }
    </style>
</head>
<body>
    <header>
        <div>热点</div>
        <div>关注</div>
    </header>
    <section>
        <ul>
            <li>足球现场</li>
            <li>足球生活</li>
            <li>足球美女</li>
        </ul>
        <div class="list">
            <div>
                <img src="./images/0.jpg" alt="">
                <p>第一个图片</p>
            </div>
            <div>
                <img src="./images/0.jpg" alt="">
                <p>第一个图片</p>
            </div>
            <div>
                <img src="./images/0.jpg" alt="">
                <p>第一个图片</p>
            </div>
            <div>
                <img src="./images/0.jpg" alt="">
                <p>第一个图片</p>
            </div>
            <div>
                <img src="./images/0.jpg" alt="">
                <p>第一个图片</p>
            </div>
            <div>
                <img src="./images/0.jpg" alt="">
                <p>第一个图片</p>
            </div>
        </div>
    </section>
    <footer>
        <ul>
            <li>
                <i class="iconfont icon-shouye"></i>
                <span>首页</span>
            </li>
            <li>
                <i class="iconfont icon-fangdajing"></i>
                <span>发现</span>
            </li>
            <li>
                <i class="iconfont icon-zhaoxiangji"></i>
            </li>
            <li>
                <i class="iconfont icon-wode-wode"></i>
                <span>我的</span>
            </li>
            <li>
                <i class="iconfont icon-tuichu"></i>
                <span>退出</span>
            </li>
        </ul>
    </footer>
</body>
</html>

请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述

足球圈移动端（rem）

请添加图片描述

京东分类页（移动端）

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        ul{
            list-style: none;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        header{
            height: 45px;
            background-color: gray;
        }
        header ul{
            display: flex;
            overflow: auto;
            color: white;
        }
        /* 横向滚动 */
        header ul li{
            flex-shrink: 0;
            line-height: 45px;
            padding: 0 10px;
        }
        header ul li:hover{
            background-color: white;
            color: red;
        }
        footer{
            height: 50px;
            background-color: gray;
        }
        section{
            flex: 1;
            /* 剩余空间占满 */
            display: flex; 
            overflow: auto;
        }
        section ul{
            width: 85px;
            overflow: auto;
        }
        section ul li{
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 14px;
            background-color: #f8f8f8;
        }
        section ul li:hover{
            background-color: white;
            color: #e96062;
        }
        section>div{
            flex: 1;
            background-color:white;
            display: flex;
            flex-wrap: wrap;
            /* 调整行间距 */
            align-content: flex-start;
            overflow: auto;
        }
        ::-webkit-scrollbar{
            display: none;
        }
        /* 图片方框大小 */
        section .content>div{
            height: 101px;
            width: 33.33%;
            text-align: center;
        }
        /* 调整图片大小 */
        section  .content>div img{
            width: 60px;
            height: 50px;
            margin-top: 11px;
        }
    </style>
</head>
<body>
    <header>
        <ul>
            <li>热门推荐</li>
            <li>手机数码</li>
            <li>京东超市</li>
            <li>家用电器</li>
            <li>电脑办公</li>
            <li>玩具乐器</li>
            <li>家具厨具</li>
            <li>男装</li>
            <li>女装</li>
        </ul> </header>
    <section>
        <ul>
            <li>热门推荐</li>
            <li>手机数码</li>
            <li>京东超市</li>
            <li>家用电器</li>
            <li>电脑办公</li>
            <li>玩具乐器</li>
            <li>家具厨具</li>
            <li>男装</li>
            <li>女装</li>
        </ul>
        <div class="content">
            <div>
                <img src="./京东首页/0.png" alt="">
                <p>空调</p>
            </div>
            <div>
                <img src="./京东首页/1.png" alt="">
                <p>冰箱</p>
            </div>
            <div>
                <img src="./京东首页/2.png" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./京东首页/0.png" alt="">
                <p>空调</p>
            </div>
            <div>
                <img src="./京东首页/1.png" alt="">
                <p>冰箱</p>
            </div>
            <div>
                <img src="./京东首页/2.png" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./京东首页/0.png" alt="">
                <p>空调</p>
            </div>
            <div>
                <img src="./京东首页/1.png" alt="">
                <p>冰箱</p>
            </div>
            <div>
                <img src="./京东首页/2.png" alt="">
                <p>电脑</p>
            </div>
        </div>
    </section>
    <footer></footer>
</body>
</html>

请添加图片描述

九阈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
京东商城 和移动端代码
12-19
京东商城是非常典型的p2p网站，非常值得我们去学习。还有开发文档
京东/淘宝移动端商城
m0_74384946的博客
10-31 328
这个商城是基于HTML框架开发的，对初学者比较的友好。javascrip作为辅助型框架进行对网页的修改和帮助。本移动商城主要以2022年的京东网页为参考进行的设计与勾勒。此代码一部分都有注释，方便新学者学习！话不多说直接上代码！！
京东移动端分类页面侧导航栏实现
热门推荐
云
04-08 5万+
【代码】京东移动端分类页面侧导航栏实现。
京东移动端首页布局静态页面
weixin_39288299的博客
04-03 2754
涉及知识点： 静态页面 flex布局 二倍图 定位 代码实现： index.html部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--移动端设置viewport--> <meta name="viewport" ...
移动端购物类页面首页、购物车、搜索页面HTML、LESS代码
weixin_64208498的博客
04-10 3615
location实现页面跳转，forEach实现数据的遍历渲染，固定定位，背景渐变
html移动端足球战队投票模板
06-01
小程序源码 足球圈（包含node后端） (代码源)
06-22
小程序源码 足球圈（包含node后端） (代码源)小程序源码 足球圈（包含node后端） (代码源)小程序源码 足球圈（包含node后端） (代码源)小程序源码 足球圈（包含node后端） (代码源)小程序源码 足球圈（包含node后端...
小程序源码足球圈（包含node后端）.zip
03-19
3.域名申请和配置 三.小程序发布 1.下载DEMO 2.下载开发工具并安装 3.配置参数 4.发布 完整说明 一.微信小程序申请 申请，并认证（未认证不能发布，认证需要300元，目前只支持企业认证）详细见官网说明。 ...
足球赛网站登录页矢量素材
07-26
足球赛网站登录页矢量素材适用于网站登录页设计的AI格式素材。
YOLO算法足球和运动员检测数据集
02-20
1、YOLO足球和运动员检测数据集，使用lableimg标注软件，标注好的真实场景的高质量图片数据，图片格式为jpg，标签有两种，分别为VOC格式和yolo格式，分别保存在两个文件夹中， 2、数据集和检测结果参考：...
小程序源码足球圈（包含node后端）
05-04
小程序源码足球圈（包含node后端）
android京东首页轮播代码,web移动端-轮播
weixin_39929687的博客
05-26 175
var bannerImg = document.querySelectorAll(".jd_banner ul li");/*1.自动滚动(定时器+过渡transition+位移transform:translateX);2.点随之滚动起来,改变当前的class样式3.添加滑动事件(touch)(1)当滑动超过一定距离的时候 滚动到上一张或者下一张 (banner图片的1/3);(2)当滑动不超...
Android仿京东购物车-----完整代码(三)
big_fff的博客
08-24 3606
activity public class MainActivity extends AppCompatActivity implements View.OnClickListener { ExpandableListView expandableListView; Context context; private CheckBox checkall; pri...
移动端案例-京东首页
weixin_45662026的博客
08-27 1221
方案： 单独制作移动页面方案。
移动端开发——京东首页制作（流式布局）
道阻且长，行则将至。
05-17 1306
移动端开发——京东首页制作（流式布局） 项目准备 初始化基本文件夹 创建index.html 设置视口 引入基本公共样式 引入自己的css样 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
移动端通用样式
sword_chiu的博客
06-07 544
html { font-family: "Helvetica Neue", Helvetica, sans-serif; /*谷歌浏览器字体最小字体12px*/ -webkit-text-size-adjust: 100%; /*100%/none 关闭字体大小自动调整功能*/ /*a标签及拥有 :active伪类的元素有默认的高亮框*/ -webk...
移动端三种布局方式之流式布局-移动端京东首页
JadeDu_的博客
08-18 781
结果图 思路解析及注意点 1. 顶部 头部通栏的大盒子宽度是100%，里面划分成四个小盒子，用ul li排列 四个li高度相同 设置不同宽度，让四个盒子里的内容垂直居中 为了代码规范，图片都要放在盒子里，改动盒子内图片大小直接设置就可以。 .app ul li:nth-child(1){ width: 8%; } /* 图片可以直接改宽，等比例缩放*/ .app ul li:nth-child(1) img{ width: 10px; } .app ul li:nth-child(2){
仿京东移动端分类页面的布局及css设置
zuo-yiran的博客
12-22 5224
项目中用到的分类界面要的效果类似于京东移动端的分类页面：（两侧都可滑动且互不影响）放弃了，代码到这上面又变的奇怪了不少，直接到csdn上看吧！地址是：http://blog.csdn.net/zuoyiran520081/article/details/53811671 效果如图： html代码如下： 柴米油盐 柴米油盐1 柴米油盐2 柴...
几行代码解决京东购物界面
流楚丶格念的博客
07-10 8989
文章目录完整项目界面展示GIF界面代码index.htmlindex.css（中间主要部分）base.css（头部，尾部）normal.css图片资源 完整项目 https://download.csdn.net/download/weixin_45525272/12596801 界面展示 GIF 界面代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
足球轨迹python
最新发布
11-28
以下是一个绘制足球轨迹的Python...该代码使用Matplotlib库绘制足球的轨迹，通过定义足球轨迹函数来计算足球的x和y坐标，并使用plot()函数绘制足球的轨迹。用户可以根据需要修改初始速度和射角来绘制不同的足球轨迹。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值