练习spopcmd云云首页

  • A+
所属分类:Web前端
摘要

下面是效果展示图 html代码css样式 img内部样式素材:下载:https://junzhiyi.lanzouw.com/itnEKtme4la 密码:1rnz

下面是效果展示图

练习spopcmd云云首页

 

html代码

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <link rel="stylesheet" href="css/index.css">     <script src="js/jquery-3.6.0.min.js"></script>     <script src="js/index.js"></script> </head> <body>     <div class="wrap">         <!-- 头部 -->         <div class="header">             <!-- 导航区域 -->             <div class="header_nav">                 <img src="img/logo.png" alt="">                 <div class="nav_list">                     <a href="">首页</a>                     <a href="">云云商城</a>                     <a href="">智慧门店</a>                     <a href="">营销平台</a>                     <a href="">媒体联盟</a>                     <a href="">关于云道</a>                 </div>             </div>             <!-- 轮播图 -->             <div class="header_banner">                 <!-- 图片 -->                 <div class="banner_imgs">                     <img src="img/banner0.png" alt="">                     <img src="img/banner1.png" alt="">                     <img src="img/banner2.png" alt="">                     <img src="img/banner3.png" alt="">                 </div>                 <!-- 底部小圆点 -->                 <div class="banner_btn">                     <span class="sp1">1</span>                     <span class="sp2">1</span>                     <span class="sp3">1</span>                     <span class="sp4">1</span>                 </div>                  <div class="banner_btn1">                     <img class="btn_left" src="" alt="">                     <img class="btn_right" src="" alt="">                 </div>             </div>         </div>         <!-- 主体 -->         <div class="content">             <!-- 我们的服务 -->             <div class="content_server">                 <!-- 服务标签 -->                 <div class="server_title">                     <!-- 标签文字 -->                     <div class="title_text">                         <h3>我们的服务</h3>                         <p>PROGRAM HIGHLGHTS</p>                     </div>                                      </div>                 <!-- 简介 -->                 <div class="server_synopsis">                     <p>shopcmd云道,国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系,简约的系统,个性化前端,全覆盖多渠道营销体系... </p>                     <p>我们致力于打造一个服务于品牌商城/独立电商的完整生态,让企业的独立电商之路变得更简单,也更有价值!</p>                 </div>                 <!-- 简介内容 -->                 <div class="server_lists">                     <ul>                         <li>                             <img src="img/icon1.png" alt="">                             <h4>我是卖家</h4>                             <p>shopcmd云电商解决方案,我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和 品牌营销的全新视角,赋予了品牌商城及独立电商更 大的生存空间和存在价值!</p>                             <button>我要建站</button>                         </li>                         <li>                             <img src="img/icon2.png" alt="">                             <h4>我要营销</h4>                             <p>云道不断完善的营销系统,联合优质媒体资源,集成常用的网络营销模式及终端,以最简单的产品形态,帮助独立商城实现店铺及商品信息在全网的快速分销。</p>                             <button>我要推广</button>                         </li>                         <li>                             <img src="img/icon3.png" alt="">                             <h4>媒体合作</h4>                             <p>真正的全民营销时代,无需学习,无需维护。通过您的网站、朋友圈、媒体流量、移动展现、媒体解决方案获取收益。我们致力于实现合作媒体流量价值的最大化。</p>                             <button>我要合作</button>                         </li>                     </ul>                 </div>             </div>             <!-- 经典案例记录 -->             <div class="content_record">                 <div class="record_title">                     <!-- 标签文字 -->                     <div class="title_text">                         <h3>经典记录</h3>                         <p>THE CLASSIC RECORD CASE</p>                     </div>                 </div>                 <div class="record_videos">                     <ul>                         <!-- 光标同时出现 按住alt键 -->                         <li><video src="video/mayouit.mp4" controls></video></li>                         <li><video src="video/mayouit.mp4" controls></video></li>                         <li><video src="video/mayouit.mp4" controls></video></li>                     </ul>                 </div>             </div>             <!-- 合作媒体模块 -->             <div class="content_media">                 <div class="media_title">                     <!-- 标签文字 -->                     <div class="title_text">                         <h3>合作媒体</h3>                         <p>ASSOCIATED MEDIA</p>                     </div>                 </div>                 <div class="media_bd">                     <ul>                         <li><a href="#"><div class="taobao"></div></a></li>                         <li><a href="#"><img src="img/jd.png" alt=""></a></li>                         <li><a href="#"><img src="img/sp.png" alt=""></a></li>                         <li><a href="#"><img src="img/al.png" alt=""></a></li>                         <li><a href="#"><img src="img/zk.png" alt=""></a></li>                         <li><a href="#"><div class="taobao"></div></a></li>                         <li><a href="#"><img src="img/jd.png" alt=""></a></li>                         <li><a href="#"><img src="img/sp.png" alt=""></a></li>                         <li><a href="#"><img src="img/al.png" alt=""></a></li>                         <li><a href="#"><img src="img/zk.png" alt=""></a></li>                         <li><a href="#"><div class="taobao"></div></a></li>                         <li><a href="#"><img src="img/jd.png" alt=""></a></li>                         <li><a href="#"><img src="img/sp.png" alt=""></a></li>                         <li><a href="#"><img src="img/al.png" alt=""></a></li>                         <li><a href="#"><img src="img/zk.png" alt=""></a></li>                     </ul>                 </div>             </div>         </div>         <!-- 尾部 -->         <div class="foot">             <div class="foot_hd">                 <a href="#">shopcmd </a>                 <a href="#">首页 </a>                 <a href="#">官网云商城 </a>                 <a href="#">智慧门店 </a>                 <a href="#">营销平台 </a>                 <a href="#">媒体联盟 </a>                 <a id="last" href="#">关于我们 </a>             </div>             <div class="foot_bd">                 <p>@Copyright 2015 苏州海云网络科技有限公司版权所有 | 苏ICP备15038170号 -3</p>             </div>         </div>     </div>     <script></script> </body> </html>

