简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 《仿京东首页》20201223
Blogger Information
Blog 26
fans 1
comment 1
visits 19653
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
《仿京东首页》20201223
杨凡的博客
Original
992 people have browsed it

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>首页</title>
  7.     <link rel="stylesheet" href="static/css/index.css">
  8.     <link rel="stylesheet" href="static/font/jd/iconfont.css">
  9.     <style>
  11.     </style>
  12. </head>
  13. <body>
  14.     <!-- 页眉 -->
  15.     <div class="header">
  16.         <!-- 字体图标菜单 -->
  17.         <div class="menu iconfont icon-caidan"></div>
  18.         <!-- 搜索框 -->
  19.         <div class="search">
  20.             <div class="logo">JD</div>
  21.             <div class="zoom iconfont icon-fangdajing-copy "></div>
  22.             <input type="text" name="" id="" class="words" value="电钢琴">
  23.         </div>
  24.         <!-- 登录按钮 -->
  25.         <a href="" class="login">登录</a>
  26.         <!--固定 -->
  27.         <div class="dk">
  28.             <div class="gg iconfont icon-gonggong-jingdong"></div>
  29.             <a href="">打开APP</a>
  30.         </div>
  31.     </div>
  32.     <!-- 主体 -->
  33.     <div class="main">
  34.         <div class="bg">
  35.             <div class="bg_bc"></div>
  36.             <img src="static/images/bg/bg.dpg" alt="">
  37.         </div>
  38.         <div class="bgtp">
  39.             <img src="static/images/bg/bg1.dpg" alt="">
  40.             <img src="static/images/bg/bg2.dpg" alt="">
  41.             <img src="static/images/bg/bg3.dpg" alt="">
  42.         </div>
  43.         <!-- 导航区 -->
  44.         <ul class="nav">
  45.             <li>
  46.                 <a href=""><img src="static/images/dh/nav-1.png" alt=""></a>
  47.                 <a href="">京东超市</a>
  48.             </li>
  49.             <li>
  50.                 <a href=""><img src="static/images/dh/nav-2.png" alt=""></a>
  51.                 <a href="">数码电器</a>
  52.             </li>
  53.             <li>
  54.                 <a href=""><img src="static/images/dh/nav-3.png" alt=""></a>
  55.                 <a href="">京东服饰</a>
  56.             </li>
  57.             <li>
  58.                 <a href=""><img src="static/images/dh/nav-4.png" alt=""></a>
  59.                 <a href="">京东生鲜</a>
  60.             </li>
  61.             <li>
  62.                 <a href=""><img src="static/images/dh/nav-5.png" alt=""></a>
  63.                 <a href="">京东到家</a>
  64.             </li>
  65.             <li>
  66.                 <a href=""><img src="static/images/dh/nav-6.png" alt=""></a>
  67.                 <a href="">充值缴费</a>
  68.             </li>
  69.             <li>
  70.                 <a href=""><img src="static/images/dh/nav-7.png" alt=""></a>
  71.                 <a href="">9.9元拼</a>
  72.             </li>
  73.             <li>
  74.                 <a href=""><img src="static/images/dh/nav-8.png" alt=""></a>
  75.                 <a href="">领劵</a>
  76.             </li>
  77.             <li>
  78.                 <a href=""><img src="static/images/dh/nav-9.png" alt=""></a>
  79.                 <a href="">借钱</a>
  80.             </li>
  81.             <li>
  82.                 <a href=""><img src="static/images/dh/nav-10.png" alt=""></a>
  83.                 <a href="">PLUS会员</a>
  84.             </li>
  85.         </ul>
  86.         <!-- 秒杀区 -->
  87.         <div class="ms">
  88.             <!-- 头部 -->
  89.             <div class="ms-top">
  90.                 <div class="left">
  91.                     <div class="title">京东秒杀</div>
  92.                     <div class="notice">
  93.                         <div class="tips">10
  94.                             <img src="static/images/ms/点场.png" alt="">
  95.                         </div>
  96.                         <div class="time"><span>00</span>:<span>15</span>:<span>22</span></div>
  98.                     </div>
  99.                 </div>
  100.                 <div class="right">更多秒杀</div>
  101.             </div>
  102.             <!-- 主体 -->
  103.             <ul class="ms-body">
  104.                 <li class="item">
  105.                     <a href=""><img src="static/images/ms/1.dpg" alt=""></a>
  106.                     <div class="iconfont icon-icon-test">338</div>
  107.                     <div class="iconfont icon-icon-test">558</div>
  108.                 </li>
  109.                 <li class="item">
  110.                     <a href=""><img src="static/images/ms/2.dpg" alt=""></a>
  111.                     <div class="iconfont icon-icon-test">1859</div>
  112.                     <div class="iconfont icon-icon-test">2499</div>
  113.                 </li>
  114.                 <li class="item">
  115.                     <a href=""><img src="static/images/ms/3.dpg" alt=""></a>
  116.                     <div class="iconfont icon-icon-test">4769</div>
  117.                     <div class="iconfont icon-icon-test">5699</div>
  118.                 </li>
  119.                 <li class="item">
  120.                     <a href=""><img src="static/images/ms/4.dpg" alt=""></a>
  121.                     <div class="iconfont icon-icon-test">1818</div>
  122.                     <div class="iconfont icon-icon-test">2199</div>
  123.                 </li>
  124.                 <li class="item">
  125.                     <a href=""><img src="static/images/ms/5.dpg" alt=""></a>
  126.                     <div class="iconfont icon-icon-test">1399</div>
  127.                     <div class="iconfont icon-icon-test">1799</div>
  128.                 </li>
  129.                 <li class="item">
  130.                     <a href=""><img src="static/images/ms/6.dpg" alt=""></a>
  131.                     <div class="iconfont icon-icon-test">20969</div>
  132.                     <div class="iconfont icon-icon-test">22199</div>
  133.                 </li>
  134.             </ul>
  135.         </div>
  136.         <!-- 推荐区猜你喜欢 -->
  137.         <div class="cnxh">
  138.             <img src="static/images/sp/cnxh.png" alt="">
  139.         </div>
  140.         <ul class="tj">
  141.             <li class="item">
  142.                 <a href=""><img src="static/images/sp/1.webp" alt=""></a>
  143.                 <p>玉兰油（OLAY）美白润肤面霜50g乳液女士护肤品补水保湿提亮肤色粉嫩白皙改善暗黄美白修护</p>
  144.                 <div class="price">
  145.                     <div class="jg iconfont icon-icon-test">59</div>
  146.                     <div class="mj">满减</div>
  147.                     <div class="kxs">看相似</div>
  148.                 </div>
  149.             </li>
  150.             <li class="item">
  151.                 <a href=""><img src="static/images/sp/2.webp" alt=""></a>
  152.                 <p>HR赫莲娜活颜修护舒缓霜 50ml（白绷带 质地面霜 保湿 改善细纹）圣诞节礼物</p>
  153.                 <div class="price">
  154.                     <div class="jg iconfont icon-icon-test">3180</div>
  155.                     <div class="mj">闪购</div>
  156.                     <div class="kxs">看相似</div>
  157.                 </div>
  158.             </li>
  159.             <li class="item">
  160.                 <a href=""><img src="static/images/sp/3.webp" alt=""></a>
  161.                 <p>玉兰油（OLAY）锁水布丁水凝霜50g面霜乳液女士护肤品补水保湿提亮肤色淡化细纹水嫩滋润白皙透亮</p>
  162.                 <div class="price">
  163.                     <div class="jg iconfont icon-icon-test">199</div>
  164.                     <div class="mj">满减</div>
  165.                     <div class="kxs">看相似</div>
  166.                 </div>
  167.             </li>
  168.             <li class="item">
  169.                 <a href=""><img src="static/images/sp/4.webp" alt=""></a>
  170.                 <p>适用笔记本电脑包手提公文男女12Air13Pro15.6内胆16商务14寸 深空灰 14/15寸</p>
  171.                 <div class="price">
  172.                     <div class="jg iconfont icon-icon-test">59</div>
  173.                     <div class="kxs">看相似</div>
  174.                 </div>
  175.             </li>
  176.             <li class="item">
  177.                 <a href=""><img src="static/images/sp/5.webp" alt=""></a>
  178.                 <p>//img11.360buyimg.com/jdphoto/s102x28_jfs/t14512/288/2659278877/2368/8468a10d/5aadf9daNd4909ddc.png</p>
  179.                 <div class="price">
  180.                     <div class="jg iconfont icon-icon-test">138</div>
  181.                     <div class="kxs">看相似</div>
  182.                 </div>
  183.             </li>
  184.             <li class="item">
  185.                 <a href=""><img src="static/images/sp/6.webp" alt=""></a>
  186.                 <p>超媛加绒加厚半高领打底衫女2020新款秋装气质小衫长袖T恤显瘦内搭T血BH-350-B#656#你 棕色 S</p>
  187.                 <div class="price">
  188.                     <div class="jg iconfont icon-icon-test">104</div>
  189.                     <div class="mj">满减</div>
  190.                     <div class="kxs">看相似</div>
  191.                 </div>
  192.             </li>
  193.         </ul>
  194.     </div>
  195.     <!-- 页脚 -->
  196.     <div class="footer">
  197.         <a href="">
  198.             <div class="iconfont icon-jingdong2"></div>
  199.             <span>首页</span>
  200.         </a>
  201.         <a href="">
  202.             <div class="iconfont icon-classification"></div>
  203.             <span>分类</span>
  204.         </a>
  205.         <a href="">
  206.             <div class="iconfont icon-jingdongwujiemiandanjiekoupeizhi-01"></div>
  207.             <span>京喜</span>
  208.         </a>
  209.         <a href="">
  210.             <div class="iconfont icon-gouwuche1 "></div>
  211.             <span>购物车</span>
  212.         </a>
  213.         <a href="">
  214.             <div class="iconfont icon-yonghu"></div>
  215.             <span>未登录</span>
  216.         </a>
  217.     </div>
  218. </body>
  219. </html>

