近几天做京东首页移动端

最新推荐文章于 2022-03-29 14:12:54 发布
最新推荐文章于 2022-03-29 14:12:54 发布
阅读量127 收藏 2
点赞数
文章标签： html5 html ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rock_clip/article/details/120480158
版权

京东首页:欢迎各位点评

html部分 

 <div class="top">
        <ul class="clearfix">
            <li>
                <img src="jidongimg/close.png" alt="">
            </li>
            <li>
                <img src="jidongimg/logo.png" alt="">
            </li>
            <li>
                打开京东App,购物更轻松
            </li>
            <li>
                立即打开
            </li>
        </ul>
    </div>
    <div class="content-top">
        <ul class="clearfix">
            <li>
                <img src="jidongimg/s-btn.png" alt="">
            </li>
            <li>
                <input type="text">
                <img src="jidongimg/jd.png" alt="">
                <span class="sp1">|</span>
                <span class="sp2"></span>
            </li>
            <li>
                登录
            </li>
        </ul>
    </div>
    <div class="content-line">
        <div class="linea">
          <ul class="clearfix">
              <li>

              </li>
              <li>

              </li>
              <li>

              </li>
          </ul>
        </div>  
        <div class="lineb">
            <ul class="clearfix">
                <li>
                    <img src="jidongupload/nav1.webp" alt="">
                    <div>京东超市</div>
                </li>
                <li>
                    <img src="jidongupload/nav2.webp" alt="">
                    <div>京东超市</div>
                </li>
                <li>
                    <img src="jidongupload/nav1.webp" alt="">
                    <div>京东超市</div>
                </li>
                <li>
                    <img src="jidongupload/nav1.webp" alt="">
                    <div>京东超市</div>
                </li>
                <li>
                    <img src="jidongupload/nav1.webp" alt="">
                    <div>京东超市</div>
                </li>
            </ul>
        </div>
        <div class="linec">
            <ul class="clearfix">
                <li>
                    <img src="jidongupload/nav3.webp" alt="">
                    <div>京东超市</div>
                </li>
                <li>
                    <img src="jidongupload/nav1.webp" alt="">
                    <div>京东超市</div>
                </li>
                <li>
                    <img src="jidongupload/nav1.webp" alt="">
                    <div>京东超市</div>
                </li>
                <li>
                    <img src="jidongupload/nav1.webp" alt="">
                    <div>京东超市</div>
                </li>
                <li>
                    <img src="jidongupload/nav1.webp" alt="">
                    <div>京东超市</div>
                </li>
            </ul>
        </div>
    </div>
    <div class="content-bottom">
        <ul class="clearfix">
            <li>

            </li>
            <li>

            </li>
            <li>

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

css部分

