.

先进行整体布局

首页布局：页眉、主体、页脚、

  1. <div class="home"></div>
  2. <div class="header"></div>
  3. <div class="main>"</div>
  4. <div class="footer"></div>

添加参考线

用轮廓线不会占页面空间

  1. .home>*{
  2.  outline:1px solid red；
  3. }

页面样式重置

样式重置

  1. *{
  2.  margin:0;
  3.  padding:0;
  4.  box-sizing: border-box;
  5. }
  1. html{
  2.  font-size:10px;
  3. }

rem

  1. html{
  2.  font-size:10px;
  3. }

用a链接去除下划线

  1. a{
  2. text-decoration:none;
  3. color:666;
  4. }
  6. li{
  7. list-style:none;
  8. }

恢复字号

在body里面恢复字号16px

  1. body{
  2.  font-size:1.6rem;
  3.  background-color:#f6f6f6;
  4. }

媒体查询

动态设置rem大小
从小到大，移动优先

  1. @meadia screen and(min-width:480px){
  2. html{
  3.    font-size:12px;
  4. }
  5. }
  7. @meadia screen and(min-width:640px){
  8. html{
  9.    font-size:14px;
  10. }
  11. }
  13. @meadia screen and(min-width:720px){
  14. html{
  15.    font-size:16px;
  16. }
  17. }

把以上代码放入rest.css中

rest专门做样式重置的
放入rest后在html中关联起来

  1. <link rel="stylesheet" href="css/reset.css"/>

仿作的网站为单列三行

中间内容会溢出

页眉和页脚是固定的

视口不足，给个最小的高度
view height:视口高度
页面布局直接用grid来写
页眉页脚固定所以给个固定大小

  1. .home{
  2.  min-height：100vh；
  3.  display：grid；
  4.  grid-template-rows：4em 1fr 6rem；
  5. }

中间主体部分

隐藏中间主体部分

  1. .home .main{
  2.  height:calc(100vh-4rem-6rem);
  3.  overflow-y：scroll；
  4. }

头部首页布局

第一部分是个按钮 加入字体图标引用

  1. <link rel="stylesheet" href="lib/font_icon/iconfont.css" />

在页眉的div中加入

  1. <span class="iconfont icon-caidan"><span>

加入搜索框加入一个块
在快中加入京东LOGO和搜索图标

  1. <div class="search">
  2. <span class="iconfont icon-jingdong "><span>
  3. <span class="iconfont icon-search"><span>
  4. <from action="">
  5. <input type="search" name="search" value="联想拯救者">
  6. </div>

登录按钮

用button来做也行

  1. <a href="">登录</a>

在css创建header

修改html的头部样式

  1. .home .header {
  2.   background-color: red;
  3.   display: grid;
  4.   grid-template-columns: 5rem 1fr 5rem;
  5.   place-items: center;
  6.   color: #fff;
  7. }
  9. .home .header.icon-caidan {
  10.   font-size: 2.5ren;
  11.   font-weight: bolder;
  12. }
  14. .home .header a {
  15.   color: white;
  16.   font-size: 1.4rem;
  17. }
  19. .home .header .search {
  20.   width: 100%;
  21.   background-color: #fff;
  22.   padding: 0.2em;
  23.   border-radius: 1.5rem;
  24.   display: grid;
  25.   grid-template-columns: auto auto 1fr;
  26. }
  28. .home .header .search form input {
  29.   min-width: 100%;
  30.   outline: none;
  31.   border: none;
  32.   color: #888;
  33. }
  35. .home .header .search .icon-jingdong {
  36.   color: #e43130;
  37.   font-size: 2rem;
  38.   padding: 0 0.5rem;
  39.   place-self: center;
  40. }
  42. .home .header .search .icon-search {
  43.   color: #888;
  44.   font-size: 2rem;
  45.   padding: 0 0.5rem;
  46.   place-self: center;
  47. }

回到html输出：

回到html布局页脚

  1.  <div class="footer">
  2.         <div>
  3.           <span class="iconfont icon-jingdong1"></span>
  4.           <span>京东</span>
  5.         </div>
  6.         <div>
  7.           <span class="icofont icon-fenlei2"></span>
  8.           <span>分类</span>
  9.         </div>
  10.         <div>
  11.           <span class="iconfont icon-social-jingxi"></span>
  12.           <span>惊喜</span>
  13.         </div>
  14.         <div>
  15.           <span class="iconfont icon-gouwuche"></span>
  16.           <span>购物车</span>
  17.         </div>
  18.         <div>
  19.           <span class="iconfont icon-weidengluyonghuicon"></span>
  20.           <span>未登录</span>
  21.         </div>
  22.       </div>
  23.     </div>

