百分比布局得应用 —— 模仿京东移动端首页

写在前面

我想，我要更多的去练习，去搭建页面结构，去分析页面结构。

emmmmmm，一个下午就画了小半个页面。我想我应该反思(面壁思过)。好了好了，开始撸思路了。夜里再来个flex布局。

移动端开发的布局方式

流式百分比布局、flex弹性布局、rem+媒体查询。

主要就是这三种吧，今天简单说下流式百分比布局，它的主要核心就是宽度用百分比表示，利用百分比进行布局。

一般在移动开发时，需要给body设置最小宽度和最大宽度的，为了使页面能使用手机屏幕。今天画页面画了一下午，emmmm，一个首页还没有画完。。。。。只做出来简单的几部分。先看下效果吧(捂脸捂脸)

是的，它就是长着这个样子。主要目的就是简单练习一下百分比布局的思想。

可是是写PC端页面写多了，很不习惯写移动端页面。写着写着感觉自己不会操作了。功夫不到家啊还是，还得多练习。

body的一般样式

body {width: 100%;min-width: 320px;max-width: 540px;margin: 0 auto;color: #666;font-size: 14px;line-height: 1.5;
}

代码实现部分

结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>京东移动端</title><link rel="stylesheet" href="./CSS/normalize.css"><link rel="stylesheet" href="CSS/index.css">
</head><body><!-- 顶部导航 --><header class="top-search"><!-- 左侧图标部分 --><div class="icon"><span></span></div><!-- 中间表单 --><div class="search"><i class="JD"></i><i class="big"></i><div class="search-input">怡宝矿泉水</div></div><!-- 右侧登录 --><div class="login">登录</div></header><!-- <div class="main"> --><!-- 焦点图 --><div class="focus"><ul class="carousel"><li class="carousel-items"><a href="#"><img src="./upload/focus2.jpg" alt=""></a></li><li class="carousel-items"><a href="#"><img src="./upload/focus2.jpg" alt=""></a></li><li class="carousel-items"><a href="#"><img src="./upload/focus2.jpg" alt=""></a></li><li class="carousel-items"><a href="#"><img src="./upload/focus2.jpg" alt=""></a></li><li class="carousel-items"><a href="#"><img src="./upload/focus2.jpg" alt=""></a></li><li class="carousel-items"><a href="#"><img src="./upload/focus2.jpg" alt=""></a></li><li class="carousel-items"><a href="#"><img src="./upload/focus2.jpg" alt=""></a></li><li class="carousel-items"><a href="#"><img src="./upload/focus2.jpg" alt=""></a></li></ul><!-- <ul class="cricle-shot"><li class="current"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul> --></div><!-- 主体部分 --><div class="content"><!-- 推荐区域 --><div class="recommend"><a href="#"><img src="upload/xr2.dpg" alt=""></a><a href="#"><img src="upload/xrlx.dpg" alt=""></a><a href="#"><img src="upload/xr2.dpg" alt=""></a></div><!-- 小图片导航 --><div class="pc-nav bj"><div class="nav-items"><img src="upload/pc1.webp" alt=""><p>京东超市</p></div><div class="nav-items"><img src="upload/pc2.webp" alt=""><p>数码电器</p></div><div class="nav-items"><img src="upload/pc3.webp" alt=""><p>京东服饰</p></div><div class="nav-items"><img src="upload/pc4.webp" alt=""><p>京东生鲜</p></div><div class="nav-items"><img src="upload/pc5.webp" alt=""><p>京东到家</p></div><div class="nav-items"><img src="upload/pc6.webp" alt=""><p>充值缴费</p></div><div class="nav-items"><img src="upload/pc7.webp" alt=""><p>9.9元拼</p></div><div class="nav-items"><img src="upload/pc8.webp" alt=""><p>领卷</p></div><div class="nav-items"><img src="upload/pc9.webp" alt=""><p>赚钱</p></div><div class="nav-items"><img src="upload/pc10.webp" alt=""><p>PULS会员</p></div></div><!-- 东家小院 --><div class="djxy bj"><div class="d-tit"><img src="upload/djxy.dpg" alt=""></div></div></div></body></html>

样式