CSS代码

页面样式

  1. /* 导入公共初始化样式表 */
  2. @import 'reset.css';
  3. /* 页眉 */
  4. .header{
  5.     background-color: #e43130;
  6.     color: white;
  7.     height: 4.4rem;
  8.     /* 固定定位 */
  9.     position: fixed;
  10.     top: 0;
  11.     left: 0;
  12.     right: 0;
  13.     /* 设置层级 */
  14.     z-index: 100;
  16.     font-size: 1.4rem;
  17. }
  18. /* 页脚 */
  19. .footer{
  20.     background-color: #fafafa;
  21.     color: #666;
  22.     height: 4.4rem;
  23.     /* 边框阴影效果 */
  24.     box-shadow: 0 0 3px #999;
  25.     /* 固定定位 */ 
  26.     position: fixed;
  27.     bottom: 0;
  28.     left: 0;
  29.     right: 0;
  31.     font-size: 1.4rem;
  32. }
  33. /* 主体 */
  34. .main{
  35.     /* 绝对定位 */
  36.     position: absolute;
  37.     top: 4.4rem;
  38.     bottom: 4.4rem;
  39.     left: 0;
  40.     right: 0;
  42.     font-size: 1.4rem;
  43. }
  45. /* header样式 */
  46. .header{
  47.     /* 设置为flex布局 */
  48.     display: flex;
  49.     /* 垂直居中 */
  50.     align-items: center;
  51. }
  52. /* 页眉三部分比例1：6：1 */
  53. .header .login{
  54.     color: #fff;
  55.     text-align: center;
  56.     flex: 1;
  57. }
  58. .header .menu{
  59.     text-align: center;
  60.     font-size: 3rem;
  61.     flex: 1;
  62. }
  63. .header .search{
  64.     flex:6;
  65.     padding: 0.5rem;
  66.     background-color: #fff;
  67.     border-radius: 3rem;
  69.     display: flex;
  70. }
  71. /* logo */
  72. .header .search .logo{
  73.     color: #e43130;
  74.     flex: 0 1 4rem;
  75.     font-size: 2rem;
  76.     /* 水平垂直居中 */
  77.     text-align: center;
  78.     line-height: 2rem;
  79. }
  80. /* 放大镜 */
  81. .header .search .zoom{
  82.     color: #ccc;
  83.     flex: 0 1 4rem;
  84.     font-size: 2rem;
  85.     border-left: 1px solid;
  86.     /* 水平垂直居中 */
  87.     text-align: center;
  88.     line-height: 2rem;
  89. }
  90. /* 搜索文本框 */
  91. .header .search .words{
  92.     flex: auto;
  93.     /* 去边框 */
  94.     border: none;
  95.     /* 去轮廓线 */
  96.     outline: none;
  97.     color: #aaa;
  98. }
  99. /* 固定定位打开APP f32607 */
  100. .header .dk{
  101.     background-color: #f32607;
  102.     position: fixed;
  103.     top: 7rem;
  104.     right: 0;
  105.     border-radius: 1rem 0 0 1rem;
  106.     display: flex;
  107. }
  108. .header .dk .gg{
  109.     font-size: 3rem;
  110. }
  111. .header .dk a{
  112.     color: #fff;
  113.     padding: 0.5rem 1rem 0 0.5rem;
  114. }
  115. /* 固定定位打开APP */
  116. /* header样式 */
  117. .main{
  118.     display: flex;
  119.     flex-flow: column nowrap;
  120. }
  121. /* 轮播 */
  122. .main .bg{
  123.     display: flex;
  124.     flex-flow: column nowrap;
  125.     background-color: #fff;
  126.     position: relative;
  127.     height: 15rem;
  128. }
  129. .main .bg .bg_bc{
  130.     background-color: #C82519;
  131.     border-radius: 0 0 4rem 4em;
  132.     height: 10rem;
  133.     margin-bottom: 10rem;
  135. }
  136. .main .bg img{
  137.     width: 90%;
  138.     position: absolute;
  139.     top:1rem;
  140.     left: 2rem;
  141.     right: 2rem;
  142.     margin: auto;
  143.     border-radius: 1rem;
  144. }
  145. .main .bgtp{
  146.     background-color: #fff;
  147.     display: flex;
  148. }
  149. .main .bgtp img{
  150.     width: 33%;
  151. }
  152. /* 轮播 */
  154. /* 导航区 */
  155. .main .nav{
  156.     padding: 1rem;
  158.     display: flex;
  160.     flex-flow: row wrap;
  161.     /* 两端对其 */
  162.     justify-content: space-between;
  163. }
  164. .main .nav img{
  165.     height: 4rem;
  166.     width: 4rem;
  167. }
  168. .main .nav li{
  169.     flex: 1 1 20%;
  171.     display: flex;
  172.     flex-flow: column nowrap;
  173.     align-items: center;
  174.     margin: 1rem 0;
  175. }
  176. /* 导航区 */
  178. /* 秒杀区 */
  179. /* 头部 */
  180. .main .ms{
  181.     background-color: #fff;
  182.     padding: 1rem;
  183.     margin: 1rem 0;
  184.     margin: 0 1rem;
  185.     border-radius: 2rem;
  186. }
  187. .main .ms .ms-top{
  188.     font-size: 1.3rem;
  189.     height: 3rem;
  190.     display: flex;
  191.     /* 两端对其 */
  192.     justify-content: space-between;
  193. }
  194. .main .ms .ms-top .left{
  195.     display: flex;
  197. }
  198. .main .ms .ms-top .left .notice{
  199.    font-size: 1.1rem;
  200.    height: 2rem;
  201.    border-radius: 2rem;
  202.    margin-left: 1rem;
  203.    display: flex;
  204.    /* 水平垂直居中 */
  205.    justify-content: center;
  206.    align-items: center;
  207. }
  208. .main .ms .ms-top .left .notice .tips{
  209.     font-size: 1.5rem;
  210.     color: #e43130;
  211.     padding: 0 0.5rem;
  212. }
  213. .main .ms .ms-top .left .notice .tips img{
  214.     width: 2rem;
  215.     height: 1.7rem;
  216. }
  217. .main .ms .ms-top .left .time{
  218.     font-size: 1.5rem;
  219.     color: #e43130;
  220.     padding: 0 0.5rem;
  221. }
  222. .main .ms .ms-top .left .time span{
  223.     background-color: #e43130;
  224.     color: #fff;
  225.     border-radius: 0.3rem;
  226. }
  228. .main .ms .ms-top .right{
  229.     color:  #e43130;
  230. }
  231. /* 主体 */
  232. .main .ms .ms-body{
  233.     display: flex;
  234.     justify-content: space-between;
  235. }
  236. .main .ms .ms-body img{
  237.     height: 5.5rem;
  238.     width: 5.5rem;
  239. }
  240. .main .ms .ms-body .item div:first-of-type{
  241.     color: #f2270c;
  242.     font-size: 1.3rem;
  243. }
  244. .main .ms .ms-body .item div:last-of-type{
  245.     color: #999;
  246.     font-size: 1.3rem;
  247.     text-decoration: line-through;
  248. }
  249. /* 秒杀区 */
  251. /*  推荐区猜你喜欢 */
  252. .main .cnxh img{
  253.     width: 100%;
  254. }
  255. .main .tj{
  256.     display: flex;
  257.     font-size: 1.3rem;
  258.     flex-wrap: wrap;
  259. }
  260. .main .tj .item{
  261.     flex: 1 1 46%;
  262.     background-color: #fff;
  263.     overflow: hidden;
  264.     display: flex;
  265.     flex-flow: column nowrap;
  266.     border-radius: 1rem;
  267.     padding: 1rem;
  268.     position: relative;
  269. }
  270. .main .tj .item p{
  271.     overflow: hidden;
  272.     text-overflow:ellipsis;
  273.     white-space: nowrap;
  274. }
  276. .main .tj .item .price{
  277.     display: flex;
  279. }
  280. .main .tj .item .price .jg{
  281.     color: #fa2c19;
  282.     font-size: 1.6rem;
  283. }
  284. .main .tj .item .price .mj{
  285.     margin-left: 1rem;
  286.     border: 1px solid #fa2c19;
  287.     border-radius: 0.2rem;
  288.     font-size: 1.3rem;
  289.     margin-top: 0.3rem;
  290. }
  291. .main .tj .item .price .kxs{
  292.     position: absolute;
  293.     right: 0;
  294.     background-color: #f0f2f5;
  295.     color: grey;
  296.     margin-top: 0.5rem;
  297.     border-radius: 1rem 0 0 1rem;
  298. }
  299. .main .tj .item:nth-of-type(odd){
  300.     margin: 0.5rem 0.5rem 0.5rem 1rem;
  301. }
  302. .main .tj .item:nth-of-type(even){
  303.     margin: 0.5rem 0.5rem 0.5rem 1rem;
  304. }
  305. .main .tj .item img{
  306.     width: 100%;
  307.     height: 100%;
  308. }
  309. /*  推荐区猜你喜欢 */
  310. /*  菜单栏 */
  311. .footer{
  312.     display: flex;
  313.     justify-content: space-around;
  314.     align-items: center;
  315. }
  316. .footer a{
  317.     display: flex;
  318.     flex-flow: column nowrap;
  319.     align-items: center;
  320. }
  321. .footer a .iconfont{
  322.     font-size: 2rem;
  323. }
  324. .footer a span{
  325.     font-size: 1rem;
  326. }
  327. /*  菜单栏 */

