实现京东首页手机版
这次的项目是显示移动端的京东首页：
先讲下思路，总体来看京东的手机版是分为三部分的，第一部分是头部导航栏，第二部分是头部的轮播图，第三部分是中间的导航，最后就是京东超市的主体内容部分了：
<!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-Compatible" content="ie=edge">
<link rel="stylesheet" type="" href="./css/index.css">
<title>Document</title>
</head>
<body>
<div class="index-layout">
<!--头部导航-->
<header>
<a href="javascript:void(0);"></a>
<input type="search" placeholder=" 请输入要查找的内容">
<a href="javascript:void(0);">登录</a>
</header>
<!--轮播图-->
<div class="index-banner">
<!--图片-->
<ul class="banner-img clearfix">
<li><a href="javascript:void(0)"><img src="./images/l1.jpg" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="./images/l2.jpg" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="./images/l3.jpg" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="./images/l4.jpg" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="./images/l5.jpg" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="./images/l6.jpg" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="./images/l7.jpg" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="./images/l8.jpg" alt=""></a></li>
</ul>
<!--小圆点-->
<ul class="banner-index clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--中间导航-->
<div class="index-nav">
<ul class="nav-banner">
<li><a href="javascript:void(0)">
<img src="images/nav0.png" alt="">
<p>分类信息</p>
</a></li>
<li><a href="javascript:void(0)">
<img src="images/nav1.png" alt="">
<p>分类信息</p>
</a></li>
<li><a href="javascript:void(0)">
<img src="images/nav2.png" alt="">
<p>分类信息</p>
</a></li>
<li><a href="javascript:void(0)">
<img src="images/nav3.png" alt="">
<p>分类信息</p>
</a></li>
<li><a href="javascript:void(0)">
<img src="images/nav4.png" alt="">
<p>分类信息</p>
</a></li>
<li><a href="javascript:void(0)">
<img src="images/nav5.png" alt="">
<p>分类信息</p>
</a></li>
<li><a href="javascript:void(0)">
<img src="images/nav6.png" alt="">
<p>分类信息</p>
</a></li>
<li><a href="javascript:void(0)">
<img src="images/nav7.png" alt="">
<p>分类信息</p>
</a></li>
</ul>
</div>
<!--主体内容-->
<div class="index-main">
<!--掌上秒杀-->
<section class="second-kill">
<!--头部-->
<div class="top">
<div class="left">
<span></span>
<span>掌上秒杀</span>
<ul>
<li>0</li>
<li>0</li>
<li>:</li>
<li>0</li>
<li>0</li>
<li>:</li>
<li>0</li>
<li>0</li>
</ul>
</div>
<div class="right"><a href="javascript:void(0)">更多></a></div>
</div>
<!--底部-->
<div class="bottom">
<ul>
<li><a href="javascript:void(0);">
<img src="images/detail01.jpg" alt="">
<p>￥10.00</p>
<p>￥100.00</p>
</a></li>
<li><a href="javascript:void(0);">
<img src="images/detail02.jpg" alt="">
</a>
<!--不会把a标签的宽度撑那么大，好设置竖线-->
<p>￥10.00</p>
<p>￥100.00</p>
</li>
<li><a href="javascript:void(0);">
<img src="images/detail01.jpg" alt="">
<p>￥10.00</p>
<p>￥100.00</p>
</a></li>
</ul>
</div>
</section>
<!--京东超市-->
<section>
<div class="top"><a href="javascript:void(0)">京东超市</a></div>
<div class="bottom clearfix">
<a class="bd-r fl" href="#"><img src="images/cp1.jpg" alt=""></a>
<a class="bd-b fr" href="#"><img src="images/cp2.jpg" alt=""></a>
<a class="fr" href="#"><img src="images/cp3.jpg" alt=""></a>
</div>
</section>
<!---->
<section >
<div class="top"><a href="javascript:void(0)">京东超市</a></div>
<div class="bottom clearfix">
<a class="bd-l white fr" href="#"><img src="images/cp4.jpg" alt=""></a>
<a class="bd-b white fl" href="#"><img src="images/cp5.jpg" alt=""></a>
<a class="fl" href="#"><img src="images/cp6.jpg" alt=""></a>
</div>
</section>
<section>
<div class="top"><a href="javascript:void(0)">京东超市</a></div>
<div class="bottom clearfix">
<a class="bd-r fl" href="#"><img src="images/cp1.jpg" alt=""></a>
<a class="bd-b fr" href="#"><img src="images/cp2.jpg" alt=""></a>
<a class="fr" href="#"><img src="images/cp3.jpg" alt=""></a>
</div>
</section>
</div>
</div>
</body>
</html>
//引入需要的js插件
<!--<script src="js/index.js"></script>-->
<script src="js/jquery-3.1.1.min.js"></script>
<script src='js/jquery.js'></script>
//css样式：
@charset "UTF-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix::before,
.clearfix::after {
content: '';
display: block;
visibility: hidden;
line-height: 0;
height: 0;
clear: both;
}
input {
border: none;
outline: none;
}
[class^='bd-'] {
position: relative;
}
[class^='bd-']::before {
position: absolute;
}
[class^='bd-'].white::before {
background-color: white;
}
.bd-t::before {
content: '';
width: 100%;
height: 1px;
top: 0;
left: 0;
background-color: #666;
}
.bd-b::before {
content: '';
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #666;
}
.bd-l::before {
content: '';
width: 1px;
height: 100%;
bottom: 0;
left: 0;
background-color: #666;
}
.bd-r::before {
content: '';
width: 1px;
height: 100%;
bottom: 0;
right: 0;
background-color: #666;
}
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%
/* 2 */
}
/* 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 */
}
/**
* 1. Remove the bottom border in Chrome 57- and 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"],
[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;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 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,
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;
}
.index-layout {
min-width: 320px;
max-width: 640px;
margin: 0 auto;
}
header {
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
/*变量保存，直接用变量名*/
background-color: rgba(235, 48, 61, 0);
position: fixed;
z-index: 998;
width: 100%;
min-width: 320px;
max-width: 640px;
}
header a {
color: white;
width: 60px;
line-height: 40px;
text-align: center;
}
header a:first-child {
width: 60px;
height: 21px;
background: url(../images/sprites.png) no-repeat 0 -109px;
background-size: 200px 200px;
margin: 0 10px;
}
header input {
height: 30px;
border-radius: 15px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.index-banner {
overflow: hidden;
position: relative;
}
.index-banner .banner-img {
width: 1000%;
-webkit-transform: translateX(-10%);
-ms-transform: translateX(-10%);
transform: translateX(-10%);
}
.index-banner .banner-img li {
width: 10%;
float: left;
}
.index-banner .banner-img li a {
width: 100%;
display: block;
}
.index-banner .banner-img li a img {
width: 100%;
display: block;
}
.index-banner .banner-index {
position: absolute;
bottom: 4px;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
height: 5px;
}
.index-banner .banner-index li {
height: 6px;
width: 6px;
float: left;
margin-right: 3px;
background-color: white;
border-radius: 50%;
}
.index-banner .banner-index .current {
background-color: #666;
box-shadow: 0 0 20px 5px yellowgreen;
}
.index-nav .nav-banner {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 10px;
}
.index-nav .nav-banner li {
width: 25%;
}
.index-nav .nav-banner li a {
display: block;
width: 100%;
}
.index-nav .nav-banner li a img {
display: block;
width: 60%;
margin: 0 auto;
}
.index-nav .nav-banner li a p {
font-size: 12px;
padding: 10px 0;
text-align: center;
color: #666;
}
.index-main {
background-color: greenyellow;
padding: 10px 5px 0;
}
.index-main section {
width: 100%;
margin-bottom: 10px;
}
.index-main section .top {
height: 32px;
background-color: white;
border-bottom: 1px solid #ccc;
}
.index-main section .bottom {
background-color: white;
}
.index-main .second-kill .top {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.index-main .second-kill .top .left {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 14px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.index-main .second-kill .top .left span {
margin-left: 5px;
}
.index-main .second-kill .top .left span:nth-child(1) {
width: 20px;
height: 25px;
background: url(../images/seckill-icon.png) no-repeat center;
background-size: 20px 25px;
}
.index-main .second-kill .top .left span:nth-child(2) {
color: #c91523;
}
.index-main .second-kill .top .left ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-left: 5px;
}
.index-main .second-kill .top .left ul li {
background-color: black;
color: white;
margin-right: 2px;
}
.index-main .second-kill .top .left ul li:nth-child(3n) {
background-color: white;
color: black;
}
.index-main .second-kill .top .right a {
font-size: 14px;
color: #666;
line-height: 32px;
margin-right: 5px;
}
.index-main .second-kill .bottom {
padding-top: 5px;
}
.index-main .second-kill .bottom ul {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.index-main .second-kill .bottom ul li {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.index-main .second-kill .bottom ul li a {
display: block;
width: 100%;
}
.index-main .second-kill .bottom ul li a img {
width: 60%;
display: block;
margin: 0 auto;
}
.index-main .second-kill .bottom ul li p {
text-align: center;
font-size: 12px;
padding: 5px 0;
color: #666;
}
.index-main .second-kill .bottom ul li p:nth-of-type(1) {
color: red;
}
.index-main .second-kill .bottom ul li p:nth-of-type(2) {
text-decoration: line-through;
}
.index-main .second-kill .bottom ul li:nth-of-type(2) a {
border-left: 1px solid black;
border-right: 1px solid yellowgreen;
}
.index-main section:not(.second-kill) .top {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.index-main section:not(.second-kill) .top a {
margin-left: 5px;
width: 100%;
padding-left: 10px;
border-left: 4px solid #c91523;
color: #666;
}
.index-main section:not(.second-kill) .bottom a {
width: 50%;
display: block;
}
.index-main section:not(.second-kill) .bottom a img {
width: 100%;
display: block;
}
//js样式
// 改变导航的透明度
// 获取屏幕滚动高度，得到最大滚动距离，得到透明度，限制透明度，改变导航透明度
function changeColor(){
var header=document.querySelector('header');
var maxHeight=document.querySelector('.second-kill').offsetHeight;
// console.log(maxHeight);
// 滚动事件
window.onscroll=function(){
var scollHeight=document.body.scrollTop;
// console.log(scollHeight);
// 两个数相除，得到透明度
var op=parseFloat(scollHeight/maxHeight);
// console.log(op);
if(op>1){
op=0.8;
}
header.style.backgroundColor='rgba(253,48,61,'+op+')';
}
}
changeColor();
function changeTime(){
// 倒计时思路，
// 先设定一个以秒为单位的总时间
// 每一次减一
// 总时间换算成时分秒
// 在根据时分秒给每个li标签设置十位个位的具体数值
// 获取元素
var liLis=document.querySelectorAll('.second-kill .top li');
//总时间
var total=5678;
// 定时器
var timer= setInterval(function(){
total--;
if(total<0){
clearInterval(timer);
alert('今天的抢购结束了！');
return;
}
var hour=Math.floor(total/3600);
var min=Math.floor(total%3600/60);
var sec=total%60;
// 时 十位，个位
liLis[0].innerHTML=Math.floor(hour/10);
liLis[1].innerHTML=Math.floor(hour%10);
// 分 十位，个位
liLis[3].innerHTML=Math.floor(min/10);
liLis[4].innerHTML=Math.floor(min%10);
// 秒 十位，个位
liLis[6].innerHTML=Math.floor(sec/10);
liLis[7].innerHTML=Math.floor(sec%10);
},10)
}
changeTime();
浙公网安备 33010602011771号