云道静态首页练习题

代码地址: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 HIGHLIGHTSp>
        <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 CASESp>
        <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 MEDIAp>
        <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

你可能感兴趣的:(前端)