京东移动端仿写

最新推荐文章于 2023-10-31 11:55:43 发布
最新推荐文章于 2023-10-31 11:55:43 发布
阅读量454 收藏 4
点赞数 1
分类专栏： web css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40996739/article/details/108990449
版权
web 同时被 2 个专栏收录
42 篇文章 2 订阅
订阅专栏
css
19 篇文章 0 订阅
订阅专栏

0x00 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Title</title>
</head>
<body>
    <header class="app">
        <ul>
            <li>
                <img src="images/close.png" alt="error,please call admin">
            </li>
            <li>
                <img src="images/logo.png" alt="error,please call admin">
            </li>
            <li>打开京东app，购物更简单</li>
            <li>立即打开</li>
        </ul>
    </header>
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon"></div>
            <div class="search-icon"></div>
            <input type="text" placeholder="苏泊尔电磁炉" class="search-input"/>
        </div>
        <div class="search-login">登录</div>
    </div>
    <div class="main-content">
        <div class="slider">
            <img src="upload/banner.dpg" alt="">
        </div>
        <div class="brand">
            <div>
                <a href="#">
                    <img src="upload/pic11.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/pic22.dpg" alt="">
                </a>

            </div>
            <div>
                <a href="#">
                    <img src="upload/pic33.dpg" alt="">
                </a>

            </div>
        </div>
        <nav class="clearfix">
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav2.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav3.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

        </nav>
        <div class="news">
            <a href="#">
                <img src="upload/new1.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new2.dpg" alt="">

            </a>
            <a href="#">
                <img src="upload/new3.dpg" alt="">

            </a>
        </div>
    </div>
</body>
</html>
body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 0;
}
.clearfix {
    *zoom: 1;
}
.clearfix::after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/*顶部栏*/
.app {
    height: 45px;
}
.app ul {
    padding: 0;
    margin: 0;
}
.app ul li {
    list-style: none;
    float: left;
    background-color: #515151;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #ffffff;
}
.app ul li:nth-child(1) {
    width: 8%;
}
.app ul li:nth-child(1) img {
    width: 10px;
}
.app ul li:nth-child(2) {
    width: 10%;
}
/*图片是行内块元素，会存在基线和文字不同无法对齐的情况，这里设置基线和文字对齐就可以了*/
.app ul li:nth-child(2) img{
    width: 30px;
    vertical-align: middle;
}
.app ul li:nth-child(3) {
    width: 57%;
}
.app ul li:nth-child(4) {
    width: 25%;
    background-color: rgb(246, 53, 21);
}
/*搜索栏*/
.search-wrap {
    height: 44px;
    width: 100%;
    line-height: 44px;
    position: fixed;
    max-width: 640px;
    min-width: 320px;
    /*解决块元素的塌陷问题*/
    overflow: hidden;
    background-color: transparent;
    color: #ffffff;
}
.search-btn {
    position: absolute;
    height: 44px;
    width: 40px;
    top: 0;
    left: 0;
}
.search-btn::before {
    content: "";
    display: block;
    height: 44px;
    width: 40px;
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}
/*注意，这里有外边距的合并问题，即块元素的塌陷问题*/
.search {
    height: 30px;
    margin: 7px 50px 0 50px;
    border-radius: 15px;
    background-color: #ffffff;
    position: relative;
}
.jd-icon {
    position: absolute;
    width: 20px;
    height: 15px;
    top: 8px;
    left: 13px;
    background: url("../images/jd.png") no-repeat;
    background-size: 20px 15px;
}
.jd-icon::after {
    content: '';
    position: absolute;
    display: block;
    width: 1px;
    height: 15px;
    right: -8px;
    background-color: #ccc;
}
.search-icon {
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px auto;
}
.search-input {
    position: absolute;
    border: 0;
    background: 0 0;
    top: 7px;
    left: 70px;
    padding-left: 5px;
}
.search-login {
    position: absolute;
    height: 44px;
    width: 40px;
    top: 0;
    right: 0;
}
/*轮播图*/
.slider {
    border: 0;
}

