登录  /  注册
博主信息
博文 46
粉丝 0
评论 0
访问量 37232
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
模仿京东网页(首页、页眉、导航、推荐)
lus菜
原创
1131人浏览过

样式代码:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>JD网页</title>
  7. //字体图标
  8. <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  9. //首页
  10. <link rel="stylesheet" href="static/css/index.css" />
  11. //页眉
  12. <link rel="stylesheet" href="static/css/header.css" />
  13. //导航
  14. <link rel="stylesheet" href="static/css/nav.css" />
  15. //推荐:猜你喜欢
  16. <link rel="stylesheet" href="static/css/tj.css">
  17. </head>
  18. <body>
  19. //页眉
  20. <div class="header">
  21. //字体图标
  22. <div class="menu iconfont icon-menu"></div>
  23. //搜索框
  24. <div class="search">
  25. <div class="logo">JD</div>
  26. <div class="zoom iconfont icon-search"></div>
  27. <input class="words" type="text" value="蓝牙鼠标" />
  28. </div>
  29. //登录按钮
  30. <a href="" class="login">登录</a>
  31. </div>
  32. //主体
  33. <div class="main">
  34. //主导航区
  35. <ul class="nav">
  36. <li>
  37. <a href=""><img src="static/images/dh/nav-1.png"" alt=""></a>
  38. <a href="">京东超市</a>
  39. </li>
  40. <li>
  41. <a href=""><img src="static/images/dh/nav-2.png" alt="" /></a>
  42. <a href="">数码电器</a>
  43. </li>
  44. <li>
  45. <a href=""><img src="static/images/dh/nav-3.png" alt="" /></a>
  46. <a href="">京东服饰</a>
  47. </li>
  48. <li>
  49. <a href=""><img src="static/images/dh/nav-4.png" alt="" /></a>
  50. <a href="">京东生鲜</a>
  51. </li>
  52. <li>
  53. <a href=""><img src="static/images/dh/nav-5.png" alt="" /></a>
  54. <a href="">京东到家</a>
  55. </li>
  56. <li>
  57. <a href=""><img src="static/images/dh/nav-6.png" alt="" /></a>
  58. <a href="">充值缴费</a>
  59. </li>
  60. <li>
  61. <a href=""><img src="static/images/dh/nav-7.png" alt="" /></a>
  62. <a href="">9.9元拼</a>
  63. </li>
  64. <li>
  65. <a href=""><img src="static/images/dh/nav-8.png" alt="" /></a>
  66. <a href="">领劵</a>
  67. </li>
  68. <li>
  69. <a href=""><img src="static/images/dh/nav-9.png" alt="" /></a>
  70. <a href="">领金贴</a>
  71. </li>
  72. <li>
  73. <a href=""><img src="static/images/dh/nav-10.png" alt="" /></a>
  74. <a href="">PLUS会员</a>
  75. </li>
  76. </ul>
  77. //推荐区
  78. <h2 class="cnxh">猜你喜欢</h2>
  79. <ul class="tj">
  80. <li class="item">
  81. <a href=""><img src="static/images/sp/7d3ae035eb50ba52.jpg!q70.dpg.webp" alt=""></a>
  82. <p>萩嫒高领毛衣女超软糯绵毛衣宽松慵懒秋冬新款加绒长袖套头针织衫女GDB401-B#9119 黑色薄款 均码</p>
  83. <div class="price">
  84. <div class="iconfont icon-rmb">113.90</div>
  85. <div>看相似</div>
  86. </div>
  87. </li>
  88. <li class="item">
  89. <a href=""><img src="static/images/sp/2.jpg!q70.dpg.webp" alt=""></a>
  90. <p>Jeep 男士冲锋衣抓绒两件套 户外冲锋衣男三合一两件套防风防水保暖防寒登山外套男 品牌黑 4XL</p>
  91. <div class="price">
  92. <div class="iconfont icon-rmb">499</div>
  93. <div>看相似</div>
  94. </div>
  95. </li>
  96. <li class="item">
  97. <a href=""><img src="static/images/sp/18c457b625d50df4.jpg!q80.dpg.webp" alt=""></a>
  98. <p>萩嫒二八月毛衣外套女2020秋装新款V领韩版宽松外搭慵懒风针织开衫女NRJE208-B#7100 白色 均码</p>
  99. <div class="price">
  100. <div class="iconfont icon-rmb">120.90</div>
  101. <div>看相似</div>
  102. </div>
  103. </li>
  104. <li class="item">
  105. <a href=""><img src="static/images/tj/a8f347e0d4ccd62c.png.webp" alt=""></a>
  106. <p>芝华仕 头等舱 沙发 现代简约科技布艺中大户型客厅整装沙发 5756 米白色左角位30-60天发货</p>
  107. <div class="price">
  108. <div class="iconfont icon-rmb">11100.00</div>
  109. <div>看相似</div>
  110. </div>
  111. </li>
  112. </ul>
  113. </div>
  114. </body>
  115. </html>