创建footer页脚css

  1. .home .footer {
  2.   background-color: #efefef;
  3.   border-top: 1px solid #ddd;
  5.   display: flex;
  6.   place-content: space-around;
  7. }
  9. .home .footer div {
  10.   color: #888;
  11.   display: flex;
  12.   flex-flow: column nowrap;
  13.   /* 垂直水平方向居中 */
  14.   place-items: center;
  15. }
  17. .home .footer div:first-of-type {
  18.   color: red;
  19. }
  21. /* 调整图标大小 */
  22. .home .footer div span:first-of-type {
  23.   font-size: 2.5rem;
  24. }
  26. /* 调整文本大小 */
  27. .home .footer div span:last-of-type {
  28.   font-size: 1.2rem;
  29. }

轮播图写在主体main里面

  1. <div class="main">
  2.         <div class="slider">
  3.           <div class="imgs">
  4.             <a href="" class="active"
  5.               ><img src="static/images/banner.png" alt=""
  6.             /></a>
  7.             <a href=""><img src="static/images/banner.png" alt="" /></a>
  8.             <a href=""><img src="static/images/banner.png" alt="" /></a>
  9.           </div>

同上记得引入css才有效果

  1. <link rel="stylesheet" href="css/slider.css" />

轮播图css代码

  1. .home .main .slider {
  2.   width: 90%;
  4.   margin: 1rem auto 2rem;
  5. }
  6. .home .main .slider img {
  7.   width: 100%;
  8.   border-radius: 1rem;
  9.   margin-top: 1rem;
  10. }
  11. /* 初始化时,将所有轮播图片先全部隐藏,默认只显示第一个 */
  12. /* 注意,轮播图是可点击的,图片在链接元素中,所以只需要设置a标签即可 */
  13. .home .main .slider .imgs a {
  14.   display: none;
  15. }
  16. /* 默认第一个轮播图激活 */
  17. .home .main .slider .imgs a.active {
  18.   display: block;
  19. }
  21. /* 切换按钮容器的样式 */
  22. .home .main .slider .btns {
  23.   /* flex布局,且水平居中,并上移到轮播图底部 */
  24.   display: flex;
  25.   justify-content: center;
  26.   /* 负外距可反向移动元素,这里是向上 */
  27.   margin-top: -2rem;
  28. }
  30. /* 切换按钮 */
  31. .home .main .slider .btns .item {
  32.   height: 0.8rem;
  33.   width: 0.8rem;
  34.   border-radius: 50%;
  35.   background-color: #888;
  36.   margin: 0.2rem;
  37. }
  38. /* 切换按钮鼠标悬停样式 */
  39. .home .main .slider .btns .item:hover {
  40.   cursor: pointer;
  41. }
  42. /* 当前默认激活的按钮样式 */
  43. .home .main .slider .btns .item.active {
  44.   background-color: #e43130;
  45. }

导航区

因为都是字体图标，字体都是可点击。所以用a链接来写。

  1.   <div class="navs">
  2.           <ul class="nav-group active">
  3.             <li>
  4.               <a href=""><img src="static/images/nav/nav-1.png" alt="" /></a>
  5.               <a href="">京东超市</a>
  6.             </li>
  7.             <li>
  8.               <a href=""><img src="static/images/nav/nav-2.png" alt="" /></a>
  9.               <a href="">数码电器</a>
  10.             </li>
  11.             <li>
  12.               <a href=""><img src="static/images/nav/nav-3.png" alt="" /></a>
  13.               <a href="">京东服饰</a>
  14.             </li>
  15.             <li>
  16.               <a href=""><img src="static/images/nav/nav-4.png" alt="" /></a>
  17.               <a href="">京东生鲜</a>
  18.             </li>
  19.             <li>
  20.               <a href=""><img src="static/images/nav/nav-5.png" alt="" /></a>
  21.               <a href="">京东到家</a>
  22.             </li>
  23.             <li>
  24.               <a href=""><img src="static/images/nav/nav-6.png" alt="" /></a>
  25.               <a href="">充值缴费</a>
  26.             </li>
  27.             <li>
  28.               <a href=""><img src="static/images/nav/nav-7.png" alt="" /></a>
  29.               <a href="">9.9元拼</a>
  30.             </li>
  31.             <li>
  32.               <a href=""><img src="static/images/nav/nav-8.png" alt="" /></a>
  33.               <a href="">领券</a>
  34.             </li>
  35.             <li>
  36.               <a href=""><img src="static/images/nav/nav-9.png" alt="" /></a>
  37.               <a href="">领金贴</a>
  38.             </li>
  39.             <li>
  40.               <a href=""><img src="static/images/nav/nav-10.png" alt="" /></a>
  41.               <a href="">PLUS会员</a>
  42.             </li>
  43.           </ul>
  44.         </div>

