实战开发---制作电商网站首页

chen1119_

于 2024-01-08 15:27:20 发布

阅读量1.6k

点赞数 30

文章标签： html5

本文链接：https://blog.csdn.net/chen1119_/article/details/135457978

版权

电商网站设计包括以下几个方面：

产品展示与分类：设计一个清晰、易于浏览的产品展示页面，包括产品分类、产品详细信息、产品图片等，让用户可以方便地找到所需的产品。
用户注册与登录：设计用户注册和登录功能，包括账号密码的管理、找回密码、账号安全等功能，以及用户信息的保存和管理。
购物车与订单管理：设计购物车功能，让用户可以将自己喜欢的产品加入购物车，并进行数量、价格等的调整。同时，设计订单管理功能，让用户可以查看自己的订单信息、修改订单等。
支付与物流：设计在线支付功能，包括支付宝、微信支付等常见支付方式，确保支付安全。同时，设计物流查询功能，让用户可以随时查看物流信息。
用户评价与推荐：设计用户评价功能，让用户可以对购买的产品进行评价和打分。同时，设计产品推荐功能，根据用户的购买历史和个人喜好，推荐相似的产品给用户。
个人中心：设计个人中心页面，让用户可以查看自己的订单历史、个人信息、收货地址等，并进行相应的修改和管理。
后台管理：设计一个后台管理系统，让管理员可以管理产品信息、订单信息、用户信息等，同时进行数据统计和分析。

源代码:

