devbox
在线问答5
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML+CSS商城网站_电商网页代码html和css

作者：在线问答5 | 2024-08-18 07:36:34

赞

踩

电商网页代码html和css

这是简单的 HTML 页面代码，描述了一个电商网站的布局和样式。

1. 首先，它定义了页面的基本设置，包括字符集和视口设置。
2. 然后，它导入了一个 CSS 文件，该文件定义了页面的样式。
3. 页面被分为三个主要部分：页眉（header）、搜索栏（search）和主体内容（main）。
4.页面接着展示了一些商品展示的区域（product show），包括商品秒杀、企业团购等选项。

5. 搜索栏部分包括网站的 logo 和一个搜索框。
6.页眉部分包括网站的导航栏和用户登录/注册区域。
7.主体内容部分分为两个列：一个是主要选项列表（main_list），另一个是主要内容展示区域（main_contant）和选项卡内容区域（tab_contant）。
8. 最后，页面的底部有一个简单的页脚，包含了一些售后服务信息。

运行结果： 

完整源码如下：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. <link rel="shortcut icon" href="./favicon.ico">
  7. <link rel="stylesheet" href="css/style.css">      <!-- 导入CSS样式-->
  8. <title>码农进厂打螺丝</title>        <!-- 商城名字-->
  9. </head>
  10.  
  11. <body>
  12. <!-- header start -->
  13. <div class="header">
  14.   <div class="nav w">
  15.     <ul>
  16.     	<!--导航栏部分-->
  17.       <li><a href="#">TWR商城</a></li>
  18.       <li class="fengexian"></li>
  19.       <li><a href="#">嘿嘿</a></li>
  20.       <li class="fengexian"></li>
  21.       <li><a href="#">哈嗨</a></li>
  22.       <li class="fengexian"></li>
  23.       <li><a href="#">云服务</a></li>
  24.       <li class="fengexian"></li>
  25.       <li><a href="#">金融</a></li>
  26.       <li class="fengexian"></li>
  27.       <li><a href="#">细品</a></li>
  28.       <li class="fengexian"></li>
  29.       <li><a href="#">TWR开发平台</a></li>
  30.       <li class="fengexian"></li>
  31.       <li><a href="#">企业团购</a></li>
  32.       <li class="fengexian"></li>
  33.       <li><a href="#">资质证明</a></li>
  34.       <li class="fengexian"></li>
  35.       <li><a href="#">协议规划</a></li>
  36.       <li class="fengexian"></li>
  37.       <li><a href="#">下载App</a></li>
  38.       <li class="fengexian"></li>
  39.       <li><a href="#">Select Location</a></li>
  40.     </ul>
  41.     <div class="shopcar"> 购物车（0） </div>
  42.     <div class="login"> <span>登录</span> <i></i> <span>注册</span> </div>
  43.   </div>
  44. </div>
  45. <!-- header end -->
  46. <!-- search start -->
  47. <div class="search w">
  48.   <div class="logo"></div>
  49.   <div class="search_nav">
  50.     <ul>
  51.       <li><a href="#">啥啥</a></li>
  52.       <li><a href="#">--品牌</a></li>
  53.       <li><a href="#">电视</a></li>
  54.       <li><a href="#">笔记本</a></li>
  55.       <li><a href="#">家电</a></li>
  56.       <li><a href="#">路由器</a></li>
  57.       <li><a href="#">智能硬件</a></li>
  58.       <li><a href="#">服务</a></li>
  59.       <li><a href="#">社区</a></li>
  60.     </ul>
  61.   </div>
  62.   <div class="inp">
  63.     <input type="text" name="" id="">
  64.     <a href="#"></a> </div>
  65. </div>
  66. <!-- search end -->
  67. <!-- main start -->
  68. <div class="main w">
  69.   <div class="main_list">
  70.     <ul>
  71.       <li><a href="#">手机、电话卡</a></li>
  72.       <li><a href="#">电视盒子</a></li>
  73.       <li><a href="#">笔记本 显示器 平板</a></li>
  74.       <li><a href="#">家电 插线板</a></li>
  75.       <li><a href="#">出行 穿戴</a></li>
  76.       <li><a href="#">智能路由器</a></li>
  77.       <li><a href="#">电源配件</a></li>
  78.       <li><a href="#">健康 儿童</a></li>
  79.       <li><a href="#">耳机 音响</a></li>
  80.       <li><a href="#">生活 箱包</a></li>
  81.     </ul>
  82.   </div>
  83.   <div class="main_contant"> <i> <img  src="img/banner2.jpg" alt="" style="display: block;">
  84.   </div>
  85.   <div class="tab_contant">
  86.     <ul>
  87.       <li><a href="#">手机、电话卡</a></li>
  88.       <li><a href="#">电视盒子</a></li>
  89.       <li><a href="#">笔记本 显示器 平板</a></li>
  90.       <li><a href="#">家电 插线板</a></li>
  91.       <li><a href="#">出行 穿戴</a></li>
  92.       <li><a href="#">智能路由器</a></li>
  93.       <li><a href="#">电源配件</a></li>
  94.       <li><a href="#">健康 儿童</a></li>
  95.       <li><a href="#">耳机 音响</a></li>
  96.       <li><a href="#">生活 箱包</a></li>
  97.     </ul>
  98.   </div>
  99. </div>
  100. <!-- main end -->
  101.  
  102. <!-- product show start -->
  103. <div class="product w">
  104.   <div class="list">
  105.     <ul>
  106.       <li> <i></i> <span>商品秒杀</span> </li>
  107.       <li> <i></i> <span>企业团购</span> </li>
  108.       <li> <i></i> <span>F码通道</span> </li>
  109.       <li> <i></i> <span>粉卡</span> </li>
  110.       <li> <i></i> <span>以旧换新</span> </li>
  111.       <li> <i></i> <span>话费充值</span> </li>
  112.     </ul>
  113.   </div>
  114.   <div class="show1"> <a href="#"> <img src="img/list1.jpg"alt =""> </a> </div>
  115.   <div class="show2"> <a href="#"> <img  src="img/list2.jpg" alt=""> </a> </div>
  116.   <div class="show3"> <a href="#"> <img src="img/list3.jpg" alt=""> </a> </div>
  117. </div>
  118. <!-- product show end -->
  119.  
  120. <!-- footer start -->
  121. <div class="footer"> <span>预约维修服务</span> <i></i> <span>7天无理由退货</span> <i></i> <span>15天免费换货</span> <i></i> <span>满99包邮</span> <i></i> <span>全国300余家售后网点</span> </div>
  122. <!-- footer end -->
  123.  
  124. </body>
  125. </html>

