練習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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/304828.html

標籤：其他

上一篇：練習spopcmd云云首頁

下一篇：幾個ABAP FREE面試問題