这是我参与「4月日新计划更文活动」的第3天。
昨天我把自己的网页优化了一下，但是还是觉得不够完美，所以我就拿着京东的网页，借鉴和优化一下，用到自己的网页中，学习大厂是怎么进行编程的。
首先截图看一下京东首页的效果。
页面大概就是这样。
还是经典的布局方式。头部导航，主体内容，以及尾部的网站标识。
那么，现在我借用它的样式，放到自己的网页中实现一些页面效果吧。
我把这部分的代码分享给大家。
代码如下：
<!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" />
<meta name="keywords" contect="web前端 | 技术文章" />
<meta name="description" contect="写web前端技术文章的地方" />
<meta name="author" contect="写前端的小北" />
<title>我的新页面</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
html,body{
background: #f4f4f4;
}
.header{
margin-bottom: 24px;
}
.header .nav{
width: 100%;
height: 80px;
background: url('https://img20.360buyimg.com/pop/jfs/t1/118404/27/34596/64060/642bd61cF19565c1c/273ed3fa39e32fe1.jpg.avif') center center no-repeat;
background-size: cover;
}
.header .shortcut{
border-bottom: 1px solid #ddd;
background-color: #e3e4e5;
height: 30px;
line-height: 30px;
color: #999;
}
.m_w{
margin: 0 auto;
width: 1190px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}
.container {
width: 100%;
height: 700px;
line-height: 400px;
text-align: center;
font-size: 24px;
}
.h260{
height: 260px;
background: #fff;
}
.slider{
width: 190px;
height: 100%;
background: #e83632;
font-size: 28px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.con{
font-size: 28px;
color: #666;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 24px;
color: #fff;
background: #000033;
}
</style>
<body>
<div class="header">
<div class="nav"></div>
<div id="shortcut" class="shortcut">
<div class="m_w">
<span>你好，请登录</span>
<span>网站无障碍</span>
</div>
</div>
</div>
<div class="container">
<div class="m_w h260">
<div class="slider">京东秒杀</div>
<div class="con">我是商品</div>
</div>
</div>
<div class="footer">尾部</div>
</body>
</html>
代码只完成一部分，接着有时间会往下继续写完。
今天学习页面布局，又学到了一个新的知识点，叫做弹性布局。这个我会在后面的文章里面更加详细的说这部分的知识点。
京东的网页设计还是非常值得借鉴的，今天把学到的内容分享出来，好开心。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