* {margin: 0;padding: 0;
}body {width: 100%;min-width: 320px;max-width: 540px;margin: 0 auto;color: #666;font-size: 14px;line-height: 1.5;
}div {box-sizing: border-box;
}.bj {background-color: rgba(255, 255, 255, .5);
}.top-search {position: fixed;top: 0;/* 固定导航栏 也要写上最小和最大宽度 */width: 100%;min-width: 320px;max-width: 540px;height: 44px;background-color: rgb(201, 6, 6);overflow: hidden;padding-bottom: 30px;z-index: -1;
}/* 右侧图标 */
.icon {position: absolute;top: 0;left: 0;width: 40px;height: 44px;
}.icon span {display: block;width: 20px;height: 18px;margin: 12px 0 0 12px;background: url(../images/s-btn.png) no-repeat;
}/* 中间表单 */
.search {position: relative;height: 30px;background-color: #fff;margin: 7px 50px;border-radius: 20px;
}.JD {position: absolute;top: 7px;left: 12px;width: 20px;height: 15px;background: url(../images/jd-sprites.png) no-repeat 0 0;background-size: 200px auto;
}.JD::after {content: "";position: absolute;top: 0;left: 27px;height: 15px;border-right: 1px solid #ccc;
}/* 放大镜 */
.big {position: absolute;top: 7px;left: 45px;width: 18px;height: 15px;background: url(../images/jd-sprites.png) no-repeat -80px 0;background-size: 200px auto;
}/* 伪表单 */
.search-input {position: absolute;top: 0;left: 75px;height: 30px;line-height: 30px;color: rgb(161, 161, 161);}/* 登录 */
.login {position: absolute;top: 0;right: 0;width: 40px;height: 44px;color: #fff;line-height: 44px;text-align: center;
}.bg-color {overflow: hidden;background-color: rgb(201, 6, 6);
}/* 焦点图 */
.focus {position: relative;width: 95%;margin: 55px auto;
}/* 轮播图部分 */
.carousel {position: absolute;top: 0;left: 0;width: 100%;height: 140px;overflow: hidden;
}.carousel-items {float: left;width: 100%;overflow: hidden;
}.carousel img {width: 100%;border-radius: 8px;
}/* 圆点部分 */
.cricle-shot {position: absolute;left: 50%;bottom: 5%;transform: translateX(-50%);overflow: hidden;
}.cricle-shot li {float: left;width: 5px;height: 5px;background-color: rgba(255, 255, 255, .5);border-radius: 50%;margin-left: 5px;
}.cricle-shot .current {background-color: rgba(255, 255, 255, 1);box-shadow: 0 0 4px #fff;
}/* 主体 */
/* 图片导航 */
.content {width: 100%;min-width: 320px;max-width: 540px;padding-top: 150px;overflow: hidden;}.recommend {width: 100%;
}.recommend a {float: left;width: 33.33%;
}.recommend img {width: 100%;height: 100%;vertical-align: top;
}/* 小图片导航 */
.pc-nav {overflow: hidden;width: 100%;
}.nav-items {float: left;margin-top: 10px;width: 20%;text-align: center;font-size: 12px;
}.nav-items img {width: 40px;height: 40px;vertical-align: center;
}/* 京东秒杀 */
.djxy {width: 100%;
}.d-tit img {padding-top: 5px;max-width: 100%;background-color: rgba(255, 255, 255, .5);
}

