云道静态首页练习题

冷不防 2023-06-05 08:08 15阅读 0赞

代码地址：https://github.com/sandraryan/practise/tree/master/%E9%9D%99%E6%80%81%E9%A1%B5%E9%9D%A2/%E4%BA%91%E9%81%93%E9%9D%99%E6%80%81%E9%A6%96%E9%A1%B5

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>云道</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        
        <div class="header">
            <div class="header-content">
                <img src="images/logo.gif">
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">云云商城</a></li>
                    <li><a href="">智慧门店</a></li>
                    <li><a href="">营销平台</a></li>
                    <li><a href="">媒体联盟</a></li>
                    <li><a href="">关于云道</a></li>
                </ul>
            </div>
        </div>
        <div>
            <img src="images/banner.gif">
        </div>
        
        <div class="service">
            <h3>我们的服务</h3>
            <p class="slogan">PROGRAM HIGHLIGHTS</p>
            <p class="intro">shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系... 我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！ </p>
            <div class="sales">
                <img src="images/service1.gif">
                <h5>我是卖家</h5>
                <p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和品牌营销的全 新视角，赋予了品牌商城及独立电商更 大的生存空间和存在价值！</p>
                <input type="button" value="我要建站">
            </div>
            <div class="promotion">
                <img src="images/service2.gif">
                <h5>我要营销</h5>
                <p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和品牌营销的全 新视角，赋予了品牌商城及独立电商更 大的生存空间和存在价值！</p>
                <input type="button" value="我要推广">
            </div>
            <div class="media">
                <img src="images/service3.gif">
                <h5>媒体合作</h5>
                <p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和品牌营销的全 新视角，赋予了品牌商城及独立电商更 大的生存空间和存在价值！</p>
                <input type="button" value="我要合作">
            </div>
        </div>
        
        <div class="case">
            <h3>经典案例</h3>
            <p> THE CLASSICAL CASES</p>
            <img class="side" src="images/left.gif" >    
            <img class="cases" src="images/case1.gif" >
            <img class="cases" src="images/case2.gif" >
            <img class="cases"  src="images/case3.gif" >
            <img class="side" src="images/right.gif" >
        </div>
    
        
        <div class="related">
            <h3>合作媒体</h3>
            <p> RELATED MEDIA</p>
            <div class="links">
                <ul>
                    <li><a href=""> <img src="images/tb.gif" alt=""></a></li>
                    <li><a href=""> <img src="images/ali.gif" alt=""></a></li>
                    <li><a href=""> <img src="images/zks.gif" alt=""></a></li>
                    <li><a href=""> <img src="images/jd.gif" alt=""></a></li>
                    <li><a href=""> <img src="images/shopex.gif" alt=""></a></li>
                </ul>
            </div>
            <div class="links">
                <ul>
                    <li><a href=""> <img src="images/tb.gif" alt=""></a></li>
                    <li><a href=""> <img src="images/ali.gif" alt=""></a></li>
                    <li><a href=""> <img src="images/zks.gif" alt=""></a></li>
                    <li><a href=""> <img src="images/jd.gif" alt=""></a></li>
                    <li><a href=""> <img src="images/shopex.gif" alt=""></a></li>
                </ul>
                </div>
            <div class="links">
                <ul>
                    <li><a href=""> <img src="images/tb.gif" alt=""></a></li>
                    <li><a href=""> <img src="images/ali.gif" alt=""></a></li>
                    <li><a href=""> <img src="images/zks.gif" alt=""></a></li>
                    <li><a href=""> <img src="images/jd.gif" alt=""></a></li>
                    <li><a href=""> <img src="images/shopex.gif" alt=""></a></li>
                </ul>
                </div>
    
        </div>
    </body>
    </html>

css

body {
        
        margin: 0;
        padding: 0;
    }
    
    /* header */
    .header {
        
        height: 80px;
    }
    .header-content {
        
        width: 80%;
        height: 80px;
        margin: 0 auto;
    }
    .header-content img {
        
        float: left;
        height: 80px;
        margin-left: 20px;
        margin-right: 80px;
    }
    .header-content ul {
        
        margin: 0 auto;
        list-style: none;
    }
    .header-content ul li {
        
        text-decoration: none;
        float: left;
    }
    .header-content ul li a {
        
        width: 80px;
        height: 80px; 
        display: inline-block;
        text-decoration: none;
        color: black;
        margin: 0 5px;
        text-align: center;
        line-height: 80px;
        font-size: 16px;
    }
    .header-content ul li a:hover {
        
        color: blue;
    }
    
    /* service */
    .service {
        
        width: 80%;
        margin: 0 auto;
        height: 650px;
    }
    .service h3 {
        
        text-align: center;
        font-size: 26px;
        margin-bottom: 0;
    }
    .service .slogan {
        
        text-align: center;
        margin-top: 2px;
        
    }
    .service .intro {
        
        font-size: 12px;
        color: gray;
        text-align: center;
        line-height: 26px;
    }
    .sales, .promotion, .media {
        
        width: 300px;
        height: 500px;
        border: 1px solid lightgray;
        float: left;
        margin: 10px;
    }
    .sales img, .promotion img, .media img {
        
        width: 250px;
        height: 130px;
        margin: 30px 25px;
    }
    .sales h5, .promotion h5, .media h5 {
        
        text-align: center;
        font-size: 18px;
        font-weight: 400;
    }
    .sales p, .promotion p, .media p {
        
        text-align: center;
        font-size: 12px;
        color: gray;
        line-height: 26px;
        padding: 25px;
    }
    .sales input, .promotion input, .media input{
        
        display: block;
        width: 140px;
        height: 40px;
        margin: 0 80px;
        background-color: white;
        border: 1px solid orange;
        border-radius: 10px;
    }
    .sales input:hover, .promotion input:hover, .media input:hover{
        
        background-color: orange;  
        transition: 1s;
    }
    
    /* case */
    .case{
        
        width: 90%;
        margin: 50px auto;
        clear: both;
    }
    .case h3 {
        
        text-align: center;
        font-size: 26px;
        margin-bottom: 0;
    }
    .case p{
        
        text-align: center;
        margin-top: 2px;
    }
    .case .cases{
        
        width: 300px;
        height: 200px;
        margin: 5px 10px;
    }
    .case .side {
        
        width: 60px;
        height: 50px;
        margin: 75px 0;
    }
    /* media */
    .related {
        
        width: 80%;
        margin: 0 auto;
    }
    .related h3 {
        
        text-align: center;
        font-size: 26px;
        margin-bottom: 0;
    }
    .related p{
        
        text-align: center;
        margin-top: 2px;
    }
    .links {
        
        width: 100%;
        border: 1px dotted gray;
        height: 100px;
        margin: 10px;
    }
    .related ul li{
        
        text-decoration: none;
        list-style: none;
        margin: 0 auto;
    }
    .related ul li a{
        /* display: inline-block; */
        float: left;
        text-decoration: none;
        margin: 10px;
        padding:9px 40px;
    }
    .related ul li img{
        
        width: 80px;
        height: 50px;
    }

转载于:https://www.cnblogs.com/sandraryan/p/10868699.html