记得再hetml关联导航区的css

新建navs.css布局导航区

用网格布局来写

  1. .home .main .navs .nav-group {
  2.   display: grid;
  3.   grid-template-columns: repeat(5, 1fr);
  4. }
  6. .home .main .navs .nav-group li a {
  7.   font-size: 1.2rem;
  8. }
  10. .home .main .navs .nav-group li img {
  11.   width: 4rem;
  12. }
  14. .home .main .navs .nav-group li {
  15.   display: grid;
  16.   place-items: center;
  17. }

商品区

代码比较长就不全部复制过来了

  1. <ul class="list">
  2.           <li class="item">
  3.             <a href=""><img src="static/images/items/item1.jpg" alt="" /></a>
  4.             <div class="intro">
  5.               <span>自营</span>
  6.               <span>商品介绍商品介绍商品介绍商品介绍商品介绍...</span>
  7.             </div>
  8.             <div class="price">
  9.               <span class="iconfont icon-renminbi">2877</span>
  10.               <span class="sign">满减</span>
  11.               <span class="other">看相似</span>
  12.             </div>
  13.           </li>
  14.           <li class="item">
  15.             <a href=""><img src="static/images/items/item2.jpg" alt="" /></a>
  16.             <div class="intro">
  17.               <span>自营</span>
  18.               <span>商品介绍商品介绍商品介绍商品介绍商品介绍...</span>
  19.             </div>
  20.             <div class="price">
  21.               <span class="iconfont icon-renminbi">1899</span>
  23.               <span class="sign">满减</span>
  24.               <span class="other">看相似</span>
  25.             </div>
  26.           </li>
  27.           <li class="item">
  28.             <a href=""><img src="static/images/items/item3.jpg" alt="" /></a>
  29.             <div class="intro">
  30.               <span>自营</span>
  31.               <span>商品介绍商品介绍商品介绍商品介绍商品介绍...</span>
  32.             </div>

创建商品区的css，list.css

  1. .home .main .list {
  2.   display: grid;
  3.   grid-template-columns: repeat(2, 1fr);
  4.   gap: 1.5rem;
  5.   padding: 1.5rem;
  6. }
  8. .home .main .list img {
  9.   width: 100%;
  10.   border-radius: 0.5rem;
  11.   padding-bottom: 3rem;
  12.   border-radius: 1rem;
  13.   font-size: 1.3rem;
  14. }

输出最后结果：

更多相关文章

  1. 【前端】手机端页面购物车功能JS如何实现产品数量，商品价格去相加
  2. 给购物车加上选择时自动计算功能
  3. Nofollow属性的介绍和使用
  4. HTML表单内容的详细介绍
  5. 使用 HTML 基本常用标签搭建简易静态页面网站及相关介绍
  6. 利用表格常用标签制造一个商品列表
  7. RAID5常见故障介绍及raid5故障后常规操作方法
  8. 07-16作业
  9. 京东秒杀区

随机推荐

  1. 关于android分辨率兼容（屏幕适配）问题
  2. Android Studio 开发依赖库集锦
  3. suse linux android sdk 下载.安装.配置
  4. Android(安卓)Q暗色模式适配踩坑—状态栏
  5. Android Content Provider详解及示例代码
  6. android 应用自动升级
  7. android点滴23：android library projects
  8. android日历之滚动选择日期类似ios
  9. Android菜鸟的成长笔记（4）——你真的理解了
  10. Android ADB 源码分析总结