div{
    /*CSS3盒子模型*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
*{
    /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
}
input{
    /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
    -webkit-appearance: none;
}
img,a{
    /*禁用长按页面时的弹出菜单*/
    -webkit-touch-callout: none; 
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 清除浮动 */
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
body{
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}
/* 顶部 */
.top{
    height: 45px;
}
.top ul li{
    float: left;
    line-height: 45px;
    background-color: #333;
    text-align: center;
    color: #fff;
}
/* 每一个li */
.top ul li:nth-child(1){
    width: 8%;
}
.top ul li:nth-child(1) img{
    width: 10px;
}
.top ul li:nth-child(2){
    width: 10%;
}
.top ul li:nth-child(2) img{
    width: 30px;
    vertical-align: middle;
}
.top ul li:nth-child(3){
    width: 57%;
}
.top ul li:nth-child(4){
    width: 25%;
}
/* 内容上部分 */
.content-top{
    height: 182px;
    background: url(../jidongupload/banner.dpg) no-repeat;
    background-size: 100%  100%;

}
.content-top ul{
    height: 45px;
}
.content-top ul li{
    float: left;
    line-height: 45px;
    text-align: center;
    color: #fff;
}
.content-top ul li:nth-child(1){
    width: 10%;
}
.content-top ul li:nth-child(1) img{
    width: 20px;
    vertical-align: middle;
}
.content-top ul li:nth-child(2){
    width: 75%;
}
.content-top ul li:nth-child(2) input{
   position: relative;
   width: 276px;
   height: 25px;
   border-radius: 12px;
   outline: none;
}
.content-top ul li:nth-child(2) img{
    position: absolute;
    width: 20px;
    left: 54px;
    top: 60px;
}
.content-top ul li:nth-child(2) .sp1{
    position: absolute;
    left: 78px;
    top: 44px;
    color: #333;
}
.content-top ul li:nth-child(2) .sp2{
    width: 58px;
    height: 50px;
    position: absolute;
    top: 110px;
    left: 158px;
    background: url(../jidongimg/jd-sprites.png) no-repeat;
    background-position: -237px 12px;
    zoom: 0.5;
}
.content-top ul li:nth-child(3){
    width: 15%;
}
/* 中部 */
.content-line{
    height: 290px;
}
.content-line .linea ul li{
    float: left;
}
.content-line .linea ul li:nth-child(1){
    width: 33.3%;
    height: 106px;
    background: url(../jidongupload/pic11.dpg) no-repeat;
    background-size: 100% 100%;
}
.content-line .linea ul li:nth-child(2){
    width: 33.3%;
    height: 106px;
    background: url(../jidongupload/pic22.dpg) no-repeat;
    background-size: 100% 100%;
}
.content-line .linea ul li:nth-child(3){
    width: 33.3%;
    height: 106px;
    background: url(../jidongupload/pic33.dpg) no-repeat;
    background-size: 100% 100%;
}
.content-line .lineb{
    margin-top: 20px;
    margin-bottom: 10px;
}
.content-line .lineb ul li{
    float: left;
    text-align: center;
}

/* linb部分 */
.content-line .lineb ul li:nth-child(1){
    width: 20%;
}
.content-line .lineb ul li:nth-child(1) img{
    width: 42px;
}

.content-line .lineb ul li:nth-child(2){
    width: 20%;
}
.content-line .lineb ul li:nth-child(2) img{
    width: 42px;
}

.content-line .lineb ul li:nth-child(3){
    width: 20%;
}
.content-line .lineb ul li:nth-child(3) img{
    width: 42px;
}

.content-line .lineb ul li:nth-child(4){
    width: 20%;
}
.content-line .lineb ul li:nth-child(4) img{
    width: 42px;
}

.content-line .lineb ul li:nth-child(5){
    width: 20%;
}
.content-line .lineb ul li:nth-child(5) img{
    width: 42px;
}

/* linec部分 */
.content-line .linec ul li{
    float: left;
    text-align: center;
}
.content-line .linec ul li:nth-child(1){
    width: 20%;
}
.content-line .linec ul li:nth-child(1) img{
    width: 42px;
}

.content-line .linec ul li:nth-child(2){
    width: 20%;
}
.content-line .linec ul li:nth-child(2) img{
    width: 42px;
}

.content-line .linec ul li:nth-child(3){
    width: 20%;
}
.content-line .linec ul li:nth-child(3) img{
    width: 42px;
}

.content-line .linec ul li:nth-child(4){
    width: 20%;
}
.content-line .linec ul li:nth-child(4) img{
    width: 42px;
}

.content-line .linec ul li:nth-child(5){
    width: 20%;
}
.content-line .linec ul li:nth-child(5) img{
    width: 42px;
}

/* 底部 */
.content-bottom ul li{
    float: left;
}
.content-bottom ul li:nth-child(1){
    width: 50%;
    height: 110px;
    background: url(../jidongupload/new1.dpg) no-repeat;
    background-size: 100% 100%;
}
.content-bottom ul li:nth-child(2){
    width: 25%;
    height: 110px;
    background: url(../jidongupload/new2.dpg) no-repeat;
    background-size: 100% 100%;
}
.content-bottom ul li:nth-child(3){
    width: 25%;
    height: 110px;
    background: url(../jidongupload/new3.dpg) no-repeat;
    background-size: 100% 100%;
}

效果图

 

 

 

雨落听风清
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端移动Web第一天：京东移动端首页案例-流式布局.zip
04-16
这个"京东移动端首页案例-流式布局.zip"压缩包提供了一个实践性的示例，让我们深入理解如何构建适应不同屏幕尺寸的流式布局。流式布局是现代Web设计的核心，它允许网页内容在各种设备上自适应展示，无论是桌面、平板...
移动端初始化准备
TJ_Dom的博客
07-29 130
1. html页面的设置： <!-- 设置视口标签 --> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- 引入初始化样式 --> <link rel="stylesheet" href="assets/css/normalize.css"&gt
html网页宽度自动适应手机屏幕
weixin_44037153的博客
12-06 1982
web项目中经常会出现html页面需要自适应手机屏幕的情况。 可以通过设置屏幕的缩放比例来实现： 一、使用meta标签，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 (1)、通过设置请求头实现： <meta name="viewport" content="width=device...
移动端项目初始化设置（HTML/CSS）
weixin_41601794的博客
03-29 416
1.normalize.css 2. /* 初始化 */ body { min-width: 320px; max-width: 540px; margin: 0 auto; font: normal 14px/1.5 PingFangSC-regular, Tahoma, 'Lucida Grande', Verdana, 'Microsoft Yahei', STXihei, hei; color: #000; background: #f2f2f
初始化移动端样式
sunshine的博客
12-01 4108
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0; padding:0; } a { text-decoration: none; } ul,ol { margin: 0; paddin
移动端初始化页面
a13520165516的博客
12-07 220
;(function(){ var iScale = 1,viewW = 0; iScale = iScale/window.devicePixelRatio; document.write('<meta name="viewport" content="width=device-width,initial-scale=' + iScale + ',minimum-scale=' ...
京东移动端首页 流式布局
05-10
在京东首页，开发者可能会为容器设置 `display: flex`，然后通过 `flex-wrap` 控制元素是否换行，`justify-content` 和 `align-items` 调整元素的水平和垂直对齐方式。 2. Grid Layout（网格布局）：网格布局提供了...
仿京东移动端首页布局（固定尺寸、rem适配、vw适配）
08-23
仿京东移动端首页布局，包括固定尺寸布局、rem适配布局、vw适配布局，设计稿尺寸使用的iPhoneXR的414px * 896px。 我们可以通过在不同移动端设备上展示移动端网页，发现固定尺寸布局的不足之处，以及rem适配、vw适配...
京东商城 和移动端代码
12-19
京东商城是中国知名的电子商务平台，其前端技术应用广泛且成熟，尤其在移动端的用户体验设计上具有很高的水准。在“京东商城 和移动端代码”这个主题中，我们可以深入探讨HTML和CSS这两个核心技术在京东商城网页及...
基于Vue开发的京东商城移动前端代码
03-08
综上所述，基于Vue开发的京东商城移动前端代码项目涵盖了前端开发的多个方面，包括前端框架的运用、移动端适配策略、组件化开发模式以及与后端API的交互等。通过Vue.js的特性和生态，开发者能够构建出高效、可维护的...
移动端初始化css
01-23
常用移动端公共css
移动端CSS初始化reset.css
非为000的博客
10-09 6799
移动端CSS初始化reset.css
移动端项目代码初始化
RistonTea的博客
09-25 1234
移动端项目代码初始化 1.在index.html中，metal标签增加属性（minimum-scale=1.0,maximum-scale=1.0,user-scalable=no）,要求移动端设备，用户去通过手指去放大缩小这样的操作是无效的，它的页面比例始终是1:1； &lt;meta name="viewport" content="width=device-width,initial-...
移动端 css初始化
panghaichun的博客
01-12 6314
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure,
移动端css初始化(非常好用)
weixin_43039174的博客
10-15 7101
移动端css初始化(非常好用) @charset “utf-8”; /* 禁用iPhone中Safari的字号自动调整 / html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; / 解决IOS默认滑动很卡的情况 */ -webkit-overflow-scrolling : touch; } /* 禁止缩放表单 */ ...
移动端页面初始化的css样式
凌风的博客
05-04 3746
初始化的css样式 reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, sam...
移动端CSS初始化样式
weixin_45888412的博客
12-07 412
@charset "utf-8"; /* 清零 */ *:focus{outline: none;} html{ /*禁用iPhone中Safari的字号自动调整*/ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; /* 解决IOS默认滑动很卡的情况 */ -webkit-overflow-scrolling : tou...
移动端页面初始化 css和html的head中的设置
鑫鑫的博客
02-20 564
*, ::before, ::after{ margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /*去除移动端点击产生的高亮状态*/ ...
移动端 项目初始化
啊对对对的博客
09-02 192
使用 Vue CLI 创建项目 如果你还没有安装 VueCLI，请执行下面的命令安装或是升级： npm install --global @vue/cli 在命令行中输入以下命令创建 Vue 项目： 　　vue create xxxxx 然后配置各种你需要的插件 加入 Git 版本管理 (1)创建远程仓库 GitHub 码云 Coding ... (2)将本地仓库推到线上...
京东移动端首页制作代码实现
最新发布
05-19
由于京东移动端首页比较复杂，需要使用多种技术实现，以下是一个基本的实现思路： 1. 使用 HTML 和 CSS 构建页面结构和样式。 2. 使用 JavaScript 实现页面交互效果和动画效果。 3. 使用 AJAX 技术从后台服务器获取数据，并将数据渲染到页面上。 4. 使用响应式布局技术适配不同尺寸的移动设备。 以下是一个简单的示例代码： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东移动端首页</title> <style> /* 页面样式 */ </style> </head> <body> <header> <!-- 页头内容 --> </header> <nav> <!-- 导航栏内容 --> </nav> <main> <section id="slide"> <!-- 轮播图内容 --> </section> <section id="category"> <!-- 分类内容 --> </section> <section id="promotion"> <!-- 促销内容 --> </section> <section id="recommend"> <!-- 推荐内容 --> </section> <section id="hot"> <!-- 热门内容 --> </section> </main> <footer> <!-- 页脚内容 --> </footer> <script> // 页面交互效果和动画效果的实现 </script> </body> </html> ``` 注意：以上代码仅为示例，实际实现中需要根据具体需求进行修改和完善。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值