<!-- header -->
<header>
<!-- 思路，header四个部分，分别占百分比，8 10 57 25，用li标签包含 -->
<ul>
<li>
<img src="images/close.png" alt="">
</li>
<li>
<img src="images/logo.png" alt="">
</li>
<li>
打开京东App，购物更轻松
</li>
<li>
立即打开
</li>
</ul>
</header>
<!-- 固定搜索框 -->
<!-- search -->
<div class="search-wrap">
<!-- 思路，
1，分成三个部分
2，左右两个部，固定宽度，定位保持
3，中间用外边距margin分割，内部再套定位盒子 -->
<div class="search-btn"></div>
<div class="search">
<div class="jd">
<!-- <img src="images/jd.png" alt=""> -->
</div>
<div class="sx"></div>
<input type="text" placeholder="小家电超级品类日，每满299减30">
<div class="fdj"></div>
</div>
<div class="search-login">登录</div>
</div>
<!-- 滚动栏 -->
<div class="banner">
<!-- 思路
1.设置图片
2.调整图片大小与屏幕宽度对齐
-->
<img src="upload/banner.dpg" alt="">
</div>
<!-- 家电品类日 -->
<div class="plr">
<!-- 思路
1.三个a标签
2.宽度分为3份，分别占33.33%,左浮动 -->
<a href="#">
<img src="upload/pic11.dpg" alt="">
</a>
<a href="#">
<img src="upload/pic22.dpg" alt="">
</a>
<a href="#">
<img src="upload/pic33.dpg" alt="">
</a>
</div>
<!-- nav部分 -->
<nav>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav2.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav3.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
</nav>
<!-- news部分 -->
<div class="news">
<!-- 思路
1.分三部分，50% 25% 25%
2.后两个部分设置左边框
3.设置盒子模式为CSS3盒子 -->
<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>
|
|
收藏
淘帖
踩
