静态页面1-实现京东移动端首页
Posted JackySei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了静态页面1-实现京东移动端首页相关的知识，希望对你有一定的参考价值。
2021.6.24
为了更好的掌握各种布局和样式，模仿着写了几个移动端的首页。
分别采用了不同的布局方式。这个例子主要采用流式布局（百分比布局）
有时间的话会继续优化。
需要注意的地方有：
1.合理运用百分比。
2.注意区分text-align，vertical-align，line-height的区别和原理。
3.合理的使用伪元素可以事半功倍。
4.js文件只实现搜索栏滚动之后的固定。
效果如图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
<title>移动端京东官网</title>
<script src="index.js"></script>
</head>
<body>
<!-- 标题部分 -->
<header class="app">
<ul>
<li><img src="images/close.png" alt=""></li>
<li><img src="images/logo.png" alt=""></li>
<li>打开京东App,购物更轻松</li>
<li>立即打开</li>
</ul>
</header>
<!-- 搜索 -->
<div class="search-wrap" id="search-wrap">
<div class="search-btn"></div>
<div class="search">
<div class="jd-icon"></div>
<div class="sou"></div>
<input class="data" type="text" placeholder="输入你想搜索的产品" maxlength="20">
</div>
<div class="search-login">登录</div>
</div>
<!-- 主体 -->
<div class="main-content">
<!-- 滑动图 -->
<div class="slider">
<img src="upload/banner.dpg" alt="">
</div>
<!-- 品牌日 -->
<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>
<!-- 导航按钮 -->
<nav>
<a href="">
<img src="upload/nav1.webp" alt="">
<p>京东超市</p>
</a>
<a href="">
<img src="upload/nav2.webp" alt="">
<p>京东超市</p>
</a>
<a href="">
<img src="upload/nav3.webp" alt="">
<p>京东超市</p>
</a>
<a href="">
<img src="upload/nav1.webp" alt="">
<p>京东超市</p>
</a>
<a href="">
<img src="upload/nav2.webp" alt="">
<p>京东超市</p>
</a>
<a href="">
<img src="upload/nav3.webp" alt="">
<p>京东超市</p>
</a>
<a href="">
<img src="upload/nav1.webp" alt="">
<p>京东超市</p>
</a>
<a href="">
<img src="upload/nav2.webp" alt="">
<p>京东超市</p>
</a>
<a href="">
<img src="upload/nav3.webp" alt="">
<p>京东超市</p>
</a>
<a href="">
<img src="upload/nav2.webp" alt="">
<p>京东超市</p>
</a>
<div style="clear:both;"></div>
</nav>
<!-- 新闻快报 -->
<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>
css
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
font-family: -apple-system, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.5;
height: 2000px;
}
a{
color: #666;
text-decoration: none;
}
img{
vertical-align: middle;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.app{
height: 45px;
}
.app ul li{
height: 45px;
float: left;
background-color: #333;
text-align: center;
line-height: 45px;
color:#fff;
}
.app ul li:nth-child(1){
width: 8%;
}
.app ul li:nth-child(1) img{
width: 10px;
vertical-align: middle;
}
.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){
background-color: #F63513;
width: 25%;
}
/* 搜索 */
.search-wrap{
height: 44px;
position: relative;
overflow: hidden;
min-width: 320px;
max-width: 640px;
width: 100%;
background-color: #F63513;
}
.search-btn{
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 44px;
}
.search-btn::before{
content: "";
display: block;
height: 18px;
width: 20px;
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;
margin-top: 7px;
border-radius: 15px;
}
.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: "";
display: block;
position: absolute;
width: 1px;
height: 15px;
top: 0;
right: -8px;
background-color: #ccc;
}
.sou{
width: 18px;
height: 15px;
position: absolute;
top: 8px;
left: 50px;
background: url(../images/jd-sprites.png) no-repeat -81px 0;
background-size: 200px auto;
}
.data{
display: inline-block;
width: 70%;
border: none;
position: absolute;
top: 5px;
left: 75px;
line-height: 15px;
vertical-align: middle;
}
.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 a{
float: left;
width: 20%;
text-align: center;
}
nav a img{
width: 40px;
margin: 10px 0;
}
.news{
margin-top: 20px;
}
.news a{
float: left;
box-sizing: border-box;
}
.news img{
width:100%;
}
.news a:nth-child(1){
width: 50%;
}
.news a:nth-child(2){
width: 25%;
border-left: 1px solid #ccc;
}
.news a:nth-child(3){
width: 25%;
border-left: 1px solid #ccc;
}
js
window.onscroll=function(){
var topScroll = document.documentElement.scrollTop || document.body.scrollTop
var search=document.getElementById("search-wrap")
if(topScroll>44){
search.style.position="fixed";
search.style.top='0'
}else{
search.style.position="relative";
}
console.log(topScroll)
}
以上是关于静态页面1-实现京东移动端首页的主要内容，如果未能解决你的问题，请参考以下文章