<!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8">
       <title>电商网站</title>
       <style type="text/css">
       body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,img {margin:0; padding:0; border:0; list-style:none;}
       body{font-family: 微软雅黑;Arial, Helvetica,sans-serif; font- size:14px;}
       a:link,a:visited{ color: #999;text-decoration: none;}
       a:hover{color: #fff;}
       input,textarea{outline: none;}
       .videobox{
           width:100%;
           height:680px;
           overflow:hidden;
           position:relative;
       }
       .videobox video{
           width:100%;
           min-width:1280px;
           position:absolute;
           trans-form:translate(-50%,-50%);
       }
       .videobox header{
           width:100%;
           height:40px;
           background:#333;
           z-index:999;
           position:absolute;
       }
       .videobox header .con{
           width:1030px;
           height:40px;
           margin:0 auto;
       }
       .videobox header .left{
           width:75px;
           height:20px;
           background:url(../10/images/logo.png) 0 0 no-repeat;
           margin-top: 10px;
           float:left;
       }
       .videobox header .right{
           margin-top: 10px;
           float: right;
       }
       .videobox header .right a{
           margin-right: 10px;
       }
       .videobox nav{
           width:100%;
           height:90px;
           background: rgba(0,0,0,0.2);
           z-index:1000;
           position:absolute;
           top:40px;
           border-bottom:1px solid #fff;
       }
       .videobox nav ul{
           width: 1030px;
           height: 90px;
           margin: 0 auto;
           position: relative;
       }
       .videobox nav ul li{
           float: left;
           margin-right: 19%;
       }
       .videobox nav ul .left a{
           display: block;
           height: 90px;
           line-height: 90px;
           font-size:20px;
           color: #fff;
       }
       .videobox nav ul .left a img{
           vertical-align:middle;
       }
       .videobox nav ul .left a span{margin:0 10px;}
       .videobox aside{
           display: none;
           width: 380px;
           height: 560px;
           background: rgba(0,0,0,0.3);
           position:absolute;
           left: 0;
           top: 90px;
           color:#fff;
       }
       .videobox nav ul .left:hover aside{display:block;}
       .videobox aside span{
           width:20px;
           height:14px;
           background: url(../10/images/liebiao.png) 0 0 no-repeat;
           position:absolute;
           left: 50px;
           top: 0;
       }
       .videobox aside ol{
           width: 155px;
           float:left;
       }
       .videobox aside ol li{
           width: 155px;
           height: 25px;
           line-height: 25px;
           cursor: pointer;
           font-family: "宋体";
       }
       .videobox aside ol li.con{
           font-size: 16px;
           text-indent: 0;
           font-family:"微软雅黑";
           padding: 10px 0;
       }
       .videobox aside ol li:hover{color: #fff;}
       .videobox aside .zuo{margin: 35px 0 0 68px;}
       .videobox aside .you{margin-top:35px;}
       .videobox aside img{margin:10px 0 0 13px;}
       .videobox nav ul .center{margin-top:32px;}
       .videobox nav ul .center input{
           width:240px;
           height:30px;
           border:1px solid #fff;
           border-radius: 15px;
           color:#fff;
           line-height:32px;
           background:rgba(0,0,0,0);
           padding-left: 30px;
           box-sizing:border-box;
           background:url(../10/images/search.png) no-repeat 3px 3px;
       }
       .videobox nav ul .right{
           margin-top:32px;
           width:280px;
           height:32px;
           margin-right:0;
           text-align: center;
           line-height: 32px;
           font-size: 16px;
           font-family:"freshskin";
       }
       .videobox nav ul .right a{display:inline-block;width:32px;height: 32px;color:#fff;box-shadow: 0 0 0 1px #fff inset;transition: box-shadow 0.3s ease 0s;border-radius: 16px;margin-left:30px;}
       .videobox nav ul .right a:hover{box-shadow: 0 0 0 16px #fff inset;color: #c1dcc5;}
       .videobox .pic{
           width:570px;
           height:210px;
           position:absolute;
           left: 50%;
           top: 50%;
           transform:translate(-50%,-50%);
           background:url(../10/images/wenzi.png) no-repeat;
           text-align:center;
       }
       .videobox .pic p{margin-top:240px;color: #4c8174;}
       .videobox .pic ul{position:absolute;color: #999;}
       .videobox .pic ul li{width:180px;height:56px;border-radius: 28px;background: #fff;text-align:left;}
       .videobox .pic ul .one{line-height:56px;position:absolute;left:-1920px;top:40px;opacity:0;transition:all 2s ease-in 0s;}
       .videobox .pic ul .two{line-height:56px;position:absolute;left: 1920px;top:40px;opacity:0;transition:all 2s ease-in 0s;}
       body:hover .videobox .pic ul .one{position: absolute;left:100px;top: 40px;opacity:0.8;}
       body:hover .videobox .pic ul .two{position: absolute;left:300px;top: 40px;opacity:0.8;}
       .videobox .pic ul .one span,.videobox .pic ul .two span{
           float:left;
           width:40px;
           height:40px;
           text-align:center;
           line-height:40px;
           border-radius:20px;
           margin:8px 10px 0 10px;
           box-shadow:0 0 0 1px #90c197 inset;
           transition:box-shadow 0.3s ease 0s;
           font-weight:bold;
           color:#90c197;
           font-family:"freshskin";
       }
       .videobox .pic ul .two span{margin: 8px 30px 0 10px;}
       .videobox .pic ul .one:hover span,.videobox .pic ul .two:hover span{box-shadow:0 0 0 20px #90c197 inset;color:#fff;}
       @font-face {
           font-family:'freshskin';
           src:url('../fonts/iconfont.ttf');
       }
       .new{width:100%;height:530px;background-color:#fff;}
       .new header{
           width:385px;
           height:95px;
           background-color:#f7f7f7;
           border-radius:48px;
           margin:70px auto 0;
           box-sizing:border-box;
           padding:2px 0 0 35px;
       }
       .new p{
           margin-top: 10px;
           text-align:center;
           color:#db0067;
       }
       .new ul{
           margin:70px auto 0;
           width:960px;
       }
       .new ul li{
           width: 266px;
           height: 250px;
           border:1px solid #ccc;
           background:url(../10/images/pic1.jpg) 0 0 no-repeat;
           float: left;
           margin-right:8%;
           margin-bottom: 40px;
           position:relative;
           overflow:hidden;
       }
       .new ul li:nth-child(2) {
           background-image:url(../10/images/pic2.jpg);
       }
       .new ul li:nth-child(3) {
           margin-right:0;
           background-image:url(../10/images/pic3.jpg);
       }
       .new ul li hgroup{
           position:absolute;
           left: 0;
           top: -250px;
           width:266px;
           height:250px;
           background:rgda(0,0,0,0.5);
           transition: all 0.5s ease-in 0s;
       }
       .new ul li:hover hgroup{position:absolute;left: 0;top: 0;}
       .new ul li hgroup h2:nth-child(1) {
           font-size:22px;
           text-align: center;
           color: #fff;
           font-weight:normal;
           margin-top: 58px;
       }
       .new ul li hgroup h2:nth-child(2) {font-size:14px;text-align: center;color: #fff;font-weight: normal;margin-top: 15px;}
       .new ul li hgroup h2:nth-child(3) {
           width:26px;
           height:26px;
           margin-left: 120px;
           margin-top:15px;
           background:url(../10/images/jiantou.png) 0 0 no-repeat;
       }
       .new ul li hgroup h2:nth-child(4) {
           width:75px;
           height:22px;
           margin-left: 95px;
           margin-top:25px;
           background:url(../10/images/anniu.png) 0 0 no-repeat;
       }
       .try{
           width:100%;
           height:312px;
           background:#83ba8b;
           padding-top: 70px;
       }
       .try header{
           width:555px;
           height:95px;
           background:#f7f7f7;
           border-radius:48px;
           margin:0 auto;
           box-sizing:border-box;
           padding:7px 0 0 35px;
       }
       .try p{
           margin-top: 10px;
           text-align:center;
           color: #fff;
       }
       .try ul{margin:70px auto 0;width:960px;}
       .try ul li{
           width:291px;
           height:251px;
           float:left;
           margin-right: 4%;
           margin-bottom: 40px;
           position: relative;
           -webkit-perspective:230px;
       }
       .try ul li:last-child{margin-right: 0;}
       .try ul li img{position:absolute;left: 0;top: 0;-webkit-backface-visibility: hidden;transition: all 0.5s ease-in 0s;}
       .try ul li img.fan{-webkit-transform: rotateX(-180deg);}
       .try ul li:hover img.fan{-webkit-transform: rotateX(0deg);}
       .try ul li:hover img.zheng{-webkit-transform: rotateX(180deg);}
       .text{width:100%;height:700px;background:#fff;}
       .text header{width:508px;height:95px;background: #f7f7f7;border-radius: 48px;margin:220px auto 0;box-sizing: border-box;padding: 7px 0 0 35px;}
       .text p{margin-top: 10px;text-align: center;color: #db0067;}
       .text ul{margin: 70px auto 0;width: 960px;}
       .text ul li{width: 195px;height: 195px;border: 1px solid #ccc;border-radius: 50%;float: left;margin-right:5%;margin-bottom: 40px;position: relative;}
       .text ul li img{
           position: absolute;
           top:50%;
           left: 50%;
           transform: translate(-50%,-50%);
       }
       .text ul li:nth-child(4),.text ul li:nth-child(8){margin-right:0;}
       .text ul li .tihuan{opacity: 0;transition:all 0.4s ease-in 0.2s;}
       .text ul li:hover .tihuan{opacity: 1;transform: translate(-50%,-50%)scale(0.75);}
       .text ul li .tu{transition: all 0.4s ease-in 0s;}
       .text ul li:hover.tu{opacity:0;transform: translate(-50%,-50%) scale(0.5);}
       footer{width:100%;height:400px;background:#545861;border-bottom: 1px solid #fff;}
       footer .logo{
           width:1000px;
           height:100px;
           margin:0 auto;
           background: url(../10/images/logo1.jpg) no-repeat center center;
           border-bottom: 1px solid #8c9299;
       }
       footer .message{width: 1000px;margin: 20px auto 0;color:#fffada;}
       footer .message .left{width:525px;float: left;padding-left: 30px;box-sizing: border-box;}
       footer .message .left li{float: left;margin-right:30px;}
       footer .message .left li input{
           width:215px;
           height:32px;
           border-radius: 5px;
           margin: 10px 0 15px 0;
           padding-left: 10px;
           box-sizing:border-box;
           border: none;
       }
       footer .message .left li:last-child input{
           width: 120px;
           height:39px;
           padding-left: 0;
           border:none;
           background:url(../10/images/but.jpg) no-repeat;
       }
       footer .message .right{float: left;}
       footer .message .right p{margin-bottom: 10px;}
       footer .message .right textarea{
           width:400px;
           height:172px;
           padding: 10px;
           box-sizing: border-box;
           resize:none;
       }
       .banquan{width:100%;height:60px;background: #333333;text-align: center;}
       .banquan a{line-height:60px;}
       </style>
   </head>
   <body>
       <div class="videobox">
           <header>
               <div class="con">
                   <section class="left"></section>
               <section class="right">
                       <a href="#">登录</a>
                   <a href="#">注册</a>
                   </section>
           </div>
       </header>
           <nav>
               <ul>
                   <li class="left">
                       <a class="one" href="#">
                           <img src="10/images/sanxian.png" alt="">
                           <span>选项</span>
                           <img src="10/images/sanjiao.png" alt="">
                       </a>
                       <aside>
                           <span></span>
                           <ol class="zuo">
                               <li class="con">护肤</li>
                           <li>>洁面</li>
                           <li>>爽肤水</li>
                           <li>>精华</li>
                           <li>>乳液</li>
                           <li class="con">彩妆</li>
                           <li>>BB霜</li>
                           <li>>卸妆</li>
                           <li>>粉底液</li>
                           <li class="con">香氛</li>
                           <li>>女士香水</li>
                           <li>>男士香水</li>
                           <li>>中性香水</li>
                           </ol>
                       <ol class="you">
                               <li class="con">男士专区</li>
                               <li>>爽肤水</li>
                       <li>>洁面</li>
               <li>>面霜</li>
                           <li>>精华</li>
                           <li class="con">热门搜索</li>
                           <li>>洗面奶</li>
                           <li>>去黑头</li>
                           <li>>隔离</li>
                           <li>>面膜</li>
                   </ol>
                           <img src="10/images/tu1.jpg" alt="">
                       </aside>
                   </li>
                   <li class="center">
                       <form>
                       <input type="text" value="请输入商品名称,品牌或编号">
                       </form>
                   </li>
                   <li class="right">
                       <a href="#"></a>
                   <a href="#"></a>
                   <a href="#">󰄪</a>
                   <a href="#">ڎ</a>
                   </li>
               </ul>
           </nav>
           <video src="10/video/home_loop_720p.mp4" autoplay="ture" loop="ture"> </video>
       <audio src="10/audio/home.ogg" autoplay="ture" loop="ture"></audio>
       <div class="pic">
               <p>Select the right resolution for your PC and dive in! (请为您的计算机选择正确的分辨率)</p>
               <ul>
                   <li class="one"><span></span>STANDARD标准</li>
                   <li class="two"><span></span>HD高清</li>
           </ul>
           </div>
       </div>
       <div class="new">
           <header>
               <img src="10/images/new.jpg" alt="">
           </header>
           <p>
               <ul>
                   <li>
                       <hgroup>
                           <h2>fresh skin 薏仁水</h2>
                           <h2>化妆水/爽肤水单品</h2>
                           <h2></h2>
                           <h2></h2>
                       </hgroup>
                   </li>
                   <li>
                       <hgroup>
                           <h2>蜂蜜原野天然滋养</h2>
                           <h2>美白护肤套装</h2>
                           <h2></h2>
                           <h2></h2>
                       </hgroup>
                   </li>
                   <li>
                       <hgroup>
                           <h2>纯情诱惑一抹惊艳</h2>
                           <h2>告别暗淡唇</h2>
                           <h2></h2>
                           <h2></h2>
                       </hgroup>
                   </li>
               </ul>
           </p>
       </div>
       <div class="try">
           <header>
               <img src="10/images/shizhuang.jpg" alt="">
           </header>
           <p>美化容貌增添自信突出个性</p>
           <ul>
               <li>
                   <img class="zheng" src="10/images/try1.jpg" alt="">
                   <img class="zheng" src="10/images/try4.jpg" alt="">
               </li>
               <li>
                   <img class="zheng" src="10/images/try2.jpg" alt="">
                   <img class="zheng" src="10/images/try5.jpg" alt="">
               </li>
               <li>
                   <img class="zheng" src="10/images/try3.jpg" alt="">
                   <img class="zheng" src="10/images/try6.jpg" alt="">
               </li>
           </ul>
       </div>
       <div class="text">
           <header>
               <img src="10/images/cp.jpg" alt="">
           </header>
           <p>评测我们更专业用户更放心</p>
           <ul>
               <li>
                   <img class="tu" src="10/images/cp1.jpg" alt="">
                   <img class="tihuan" src="10/images/th1.png" alt="">
               </li>
               <li>
                   <img class="tu" src="10/images/cp2.jpg" alt="">
                   <img class="tihuan" src="10/images/th2.png" alt="">
               </li>
               <li>
                   <img class="tu" src="10/images/cp3.jpg" alt="">
                   <img class="tihuan" src="10/images/th3.png" alt="">
               </li>
               <li>
                   <img class="tu" src="10/images/cp4.jpg" alt="">
                   <img class="tihuan" src="10/images/th4.png" alt="">
               </li>
               <li>
                   <img class="tu" src="10/images/cp5.jpg" alt="">
                   <img class="tihuan" src="10/images/th5.png" alt="">
               </li>
               <li>
                   <img class="tu" src="10/images/cp6.jpg" alt="">
                   <img class="tihuan" src="10/image/th6.png" alt="">
               </li>
               <li>
                   <img class="tu" src="10/images/cp7.jpg" alt="">
                   <img class="tihuan" src="10/images/th7.png" alt="">
               </li>
               <li>
                   <img class="tu" src="10/images/cp8.jpg" alt="">
                   <img class="tihuan" src="10/images/th8.png" alt="">
               </li>
           </ul>
       </div>

       <footer>
           <div class="logo"></div>
           <div class="message">
               <form>
                   <ul class="left">
                       <li>
                           <p><label for="">姓名:</label></p>
                           <input type="text">
                       </li>
                       <li>
                           <p>邮箱:</p>
                           <input type="email">
                       </li>
                       <li>
                           <p>电话:</p>
                           <input type="tel"pattern="^\d{11}$" title="请输入11位数字">
                       </li>
                       <li>
                           <p>密码:</p>
                           <input type="password">
                       </li>
                       <li>
                           <input class="but" type="submit" value="">
                       </li>
                   </ul>
                   <div class="right">
                       <p>留言:</p>
                       <textarea></textarea>
                   </div>
               </form>
           </div>
       </footer>
       <div class="banquan">
           <a href="#">fresh skin 美肤科技有限公司</a>
       </div>
   </body>
</html>