CSS完整代码：

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   border: none;
  5. }
  6.  
  7. h1,
  8. h2,
  9. h3,
  10. h4,
  11. h5,
  12. h6,
  13. p {
  14.   line-height: 0;
  15. }
  16.  
  17. a {
  18.   text-decoration: none;
  19. }
  20.  
  21. li {
  22.   list-style: none;
  23. }
  24.  
  25. .fl {
  26.   float: left;
  27. }
  28.  
  29. .fr {
  30.   float: right;
  31. }
  32.  
  33. .w {
  34.   width: 1226px;
  35.   margin: 0 auto;
  36. }
  37.  
  38.  
  39. /* header start */
  40.  
  41. .header {
  42.   width: 100%;
  43.   height: 40px;
  44.   background-color: #333333;
  45. }
  46.  
  47. .nav ul li {
  48.   float: left;
  49. }
  50.  
  51. .nav ul li a {
  52.   height: 40px;
  53.   line-height: 40px;
  54.   color: #afafaf;
  55.   font-size: 12px;
  56. }
  57.  
  58. .nav ul li a:hover {
  59.   color: #fff;
  60. }
  61.  
  62. .nav ul .fengexian,
  63. .login i {
  64.   height: 12px;
  65.   border-left: 1px solid #34393d;
  66.   border-right: 1px solid #423d39;
  67.   margin: 16px 7px 0;
  68. }
  69.  
  70. .shopcar {
  71.   width: 140px;
  72.   height: 40px;
  73.   line-height: 40px;
  74.   /* background-color: #424242; */
  75.   float: right;
  76.   color: #afafaf;
  77.   font-size: 12px;
  78.   margin-left: 20px;
  79.   text-align: center;
  80.   background: url(../images/shopcar.png) no-repeat 14px center #424242;
  81. }
  82.  
  83. .shopcar:hover {
  84.   background: url(../images/shopcar_hover.png) no-repeat 14px center #fff;
  85.   color: #ff8500;
  86. }
  87.  
  88. .login {
  89.   height: 40px;
  90.   line-height: 40px;
  91.   float: right;
  92.   color: #afafaf;
  93.   font-size: 12px;
  94. }
  95.  
  96.  
  97. /* search start */
  98.  
  99. .search {
  100.   /* width: 100%; */
  101.   height: 100px;
  102.   position: relative;
  103. }
  104.  
  105. .search .logo {
  106.   height: 55px;
  107.   width: 55px;
  108.   background: url(../img/logo2.jpg) no-repeat center #ff8500;
  109.   position: absolute;
  110.   left: 0;
  111.   top: 22px;
  112. }
  113.  
  114. .search .logo:hover {
  115.   background: url(../img/logo.jpg) no-repeat center #ff8500;
  116. }
  117.  
  118. .search .search_nav {
  119.   width: 614px;
  120.   height: 100px;
  121.   /* background-color: pink; */
  122.   position: absolute;
  123.   left: 234px;
  124. }
  125.  
  126. .search .search_nav li {
  127.   float: left;
  128.   padding: 0 10px;
  129. }
  130.  
  131. .search_nav li a {
  132.   display: inline-block;
  133.   height: 100px;
  134.   line-height: 100px;
  135.   font-size: 14px;
  136.   color: #323433;
  137. }
  138.  
  139. .search_nav li a:hover {
  140.   color: #ff8500;
  141. }
  142.  
  143. .inp {
  144.   height: 50px;
  145.   width: 296px;
  146.   /* background-color: yellow; */
  147.   position: absolute;
  148.   right: 0;
  149.   top: 25px;
  150.   font-size: 0px;
  151. }
  152.  
  153. .inp input {
  154.   width: 243px;
  155.   height: 48px;
  156.   border: 1px solid #dfdfdf;
  157.   outline: none;
  158.   float: left;
  159. }
  160.  
  161. .inp input:focus {
  162.   border: 1px solid #ff8500;
  163. }
  164.  
  165. .inp a {
  166.   float: left;
  167.   width: 50px;
  168.   height: 48px;
  169.   border: 1px solid #dfdfdf;
  170.   border-left: none;
  171.   background: url(../img/search_img.png)  no-repeat center;
  172. }
  173.  
  174. .inp a:hover {
  175.   background: url(../img/shopcar_hover.png)  no-repeat center #ff8500;
  176. }
  177.  
  178.  
  179. /* main start */
  180.  
  181. .main {
  182.   height: 460px;
  183.   position: relative;
  184.   margin-bottom: 14px;
  185. }
  186.  
  187. .main .main_list {
  188.   width: 234px;
  189.   height: 420px;
  190.   background-color: rgba(0, 0, 0, .5);
  191.   float: left;
  192.   padding: 20px 0;
  193.   position: absolute;
  194.   left: 0;
  195.   top: 0;
  196.   z-index: 999;
  197. }
  198.  
  199. .main .main_list li {
  200.   height: 42px;
  201.   line-height: 42px;
  202.   /* background-color: pink; */
  203. }
  204.  
  205. .main .main_list li:hover {
  206.   background-color: #ff8500;
  207. }
  208.  
  209. .main .main_list li a {
  210.   padding-left: 30px;
  211.   font-size: 12px;
  212.   color: #fff;
  213. }
  214.  
  215. .main .main_contant {
  216.   width: 1226px;
  217.   height: 100%;
  218.   /* background-color: hotpink; */
  219.   float: left;
  220. }
  221.  
  222. .main .main_contant i {
  223.   display: block;
  224. }
  225.  
  226. .main .main_contant i img {
  227.   width: 1226px;
  228.   position: absolute;
  229.   top: 0;
  230.   left: 0;
  231.   display: none;
  232. }
  233.  
  234. .main .toggle {
  235.   height: 70px;
  236.   width: 992px;
  237.   position: absolute;
  238.   right: 0;
  239.   top: 50%;
  240.   margin-top: -35px;
  241.   z-index: 999;
  242. }
  243.  
  244. .toggle span {
  245.   height: 70px;
  246.   width: 40px;
  247.   cursor: pointer;
  248.   line-height: 70px;
  249.   text-align: center;
  250.   font-size: 32px;
  251.   color: #d2d2d2;
  252. }
  253.  
  254. .toggle span:hover {
  255.   background-color: rgba(0, 0, 0, .5);
  256.   color: #fff;
  257.   /* background-color: pink; */
  258. }
  259.  
  260. .main .main_contant ol {
  261.   width: 90px;
  262.   height: 10px;
  263.   position: absolute;
  264.   right: 34px;
  265.   bottom: 25px;
  266.   z-index: 99;
  267. }
  268.  
  269. .main .main_contant ol li {
  270.   float: left;
  271.   width: 6px;
  272.   height: 6px;
  273.   border: 2px solid #939393;
  274.   background-color: #8e8e8e;
  275.   margin: 0 4px;
  276.   border-radius: 50%;
  277. }
  278.  
  279. .current {
  280.   background-color: #fff!important;
  281. }
  282.  
  283.  
  284. /* tab 栏 */
  285.  
  286. .tab_contant {
  287.   width: 992px;
  288.   height: 460px;
  289.   position: absolute;
  290.   top: 0;
  291.   left: 234px;
  292.   z-index: 1;
  293. }
  294.  
  295. .tab_contant li {
  296.   list-style: none;
  297.   width: 990px;
  298.   height: 458px;
  299.   /* background-color: yellow; */
  300.   background-color: #fff;
  301.   border: 1px solid #ccc;
  302.   position: absolute;
  303.   top: 0;
  304.   left: 0;
  305.   display: none;
  306. }
  307.  
  308.  
  309. /* show start */
  310.  
  311. .product {
  312.   height: 170px;
  313.   /* background-color: pink; */
  314.   margin-bottom: 52px;
  315. }
  316.  
  317. .product .list {
  318.   height: 170px;
  319.   width: 234px;
  320.   background-color: #605750;
  321.   float: left;
  322. }
  323.  
  324. .product .list ul li {
  325.   float: left;
  326.   height: 85px;
  327.   width: 78px;
  328.   position: relative;
  329.   cursor: pointer;
  330.   opacity: 0.6;
  331. }
  332.  
  333. .product .list ul li:hover {
  334.   opacity: 1;
  335. }
  336.  
  337. .product ul li i {
  338.   display: block;
  339.   height: 22px;
  340.   width: 22px;
  341.   background-color: pink;
  342.   position: absolute;
  343.   top: 22px;
  344.   left: 28px;
  345.   background: url(../images/jlt.png);
  346. }
  347.  
  348. .product ul li:nth-child(2) i {
  349.   background: url(../images/jlt.png) 0 -36px;
  350. }
  351.  
  352. .product ul li:nth-child(3) i {
  353.   background: url(../images/jlt.png) 0 -71px;
  354. }
  355.  
  356. .product ul li:nth-child(4) i {
  357.   background: url(../images/jlt.png) 0 -107px;
  358. }
  359.  
  360. .product ul li:nth-child(5) i {
  361.   background: url(../images/jlt.png) 0 -143px;
  362. }
  363.  
  364. .product ul li:nth-child(6) i {
  365.   background: url(../images/jlt.png) 0 -178px;
  366. }
  367.  
  368. .product .list span {
  369.   position: absolute;
  370.   bottom: 20px;
  371.   text-align: center;
  372.   width: 100%;
  373.   color: #c9c8c4;
  374.   font-size: 12px;
  375. }
  376.  
  377. .product .show1,
  378. .show2,
  379. .show3 {
  380.   height: 170px;
  381.   width: 316px;
  382.   background-color: skyblue;
  383.   float: left;
  384.   margin-left: 15px;
  385. }
  386.  
  387. .product .show1 {
  388.   margin-left: 14px;
  389. }
  390.  
  391. .product img {
  392.   width: 316px;
  393.   height: 170px;
  394. }
  395.  
  396.  
  397. /* footer start */
  398.  
  399. .footer {
  400.   height: 25px;
  401.   padding-left: 56px;
  402.   width: 1114px;
  403.   margin: 0 auto;
  404. }
  405.  
  406. .footer span {
  407.   color: #616163;
  408.   font-size: 16px;
  409.   height: 25px;
  410.   display: inline-block;
  411.   line-height: 25px;
  412.   vertical-align: top;
  413.   cursor: pointer;
  414. }
  415.  
  416. .footer i {
  417.   display: inline-block;
  418.   height: 25px;
  419.   width: 1px;
  420.   background-color: #616163;
  421.   margin: 0 54px;
  422.   vertical-align: top;
  423. }
  424.  
  425. .footer span:hover {
  426.   color: #ff8500;
  427. }

这只是一个静态页面的代码，不能执行任何交互功能。它提供了页面的布局和样式，但没有与后端服务器进行交互。 

如需图片请评论@我或思信

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/在线问答5/article/detail/996625
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号