公共样式

  1. *{
  2.     /* 清理外边距 */
  3.     margin: 0;
  4.     /* 清理内边距 */
  5.     padding: 0;
  6.     /* 设置ie盒子 */
  7.     box-sizing: border-box;
  8. }
  9. li{
  10.     /* 去除小黑点 */
  11.     list-style: none;
  12. }
  13. a{
  14.     /* 文本颜色 */
  15.     color: #7b7b7b;
  16.     /* 去掉下划线 */
  17.     text-decoration: none;
  18. }
  19. body{
  20.     /* 页面背景颜色 */
  21.     background-color: #F6F6F6;
  22. }
  23. html{
  24.     /* 页面字号 */
  25.     font-size: 10px;
  26. }
  28. /* 媒体查询 */
  29. @media screen and (min-width:320px){
  30.     html{
  31.         /* 页面字号 */
  32.         font-size: 8px;
  33.     }
  34. }
  35. @media screen and (min-width:375px){
  36.     html{
  37.         /* 页面字号 */
  38.         font-size: 10px;
  39.     }
  40. }
  41. @media screen and (min-width:480px){
  42.     html{
  43.         /* 页面字号 */
  44.         font-size: 12px;
  45.     }
  46. }
  47. @media screen and (min-width:640px){
  48.     html{
  49.         /* 页面字号 */
  50.         font-size: 14px;
  51.     }
  52. }
  53. @media screen and (min-width:720px){
  54.     html{
  55.         /* 页面字号 */
  56.         font-size: 16px;
  57.     }
  58. }
  59. @media screen and (min-width:960px){
  60.     html{
  61.         /* 页面字号 */
  62.         font-size: 18px;
  63.     }
  64. }
  65. @media screen and (min-width:1024px){
  66.     html{
  67.         /* 页面字号 */
  68.         font-size: 20px;
  69.     }
  70. }

总结：
代码中穿插众多flex布局属性及定位知识，通过此案例对前面的知识进行了巩固。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！