css样式

body,p,h3{     /* 清除外边距 */     margin: 0; } /* 公共样式,标签样式 */ /* a标签公用属性 */ a{     color: #000;     /* 去除下划线 */     text-decoration: none; } ul{     padding: 0px;     margin: 0px;     /* 清除小圆点 */     list-style: none; }  .wrap .header{     width: 100%; } .header .header_nav{     width: 1240px;     height: 100px;     margin: 0 auto;     line-height: 100px; } /* 头部图片尺寸 */ .header_nav img{     width: 222px; } /* 导航列表 */ .header_nav .nav_list{     float: right;     text-align: right; } .nav_list a{     margin: 0 19px; } /* 导航悬停显示 */ .nav_list a:hover{     color: rgb(14,104,238); } .header .header_banner{     position: relative;     width: 100%;     height: 622px; } .header_banner .banner_imgs{     width: 100%;     height: 100%; } .banner_imgs img{     position: absolute;     width: 100%;     height: 100%; } .banner_btn{     position: absolute;     width: 100%;     text-align: center;     bottom: 30px; } .banner_btn span{     display: inline-block;     width: 12px;     height: 12px;     /* 透明色 */     background-color: transparent;     /* 因为不能是空标签,所以将字体设置0px,隐藏起来 */     font-size: 0px;     border: 1px solid white;     border-radius: 50%; } .banner_btn .sp1{     background-color: orange; }  /* 主体样式 */ .content{     width: 100%; } .content .content_server{     width: 100%;     margin-top: 60px; } .content_server .server_title{     width: 1002px;     border-top: 1px solid #ccc;     margin: 0 auto; } .server_title .title_text{     width: 165px;     margin: 0 auto;     text-align: center;     margin-top: -15px;     background-color: white; } .title_text h3{     font-size: 23px; } .title_text p{     font-size: 14px;     color:#ccc; } .content_server .server_synopsis{     margin-top: 20px;     text-align: center;     font-size: 14px;     color: #ccc; } .content_server .server_lists{     width: 1054px;     margin: 0px auto;     margin-top: 20px; } .server_lists ul{     width: 100%;     /* 溢出隐藏 */     overflow: hidden; } .server_lists ul>li{     position: relative;     width: 318px;     height: 508px;     float: left;     margin: 0 15px;     border: 1px solid #ccc;     text-align: center; } .server_lists ul>li>img{     width: 220px;     height: 128px;     margin-top: 40px; } .server_lists ul>li>h4{     font-size: 23px; } .server_lists ul>li>p{     width: 245px;     margin: 0 auto;     font-size: 13px; } .server_lists ul>li>button{     position:absolute;     left: 0;     right: 0;     /* 指明方向 居中 */     margin: 0 auto;     bottom: 60px;     width: 148px;     height: 36px;     border: 1px solid orange;     color:orange;     line-height: 36px;     background-color: transparent; } /* 经典案例 */ .content .content_record{     margin-top: 60px; } .content_record .record_title{     width: 1002px;     border-top: 1px solid #ccc;     margin: 0 auto; } .record_title .title_text{     width: 165px;     margin: 0 auto;     text-align: center;     margin-top: -15px;     background-color: white; }  .content_record .record_videos{     width: 1092px;     margin: 0 auto;     margin-top: 20px; } .record_videos ul{     overflow: hidden; } .record_videos ul>li{     width: 324px;     height: 211px;     float: left;     margin: 20px; } .record_videos ul>li>video{     width: 100%;     height: 100%;     /* 覆盖对象 填充剩余空间 */     object-fit: cover; } /* 合作媒体 */ .content .content_media{     width: 1100px;     margin: 0 auto;     margin-top: 60px; } .content_media .media_title{     width: 1002px;     border-top: 1px solid #ccc;     margin: 0 auto; } .media_title .title_text{     width: 165px;     margin: 0 auto;     text-align: center;     margin-top: -15px;     background-color: white; } .content_media .media_bd ul{     width: 1055px; } .media_bd{     overflow: hidden;     width: 1053px;     height: 240px; } .media_bd a{     text-align: center;     } .media_bd li{     float: left;     border-right:1px #CCCCCC dashed ;     border-bottom:1px #ccc dashed;     padding-top: 20px;     width: 210px;     height: 60px;     text-align: center; } .taobao{     display: inline-block;     width: 104px;     height: 41px;     background: url(../img/tb.png) no-repeat center; } /* 鼠标悬停变样式 */ .taobao:hover{     background: url(../img/tb.png) no-repeat center; }   /* 尾部 */ .foot{     width: 100%;     height: 160px;     background-color: #ccd;     color: white;     font-size: 12px;     text-align: center;margin-top: 60px; } .foot p{     line-height: 50px; } .foot_hd{     padding-top: 40px;     margin: 0 auto;     text-align: center; } .foot_hd a{     color: white;     font-size: 14px;     /* 右边框 */     border-right: white solid 1px;     margin-right: 10px;     padding-right: 10px; } .foot_bd{     margin: 0 auto;     color: #888;     text-align: center;     margin-top: 30px; } .foot_hd a:hover{     color: #2288f6;     text-decoration: underline; }

 

img内部样式素材:

下载:https://junzhiyi.lanzouw.com/itnEKtme4la 密码:1rnz