.slider img {
    width: 100%;
}
/*品牌日*/
.brand {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.brand div {
    float: left;
    width: 33.33%;
}
.brand div img {
    width: 100%;
}
/*品牌日nav部分*/
nav a {
    float: left;
    width: 20%;
    text-align: center;
    text-decoration: none;
    color: #666;
}
nav a img {
    width: 40px;
    margin: 10px 0;
}
nav a span {
    display: block;
}
.news {
    margin-top: 20px;
}

.news img {
    width: 100%;
}

.news a {
    float: left;
    box-sizing: border-box;
}

.news a:nth-child(1) {
    width: 50%;
}

.news a:nth-child(n+2) {
    width: 25%;
    border-left: 1px solid #ccc;
}

0x01 效果

才不是小弱鸡
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
京东电商网站仿写.rar
11-15
本资源包含一个较为完整的京东电商网站仿写的案例。需要的朋友可以自行下载哦！
Bootstrap练习：京东商城轮播图
斜键仙的博客
11-17 1242
练习：京东商城的一个轮播图效果，可以自动切换图片和点击切换图片，主要运用了Bootstrap的Carousel插件与js插件等知识内容，练习源文件下面有下载链接。 目录前言一、练习1、目标图：2、分析结构：二、代码实现1、源码：2、运行效果：小结下载链接 前言 一、练习 1、目标图： 最终要实现的一个效果 2、分析结构： 1.该网页由三部分构成，分别为图片、左右控制箭头、圆点指示符。 2.结构所包含的内容：    1）图片：一共有8张图片，它们都叠加在一起 &nbsp.
移动网页布局基础：京东网页
damo_的博客
04-23 853
京东移动端网页制作 京东移动端网页用的是流式布局（百分比布局），此次制作可以巩固一下移动网页开发知识。制作主要分为 搜索栏 图片自动切换栏（js自动切换图片） 导航栏 秒杀栏 推荐栏 底部 电脑调试效果如下图： 小米手机显示效果如下图： 文件目录如图： 文件及素材下载方式在这里链接：https://pan.baidu.com/s/1DeTbfgNGBT9rKHD65FDC0w 提取码：dh8b 。 ...
【前端】移动端布局基础
我的的博客哦
08-30 1315
🔰视口：就是浏览器显示页面内容的屏幕区域。🔰视口可分为布局视口，视觉视口，理想视口。🔰我们移动端布局想要的理想视口就是手机屏幕有多宽，我们的布局视口就有多宽。🔰想要理想视口，我们需要给我们的移动端页面添加meta视口标签。
Bootstrap导航--三级菜单
W_qwahaha的博客
01-06 3194
原博地址： https://blog.csdn.net/baidu_25343343/article/details/72025345
前端移动Web第一天：京东移动端首页案例-流式布局.zip
04-16
京东移动端首页案例-流式布局源代码文件附上
仿移动端京东商城
宏斌的博客
01-17 1075
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shop</title> <link rel="stylesheet" href="../css/小商城.css"> <script sr...
移动端学习笔记（黑马教程）-仿京东首页
weixin_42349568的博客
08-09 770
一，琐碎的部分 1，移动端的布局和网页端的布局基本一样，也是大盒子套小盒子，综合应用流式、定位和移动进行布局，不同的是，移动端的布局是用百分比作为单位。 2，图片输入时，是和文字以基线对齐的，而不是设置了line-height就可以甩手不干了。 还需要把图片在垂直方向上居中对齐： vertical-align: middle; 二，头部的完成 <header class="app"> <ul> <li><img src="images/clo
HTML5期末大作业：动漫网页主题设计——卡通漫画教育首页HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-13 1万+
HTML5期末大作业：动漫网页主题设计——卡通漫画教育首页HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品
CSS伪元素before after应用
1853
10-21 240
CSS伪元素before after应用 在内容前增加图标（before） .search-btn::before{ content: ""; display: block; width: 20px; height: 18px; background: url(../img/s-btn.png) no-repeat; background-size: 20px 18px; margin: 14px 0 0 15px; } 在内容后增加“|”杠效果（a
京东首页仿写.zip
06-24
适合初学者，仅供参考哦！ 静态页面练习。 静态页面练习。 静态页面练习。 静态页面练习。 静态页面练习。
div+css+jquery仿写京东首页
12-20
用div+css+jquery仿写的京东首页静态网页，初学者可参考，共同进步，页面简陋，非初学者可不参考
京东仿页制作1
caiyijing_的博客
11-13 72
京东仿页制作
第十七篇 基于Bootstarp 仿京东多条件筛选插件的开发(展示下）
weixin_34203426的博客
09-26 433
前些时候用换了工作，本来是用的前端框架是easyui，后面用的是bootstrap。对于我来说虽然不是新东西，因为原来毕业时候用过一段时间，也不懂什么插件的开发，现在用过easyui后觉得easyui的用法比较好，容易上手，所有一直有个想法，去开发几个插件自己用用。不多说，上篇文章发面一个多选插件的使用方法，虽然有点不是很完善，但还是可以来用用的。这次就详细说说原理和开发的结节，以及要...
京东首页案例（流式布局）
yexiangCSDN的专栏
05-08 1209
一、移动端之流式布局 1. 流式布局（百分比布局） 流式布局，就是百分比布局，也称非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充 流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度 （max-height 最大高度） min-width 最小宽度 （min-height 最小高度） 上面两个设置拉伸浏览器设置元素显示的最大和最小宽度 <!DOCTYPE html> <html lang
京东/淘宝移动端商城
m0_74384946的博客
10-31 204
这个商城是基于HTML框架开发的，对初学者比较的友好。javascrip作为辅助型框架进行对网页的修改和帮助。本移动商城主要以2022年的京东网页为参考进行的设计与勾勒。此代码一部分都有注释，方便新学者学习！话不多说直接上代码！！
京东移动端分类页面侧导航栏实现
热门推荐
云
04-08 5万+
【代码】京东移动端分类页面侧导航栏实现。
20个首页流行布局样式,你喜欢哪个?
粉丝们务必加入微信粉丝群
12-03 2203
作者：Niemvuilaptrinh 译者：前端小智 来源：Niemvuilaptrinh 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。 有时我们会在网站上遇到一些内容布局问题，如文字对齐、图片设计与内容和谐、为文章选择合适的字体…在今天的文章中，介绍一些设计精美的创意布局，let‘s 开始。 代号 001 源码：.
js中appendChild的用法
才不是小弱鸡的博客
01-19 1万+
0X00写在最前    之前学习js时看到的appChild方法都是用于列表，也就是添加li标签之类，类似这样 今天在mdn上看到了新的用法，令人耳目一新，记录一下与大家共同分享 0x01项目地址 https://roy-tian.github.io/mdn-examples/javascript/gallery/ 0x02 appendChild方法分析 var thumbBar ...
vant calendar 仿写
最新发布
12-01
vant是一个基于Vue.js的移动端组件库，其中包含了丰富的组件，包括日历组件。如果想要仿写vant的日历组件，可以按照以下步骤进行： 1.安装vant组件库 ```shell npm install vant -S ``` 2.在需要使用日历组件的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值