涉及知识点:
静态页面
flex布局
二倍图
定位
代码实现:
index.html部分代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--移动端设置viewport-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<!--引入公共样式-->
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">
<title>京东首页移动端</title>
</head>
<body>
<!------------ 顶部 ------------>
<header>
<a href="javascript:;" class="classify"></a>
<form action="" class="search">
<span>|</span>
<input type="text" placeholder="请输入商品名称">
</form>
<a href="javascript:;" class="login">登录</a>
</header>
<!------------ 轮播图 ------------>
<div class="banner">
<!-- 图 -->
<ul class="bannerImg">
<li>
<a href=""><img src="images/banner2.jpg"></a>
</li>
<li>
<a href=""><img src="images/banner1.jpg"></a>
</li>
<li>
<a href=""><img src="images/banner3.jpg"></a>
</li>
<li>
<a href=""><img src="images/banner4.jpg"></a>
</li>
<li>
<a href=""><img src="images/banner5.jpg"></a>
</li>
</ul>
<!-- 点 -->
<ul class="bannerPoint">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!----------- 导航栏 ------------>
<nav>
<ul class="navUl">
<li>
<a href="javascript:;">
<img src="images/nav1.jpg">
<span>京东超市</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/nav2.jpg">
<span>数码电器</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/nav3.jpg">
<span>京东服饰</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/nav4.jpg">
<span>京东生鲜</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/nav5.jpg">
<span>京东到家</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/nav6.jpg">
<span>充值缴费</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/nav7.jpg">
<span>9.9元拼</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/nav8.jpg">
<span>领券</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/nav9.jpg">
<span>赚钱</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/nav10.jpg">
<span>全部</span>
</a>
</li>
</ul>
</nav>
<!---------- 推荐模块 ------------>
<div class="recommend">
<a href="javascript:;">
<img src="images/re3.png">
</a>
<a href="javascript:;">
<img src="images/re2.png">
</a>
<a href="javascript:;">
<img src="images/re1.png">
</a>
</div>
<!---------- 新人专享模块 ------------>
<div class="newUser">
<a href="javascript:;"><img src="images/user1.png"></a>
<a href="javascript:;"><img src="images/user2.png"></a>
</div>
<!-------- 京东快报模块 ---------->
<div class="news">
<a href="javascript:;" class="news_left">
<img src="images/jdkb.jpg">
</a>
<div class="scrollNews">
<a href="javascript:;">
<span style="color: red; margin:0 10px;">最新</span>
<span>哈哈哈哈哈哈哈哈哈哈拽人</span>
</a>
</div>
<a href="javascript:;" class="news_right">更多 </a>
</div>
<!---------- 商品模块 ---------->
<div class="goods">
<a href="#" class="goodsTitle">
<img src="images/goodsTitle.png">
</a>
<ul class="goodsContent">
<li>
<img src="images/good1.jpg" alt="">
<a href="#">我是商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a>
</li>
<li>
<img src="images/good2.jpg" alt="">
<a href="#">我是商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a>
</li>
<li>
<img src="images/good5.jpg" alt="">
<a href="#">我是商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a>
</li>
<li>
<img src="images/good4.jpg" alt="">
<a href="#">我是商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a>
</li>
<li>
<img src="images/good6.jpg" alt="">
<a href="#">我是商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a>
</li>
<li>
<img src="images/good7.jpg" alt="">
<a href="#">我是商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a>
</li>
</ul>
</div>
</body>
</html>
bash.css部分代码:
/*公共样式*/
/*1.样式重置*/
html,
body,
ul,
li,
img,
a,
p,
div,
form,
input {
padding: 0;
margin: 0;
/*设置盒模型*/
box-sizing: border-box;
/*去除移动端特有的点击高亮效果*/
-webkit-tap-highlight-color: transparent;
}
body {
font-family: "微软雅黑", sans-serif;
font-size: 14px;
width: 100%;
/*最大宽度*/
max-width: 640px;
/*最小宽度*/
min-width: 320px;
margin: 0 auto;
background-color: #eee;
border: 1px solid #ccc;
}
a,
a:hover {
color: #666;
/* 去除默认下划线 */
text-decoration: none;
}
ul {
list-style: none;
}
input {
/*1.清除文本框获取焦点时默认的边框阴影*/
outline: none;
/*2.去除边框*/
border: none;
/*3.添加边框*/
border: 1px solid #ccc;
}
index.css部分代码:
/*********** 顶部 ************/
header {
position: fixed;
/*设置为flex布局*/
display: flex;
height: 44px;
width: 100%;
min-width: 320px;
max-width: 640px;
z-index: 1;
}
.classify,
.login {
width: 40px;
}
.login {
color: #fff;
line-height: 44px;
}
.classify::before {
content: "";
display: block;
width: 22px;
height: 18px;
margin: 14px 0 0 15px;
background: url(../images/jd-sprites.png) no-repeat 0 -30px;
/* 二倍精灵图 */
background-size: 200px auto;
}
.search {
position: relative;
background-color: #fff;
flex: 1;
margin: 5px 10px;
border-radius: 15px;
}
.search::before {
content: "";
display: block;
width: 20px;
height: 15px;
position: absolute;
top: 9px;
left: 11px;
background: url(../images/jd-sprites.png) no-repeat 0 0;
background-size: 200px auto;
}
.search::after {
content: "";
display: block;
width: 20px;
height: 15px;
position: absolute;
top: 10px;
left: 50px;
background: url(../images/jd-sprites.png) no-repeat -83px 0;
background-size: 200px auto;
}
header .search span {
position: absolute;
top: 6px;
left: 35px;
color: #ccc;
}
header .search input {
position: absolute;
top: 0;
left: 80px;
height: 100%;
width: 80%;
border: none;
}
/*********** 轮播图 ***********/
.banner {
position: relative;
width: 100%;
overflow: hidden;
}
ul.bannerImg {
width: 500%;
}
.bannerImg li {
float: left;
display: block;
width: 20%;
}
.bannerImg img {
width: 100%;
}
/* 点 */
ul.bannerPoint {
position: absolute;
left: 50%;
bottom: 8px;
transform: translateX(-50%);
}
.bannerPoint li {
width: 6px;
height: 6px;
border-radius: 3px;
border: 1px solid #fff;
float: left;
margin-left: 10px;
cursor: pointer;
transition: all 0.4;
}
.bannerPoint li:hover {
transform: scale(1.2);
border: 3px solid #fff;
}
/* @keyframes bannerRun {
0% {
background-position: 0 0;
}
100% {
background-position: -1000px 0;
}
} */
/************* 导航栏 **************/
.navUl {
display: flex;
flex-wrap: wrap;
}
.navUl li {
flex: 20%;
}
.navUl li a {
display: flex;
/* 把主轴设置为y轴 */
flex-direction: column;
/* 沿侧轴方向居中对齐 */
align-items: center;
}
.navUl li img {
width: 50%;
border-radius: 50%;
margin: 10px auto;
}
/************* 推荐模块 **************/
.recommend {
display: flex;
}
.recommend a {
flex: 1;
}
.recommend a img {
width: 100%;
}
/************* 新人专享模块 **************/
.newUser {
display: flex;
border-radius: 20px;
overflow: hidden;
margin: 0 10px;
}
.newUser a {
flex: 1;
}
.newUser a img {
width: 100%;
}
/************* 京东快报模块 **************/
.news {
position: relative;
height: 30px;
line-height: 30px;
margin: 8px;
background-color: #fff;
}
.news_left {
position: absolute;
top: 0;
left: 0;
width: 25%;
}
.news_left img {
width: 100%;
height: 30px;
}
.news_right {
position: absolute;
top: 0;
right: 0;
padding: 0 10px;
border-left: 1px solid #ccc;
}
.scrollNews {
position: relative;
top: 0;
left: 25%;
}
/************* 商品模块 **************/
.goods {
background-color: #fff;
}
.goodsTitle {
width: 100%;
}
.goodsTitle img {
width: 100%;
}
.goodsContent {
position: relative;
display: flex;
flex-wrap: wrap;
}
.goodsContent li {
flex: 50%;
width: 100%;
padding: 0 20px;
}
.goodsContent li img {
width: 100%;
position: relative;
}