- A+
所属分类：Web前端
下面是效果展示图
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
