生活随笔
收集整理的這篇文章主要介紹了
用HTML和CSS做一个简单的静态京东手机端页面含源码分享
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
10分鐘內(nèi)的時(shí)間可以完成，具體完成效果如下：
百度鏈接：https://pan.baidu.com/s/11XGuDfeDZsY2xYYmq4KcRg ?提取碼：42jq
整體文件為：
代碼部分：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/nor.css"><link rel="stylesheet" href="css/index.css"><title>京東移動(dòng)端頁(yè)面</title>
</head><body><header class="app"><ul><li><img src="images/close.png" alt=""></li><li><img src="images/logo.png" alt=""></li><li>打開(kāi)京東App，購(gòu)物更輕松</li><li>立即打開(kāi)</li></ul></header><div class="search-wrap"><div class="search-btn"></div><div class="search"><div class="jd-icon"></div><div class="sou"></div></div><div class="search-login">登陸</div></div><div class="main-content"><div class="slider"><img src="images/mb.dpg.webp.jpg" alt=""></div><nav class="clearfix"><a href=""><img src="images/cs.png" alt=""><span>京東超市</span></a><a href=""><img src="images/sm.png" alt=""><span>數(shù)碼電器</span></a><a href=""><img src="images/fs.png" alt=""><span>京東服飾</span></a><a href=""><img src="images/sx.png" alt=""><span>京東生鮮</span></a><a href=""><img src="images/dj.png" alt=""><span>京東到家</span></a><a href=""><img src="images/cz.png" alt=""><span>充值繳費(fèi)</span></a><a href=""><img src="images/pt.png" alt=""><span>9.9元拼</span></a><a href=""><img src="images/ljt.png" alt=""><span>領(lǐng)卷</span></a><a href=""><img src="images/ljt.png" alt=""><span>領(lǐng)金貼</span></a><a href=""><img src="images/zx.png" alt=""><span>PLUS會(huì)員</span></a></nav><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><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;font-size: 14px;font-family: -apple-system, Helvetica, sans-serif;color: #666;line-height: 1.5;
}
* {-webkit-tap-highlight-color: transparent;
}
input {-webkit-appearance: none;
}
img,
a {-webkit-touch-callout: none;
}a {color: #666;text-decoration: none;
}ul {margin: 0;padding: 0;list-style: none;
}img {vertical-align: middle;
}div {box-sizing: border-box;
}
.clearfix:after {content: "";display: block;line-height: 0;visibility: hidden;height: 0;clear: both;
}
.app {height: 45px;
}
.app ul li {float: left;height: 45px;line-height: 45px;background-color: #333333;text-align: center;color: #fff;
}
.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: #F63515;
}
.search-wrap {position: fixed;overflow: hidden;width: 100%;height: 44px;min-width: 320px;max-width: 640px;
}
.search-btn {position: absolute;top: 0;left: 0;width: 40px;height: 44px;
}
.search-btn::before {content: "";display: block;width: 20px;height: 18px;background: url(../images/s-btn.png) no-repeat;background-size: 20px 18px;margin: 14px 0 0 15px;
}
.search-login {position: absolute;right: 0;top: 0;width: 40px;height: 44px;color: #fff;line-height: 44px;
}
.search {position: relative;height: 30px;background-color: #fff;margin: 0 50px;border-radius: 15px;margin-top: 7px;
}
.jd-icon {width: 20px;height: 15px;position: absolute;top: 8px;left: 13px;background: url(../images/jd.png) no-repeat;background-size: 20px 15px;
}
.jd-icon::after {content: "";position: absolute;right: -8px;top: 0;display: block;width: 1px;height: 15px;background-color: #ccc;
}
.sou {position: absolute;top: 8px;left: 50px;width: 18px;height: 15px;background: url(../images/jd-sprites.png) no-repeat -81px 0;background-size: 200px auto;
}
.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 {padding-top: 5px;
}
nav a {float: left;width: 20%;text-align: center;
}
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;
}
html {font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
body {margin: 0;
}
article,
aside,
footer,
header,
nav,
section {display: block;
}
h1 {font-size: 2em;margin: 0.67em 0;
}
figcaption,
figure,
main { display: block;
}
figure {margin: 1em 40px;
}
hr {box-sizing: content-box; height: 0; overflow: visible;
}
pre {font-family: monospace, monospace; font-size: 1em;
}
a {background-color: transparent; -webkit-text-decoration-skip: objects;
}
a:active,
a:hover {outline-width: 0;
}
abbr[title] {border-bottom: none; text-decoration: underline; text-decoration: underline dotted;
}
b,
strong {font-weight: inherit;
}
b,
strong {font-weight: bolder;
}
code,
kbd,
samp {font-family: monospace, monospace; font-size: 1em;
}
dfn {font-style: italic;
}
mark {background-color: #ff0;color: #000;
}
small {font-size: 80%;
}
sub,
sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;
}
sub {bottom: -0.25em;
}
sup {top: -0.5em;
}
audio,
video {display: inline-block;
}
audio:not([controls]) {display: none;height: 0;
}
img {border-style: none;
}
svg:not(:root) {overflow: hidden;
}
button,
input,
optgroup,
select,
textarea {font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0;
}
button,
input { overflow: visible;
}
button,
select { text-transform: none;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;
}
fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;
}
legend {box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal;
}
progress {display: inline-block; vertical-align: baseline;
}
textarea {overflow: auto;
}
[type="checkbox"],
[type="radio"] {box-sizing: border-box; padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {height: auto;
}
[type="search"] {-webkit-appearance: textfield; outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;
}
::-webkit-file-upload-button {-webkit-appearance: button; font: inherit;
}
details,
menu {display: block;
}
summary {display: list-item;
}
canvas {display: inline-block;
}
template {display: none;
}
[hidden] {display: none;
}
images和upload都為圖片部分，鏈接下載即可~
總結(jié)
以上是生活随笔為你收集整理的用HTML和CSS做一个简单的静态京东手机端页面含源码分享的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