移动端重置样式代码，可以保存着，使用的时候直接引入即可。

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css *//*** 1. Change the default font family in all browsers (opinionated).* 2. Correct the line height in all browsers.* 3. Prevent adjustments of font size after orientation changes in*    IE on Windows Phone and in iOS.*//* Document========================================================================== */html {font-family: sans-serif; /* 1 */line-height: 1.15; /* 2 */-ms-text-size-adjust: 100%; /* 3 */-webkit-text-size-adjust: 100%; /* 3 */
}/* Sections========================================================================== *//*** Remove the margin in all browsers (opinionated).*/body {margin: 0;
}/*** Add the correct display in IE 9-.*/article,
aside,
footer,
header,
nav,
section {display: block;
}/*** Correct the font size and margin on `h1` elements within `section` and* `article` contexts in Chrome, Firefox, and Safari.*/h1 {font-size: 2em;margin: 0.67em 0;
}/* Grouping content========================================================================== *//*** Add the correct display in IE 9-.* 1. Add the correct display in IE.*/figcaption,
figure,
main { /* 1 */display: block;
}/*** Add the correct margin in IE 8.*/figure {margin: 1em 40px;
}/*** 1. Add the correct box sizing in Firefox.* 2. Show the overflow in Edge and IE.*/hr {box-sizing: content-box; /* 1 */height: 0; /* 1 */overflow: visible; /* 2 */
}/*** 1. Correct the inheritance and scaling of font size in all browsers.* 2. Correct the odd `em` font sizing in all browsers.*/pre {font-family: monospace, monospace; /* 1 */font-size: 1em; /* 2 */
}/* Text-level semantics========================================================================== *//*** 1. Remove the gray background on active links in IE 10.* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.*/a {background-color: transparent; /* 1 */-webkit-text-decoration-skip: objects; /* 2 */
}/*** Remove the outline on focused links when they are also active or hovered* in all browsers (opinionated).*/a:active,
a:hover {outline-width: 0;
}/*** 1. Remove the bottom border in Firefox 39-.* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.*/abbr[title] {border-bottom: none; /* 1 */text-decoration: underline; /* 2 */text-decoration: underline dotted; /* 2 */
}/*** Prevent the duplicate application of `bolder` by the next rule in Safari 6.*/b,
strong {font-weight: inherit;
}/*** Add the correct font weight in Chrome, Edge, and Safari.*/b,
strong {font-weight: bolder;
}/*** 1. Correct the inheritance and scaling of font size in all browsers.* 2. Correct the odd `em` font sizing in all browsers.*/code,
kbd,
samp {font-family: monospace, monospace; /* 1 */font-size: 1em; /* 2 */
}/*** Add the correct font style in Android 4.3-.*/dfn {font-style: italic;
}/*** Add the correct background and color in IE 9-.*/mark {background-color: #ff0;color: #000;
}/*** Add the correct font size in all browsers.*/small {font-size: 80%;
}/*** Prevent `sub` and `sup` elements from affecting the line height in* all browsers.*/sub,
sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;
}sub {bottom: -0.25em;
}sup {top: -0.5em;
}/* Embedded content========================================================================== *//*** Add the correct display in IE 9-.*/audio,
video {display: inline-block;
}/*** Add the correct display in iOS 4-7.*/audio:not([controls]) {display: none;height: 0;
}/*** Remove the border on images inside links in IE 10-.*/img {border-style: none;
}/*** Hide the overflow in IE.*/svg:not(:root) {overflow: hidden;
}/* Forms========================================================================== *//*** 1. Change the font styles in all browsers (opinionated).* 2. Remove the margin in Firefox and Safari.*/button,
input,
optgroup,
select,
textarea {font-family: sans-serif; /* 1 */font-size: 100%; /* 1 */line-height: 1.15; /* 1 */margin: 0; /* 2 */
}/*** Show the overflow in IE.* 1. Show the overflow in Edge.*/button,
input { /* 1 */overflow: visible;
}/*** Remove the inheritance of text transform in Edge, Firefox, and IE.* 1. Remove the inheritance of text transform in Firefox.*/button,
select { /* 1 */text-transform: none;
}/*** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`*    controls in Android 4.* 2. Correct the inability to style clickable types in iOS and Safari.*/button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {-webkit-appearance: button; /* 2 */
}/*** Remove the inner border and padding in Firefox.*/button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;
}/*** Restore the focus styles unset by the previous rule.*/button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;
}/*** Change the border, margin, and padding in all browsers (opinionated).*/fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;
}/*** 1. Correct the text wrapping in Edge and IE.* 2. Correct the color inheritance from `fieldset` elements in IE.* 3. Remove the padding so developers are not caught out when they zero out*    `fieldset` elements in all browsers.*/legend {box-sizing: border-box; /* 1 */color: inherit; /* 2 */display: table; /* 1 */max-width: 100%; /* 1 */padding: 0; /* 3 */white-space: normal; /* 1 */
}/*** 1. Add the correct display in IE 9-.* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.*/progress {display: inline-block; /* 1 */vertical-align: baseline; /* 2 */
}/*** Remove the default vertical scrollbar in IE.*/textarea {overflow: auto;
}/*** 1. Add the correct box sizing in IE 10-.* 2. Remove the padding in IE 10-.*/[type="checkbox"],
[type="radio"] {box-sizing: border-box; /* 1 */padding: 0; /* 2 */
}/*** Correct the cursor style of increment and decrement buttons in Chrome.*/[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {height: auto;
}/*** 1. Correct the odd appearance in Chrome and Safari.* 2. Correct the outline style in Safari.*/[type="search"] {-webkit-appearance: textfield; /* 1 */outline-offset: -2px; /* 2 */
}/*** Remove the inner padding and cancel buttons in Chrome and Safari on macOS.*/[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;
}/*** 1. Correct the inability to style clickable types in iOS and Safari.* 2. Change font properties to `inherit` in Safari.*/::-webkit-file-upload-button {-webkit-appearance: button; /* 1 */font: inherit; /* 2 */
}/* Interactive========================================================================== *//** Add the correct display in IE 9-.* 1. Add the correct display in Edge, IE, and Firefox.*/details, /* 1 */
menu {display: block;
}/** Add the correct display in all browsers.*/summary {display: list-item;
}/* Scripting========================================================================== *//*** Add the correct display in IE 9-.*/canvas {display: inline-block;
}/*** Add the correct display in IE.*/template {display: none;
}/* Hidden========================================================================== *//*** Add the correct display in IE 10-.*/[hidden] {display: none;
}

百分比布局得应用 —— 模仿京东移动端首页相关推荐

京东移动端首页-流式布局
京东移动端首页采用流式布局(百分比布局) 采用流式布局(百分比布局) 主要源码: <!DOCTYPE html> <html lang="en">< ...
京东移动端首页案例
1.上次我们说过京东移动端的首页是通过单独制作的. 所以我们采取单独制作移动页面的方案 2.布局采用流式布局静态.自适应.流式.响应式的特点点击直达. 设置视口标签:<meta name= ...
[html] 百度、淘宝、京东移动端首页秒开是如何做到的？
[html] 百度.淘宝.京东移动端首页秒开是如何做到的? 我猜是,服务端渲染, 解决首屏加载慢的方式, 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨 ...
移动端+京东移动端首页制作
一:移动端的viewport 手机拥有了浏览器的初期,人们并没有专门为移动设备设计页面,造成的直接结果就是,访问的页面是直接将电脑页面进行缩放,操作起来有诸多不便,viewport就是用来解决这个问题 ...
移动端HTML开发(模仿京东移动端)
制作过程中问题总结: 1.对于body特殊设置解释 body {width: 100%;margin: 0 auto;min-width: 320px;max-width: 640px;font-si ...
vm vh移动端布局及 bilibili官网移动端首页布局
vm和vh是啥? 市场上的移动端大多数为flex布局,此时我们用到了rem这个单位,但是rem需要媒体查询,要根据页面是尺寸进行修改,而vm/vh省去各种判断和修改,像B站就通过vue和vm写的. v ...
05移动端布局基础之flex弹性布局项目实战(携程移动端首页)
技术交流QQ群:1027579432,欢迎你的加入! 1.携程网移动端首页打开网址:m.ctrip.com 2.技术选型方案:采取单独制作移动页面方案技术:布局采取flex布局 3.搭建相关文件 ...
02移动端布局基础之流式布局项目实战(京东移动端首页)
技术交流QQ群:1027579432,欢迎你的加入! 1.技术选型方案:采取单独制作移动页面方案技术:布局采取流式布局 2.搭建相关文件夹结构 3.设置视口标签以及引入初始化样式 ``` < ...
（50）流式布局—京东移动端首页制作案例
一.访问地址多快好省,购物上京东! 二.技术选型方案:我们采取单独制作移动页面方案技术:布局采取流式布局三.搭建相关文件夹结构四.设置视口标签以及引入初始化样式 <meta name= ...
Android模仿京东登录注册,Android：布局实例之模仿京东登录界面
1 <?xml version="1.0" encoding="utf-8"?> 2 3 android:layout_width="ma ...

百分比布局得应用 —— 模仿京东移动端首页

写在前面

百分比布局得应用 —— 模仿京东移动端首页相关推荐

最新文章

热门文章