首页css代码:

  1. //导入公共初始化样式表
  2. @import'reset.css';
  3. //页眉
  4. .header {
  5. background-color: #e43130;
  6. color: white;
  7. height: 4.4rem;
  8. font-size: 1.4rem;
  9. //国定定位
  10. position: fixed;
  11. top: 0;
  12. left: 0;
  13. right: 0;
  14. z-index: 999;
  15. }
  16. //页脚
  17. .footer{
  18. color: #666;
  19. background-color: #fafafa;
  20. height: 4.4rem;
  21. box-shadow: 0 0 3px #999;
  22. position: fixed;
  23. bottom: 0;
  24. left: 0;
  25. right: 0;
  26. z-index: 999;
  27. font-size: 1.4rem;
  28. }
  29. //主体
  30. .main{
  31. //绝对定位
  32. position: absolute;
  33. bottom: 4.4rem;
  34. top: 4.4rem;
  35. left: 0;
  36. right: 0;
  37. min-height: 100rem;
  38. font-size: 1.4rem;
  39. }

页眉css代码:

  1. .header{
  2. //浮动
  3. display: flex;
  4. //垂直居中
  5. align-items: center;
  6. }
  7. //页眉中的三个部分比例 1:6:1
  8. .header .login{
  9. color: white;
  10. //居中
  11. text-align: center;
  12. flex: 1;
  13. }
  14. .header .menu{
  15. text-align: center;
  16. flex: 1;
  17. font-size: 3rem;
  18. }
  19. .header .search{
  20. flex: 6;
  21. padding: 0.5rem;
  22. background-color: white;
  23. //圆角
  24. border-radius: 3rem;
  25. display: flex;
  26. }
  27. //logo
  28. .header .search .logo{
  29. color: #e43130;
  30. flex:0 1 4rem;
  31. font-size: 2rem;
  32. //水平垂直居中
  33. text-align: center;
  34. line-height: 2rem;
  35. }
  36. //放大镜
  37. .header .search .zoom{
  38. color: #ccc;
  39. flex: 0 1 4rem;
  40. //左边框
  41. border-left: 1px solid;
  42. //水平垂直居中
  43. text-align: center;
  44. line-height: 2rem;
  45. }
  46. //搜索框文本框
  47. .header .search .words{
  48. flex: auto;
  49. border: none;
  50. outline: none;
  51. color: #aaa;
  52. }

导航css代码:

  1. //导航区
  2. .main .nav{
  3. padding: 1rem;
  4. display: flex;
  5. //许换行
  6. flex-flow: row wrap;
  7. //端对齐
  8. justify-content: space-between;
  9. }
  10. .main .nav img{
  11. height: 4rem;
  12. width: 4rem;
  13. }
  14. .main .nav li{
  15. //一行显示5个,100%来分配,应该是20%
  16. flex: 1 1 20%;
  17. display: flex;
  18. flex-flow: column nowrap;
  19. align-items: center;
  20. }

推荐css代码:

  1. .main .cnxh{
  2. height: 4rem;
  3. color: #555;
  4. font-weight: 500;
  5. text-align: center;
  6. }
  7. .main .tj{
  8. font-size: 1rem;
  9. display: flex;
  10. //许换行
  11. flex-wrap: wrap;
  12. }
  13. .main .tj .item{
  14. flex: 1 1 calc(50% - 2rem);
  15. background-color: #fff;
  16. overflow: hidden;
  17. display: flex;
  18. flex-flow: column nowrap;
  19. margin-left: 1rem;
  20. margin-bottom: 1rem;
  21. padding-bottom: 1rem;
  22. border-radius: 1rem;
  23. }
  24. .main .tj .item img{
  25. width: 100%;
  26. height: 100%;
  27. }
  28. .main .tj .item{
  29. padding: 3rem;
  30. }
  31. .main .tj .item .price{
  32. display: flex;
  33. justify-content: space-between;
  34. }
  35. .main .tj .item .price div:first-of-type{
  36. color: red;
  37. }
  38. .main .tj .item .price div:last-of-type{
  39. color: #666;
  40. background-color: #f6f6f6;
  41. border-radius: 1rem;
  42. padding: 0.2rem 1rem;
  43. }

以下示例:

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学