search

博客列表 >《仿京东首页》20201223

《仿京东首页》20201223

杨凡的博客
杨凡的博客原创
2020年12月24日 18:07:27999浏览

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布局属性及定位知识，通过此案例对前面的知识进行了巩固。

上一条：SEO到底该怎么做，你真的了解吗？下一条：模仿京东网页(首页、页眉、导航、推荐)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多