练习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

posted @ 2021-10-02 13:44 CHengYuP 阅读(495) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

辰愈

SHOW ME CODE

练习spopcmd云云首页

公告