碼上歡樂
相關內容    簡體    繁體

練習spopcmd雲雲首頁

本文轉載自   查看原文   2021-10-02 13:44   94    html

下面是效果展示圖

 

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

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 2019.4.20 品優購首頁鋪設練習 移除首頁->重回首頁 首頁彈出廣告代碼 Django項目設置首頁 如何修改discuz首頁logo 蘑菇街_首頁 博客目錄總綱首頁 簡明Python3教程 首頁 word去除頁眉首頁橫線 錘子科技官方首頁的特效
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM