码迷，mamicode.com
首页 > Web开发 > 详细

用HTML编写阿里云

时间：2018-04-30 20:01:28      阅读：216      评论：0      收藏：0      [点我收藏+]

标签：双十一   微网站   ide   专业技术   bottom   精选   2-2   add   手机   

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/aliyun.css"/>
</head>
<body>
<!--导航栏-->
<header>
    <div>
        <nav>
            <img src="../images/TBheader_logo.png" />
            <a href="">注册有礼</a>
            <a href="">登录</a>
            <a href="">备案</a>
            <a href="">控制台</a>
        </nav>
    </div>
</header>
<!--云市场-->
<div class="yunshichang">
    <div class="yunshichang-top">
        <img src="../images/TB1B5cJLXXXXXbVaXXXXXXXXXXX-400-168.jpg" />
        <div>
            <div class="fuwu">
                <p>在此输入你需要的服务</p>
                <a href="">搜全部</a>
            </div>
            <span>发布定制需求</span>
            <span>管理我的服务</span>
            <div class="wangzhan">
                <a href="">PHP运行环境</a>
                <a href="">JAVA运行环境</a>
                <a href="">全能环境</a>
                <a href="">linux环境配置</a>
                <a href="">数据迁移</a>
                <a href="">清除木马</a>
                <a href="">微网站</a>
            </div>
        </div>
    </div>
    <div class="yunshichang-bottom">
        <div><p><strong>云市场分类</strong></p></div>
        <div>
            <a href="">基础软件</a>
            <a href="">代维&服务</a>
            <a href="">网站建设</a>
            <a href="">企业应用</a>
            <a href="">云安全</a>
            <a href="">数据及API</a>
        </div>
    </div>

</div>
<!--云市场分类-->
<div class="shichangfenlei">
    <div>
        <ul>
            <li>
                <span>精美模板</span><span>企业展示</span><span>电子商务</span>
            </li>
            <li>
                <span>网站定制</span><span>企业官网</span><span>电商网站</span>
                <span>手机网站</span><span>移动APP</span><span>社区论坛</span>
                <span>信息门户</span><span>精选建站</span>
            </li>
            <li>
                <span>网站素材设计</span><span>LOGO设计</span>
                <span>海报设计</span>
            </li>
            <li>
                <span>网站服务</span><span>网站改版</span><span>店铺代运营</span>
            </li>
            <li>
                <span>个性化网站定制</span><span>查看攻略</span><span>提交需求</span>
            </li>
        </ul>
    </div>

</div>
<!--找商品-->
<div class="zhaoshangping">
    <div><p><strong>找商品·轻松挑</strong></p></div>
    <div>
        <figure><img src="../images/TB1oP6tHFXXXXXUapXXAAT2HVXX-63-63.png" />
            <figcaption>精美模板</figcaption>
        </figure>
        <figure><img src="../images/TB1XNwNHpXXXXa1XVXXAAT2HVXX-63-63.png" />
            <figcaption>官网定制</figcaption>
        </figure>
        <figure><img src="../images/TB1woESHpXXXXXSXpXXAAT2HVXX-63-63.png" />
            <figcaption>电商网站</figcaption>
        </figure>
        <figure><img src="../images/TB11GsPHpXXXXciXFXXAAT2HVXX-63-63.png" />
            <figcaption>手机网站</figcaption>
        </figure>
        <figure><img src="../images/TB1t.ARHpXXXXb0XpXXAAT2HVXX-63-63.png" />
            <figcaption>移动APP</figcaption>
        </figure>
        <figure><img src="../images/TB17s7UHpXXXXa1XXXXAAT2HVXX-63-63.png" />
            <figcaption>素材设计</figcaption>
        </figure>
        <figure><img src="../images/TB17s7UHpXXXXa1XXXXAAT2HVXX-63-63.png" />
            <figcaption>信息门户</figcaption>
        </figure>
        <figure><img src="../images/TB1t.ARHpXXXXb0XpXXAAT2HVXX-63-63.png" />
            <figcaption>社区论坛</figcaption>
        </figure>
    </div>
</div>
<!--企业官网定制-->
<div class="qiye">
    <div>
        <span><strong>IF企业官网定制</strong></span>
        <span>提供量身定制的建站服务，设计师专人对接，服务流程全程监管。</span>
        <a href="">发布定制需求，更多官网方案></a>
    </div>
    <div class="qiye-bottom">
        <div>
            <img src="../images/TB1yvfuHVXXXXaXXXXXwu0bFXXX.png" />
            <div>
                <p>企业官网定制</p>
            </div>
        </div>
        <div>
            <div>
                <p><strong>云·定制企业官网</strong></p>
                <p>【双十一销冠】 【建站市场最佳选择奖】</p>
            </div>
            <img src="../images/TB1HG.uOXXXXXXmaFXXXXXXXXXX-380-266.jpg" />
        </div>
        <div class="disan">
            <div class="shangmian">
                <div class="qiyeshang">
                    <p><strong>企业建站</strong></p>
                    <p>pc+手机+微信三站合一</p>
                    <img src="../images/TB1GwwiOXXXXXaVapXXXXXXXXXX-240-108.jpg" />
                </div>
                <div class="jianzhan">
                    <p><strong>中国好建站</strong></p>
                    <p>6000家企业用户强力推荐</p>
                    <img src="../images/TB1yKZpNFXXXXb.XpXXXXXXXXXX-215-106.jpg" />
                </div>
            </div>
            <div class="ximian">
                <div class="zizu">
                    <p><strong>企业官网自足版</strong></p>
                    <p>傻瓜式后台，可视化操作</p>
                    <img src="../images/TB1sGfyNVXXXXXbXVXXXXXXXXXX-213-105.png" />
                </div>
                <div class="gexing">
                    <p><strong>个性定制企业官网</strong></p>
                    <p>最给力的一波促销，重磅来袭！</p>
                    <img src="../images/TB17XRhOpXXXXXFXpXXXXXXXXXX-234-105.jpg" />
                </div>
            </div>
        </div>
    </div>
</div>
<!--图片-->
<div class="tupian">
    <img src="../images/TB1eriAHVXXXXc6XVXXO8z25XXX-1200-90.png" />
</div>
<!--服务商推荐-->
<div class="fuwushang">
    <div><p><strong>服务商推荐</strong></p></div>
    <div>
        <div class="biejing">
            <img src="../images/TB1aB3MHVXXXXbMXpXXwu0bFXXX.png" />
            <p>北京云梦网络科技有限公司，基于云计算的企业网站建设专家，表，</p>
        </div>
        <div class="hangz">
            <img src="../images/TB14LSPIpXXXXXYXFXXwu0bFXXX.png" />
            <p>杭州绯色网络科技有限公司这四年来一直专注“企业建站”</p>
        </div>
        <div class="guang">
            <img src="../images/TB1EUoMHVXXXXb0XpXXSutbFXXX.jpg" />
            <p>广州友会网络科技有限公司建筑靠谱的网站！基于云计算，专业级</p>
        </div>
        <div class="shan">
            <img src="../images/TB14C51IFXXXXc8XpXX0p7L0VXX-396-240.png" />
            <p>陕西畅通网络科技有限公式十年建站，专业技术团队，设计</p>
        </div>
        <div class="chang">
            <img src="../images/TB1Ei1wNVXXXXasXFXXXXXXXXXX-110-50.jpg" />
            <p>长沙海商网络技术有限公司15年始终乘坐让电商，更简单的理</p>
        </div>
    </div>
</div>
<!--云市场服务保障体系-->
<div class="yunbao">
    <div>
        <p>云市场服务保障体系</p>
    </div>
    <div class="jiaoyi">
        <div>
            <img src="../images/TB1rc6lKpXXXXXTXFXXXXXXXXXX-34-34.png" />
            <p><strong>担保交易</strong></p>
            <span>全程担保交易，先验货后大款，保证用户资金的100%安全</span>
        </div>
        <div>
            <img src="../images/TB112m2KFXXXXceXVXXXXXXXXXX-34-34.png" />
            <p><strong>不满意全额退款</strong></p>
          <span> 在软件购物过程中不满于全额退款，确保商品的满意度达100%</span>
        </div>
        <div>
            <img src="../images/TB1jlGYKFXXXXauaXXXXXXXXXXX-34-34.png" />
            <p><strong>服务全程监控</strong></p>
            <span>监督全程透明，运维产品全程录屏，保证用户享受100%的服务保障</span>
        </div>
        <div>
            <img src="../images/TB1URKWKFXXXXawaXXXXXXXXXXX-34-34.png" />

            <p><strong>优质服务商家</strong></p>
            <span>与平台上的商家共同实现行业自律，保障100%优质商家与商品入驻</span>
        </div>
    </div>
</div>
<!--关于我们-->
<div class="guanyuwo">
    <div>
        <ul>
            <li>
                关于我们
                <a href="">
                    <p>云市场简介</p>
                </a><a href="">
                <p>云市场动态</p>
            </a><a href="">
                <p>线下活动</p>
            </a>
            </li>
            <li>
                服务保障
                <a href="">
                    <p>不满以全额退款</p>
                </a><a href="">
                <p>交易过程担保</p>
            </a><a href="">
                <p>服务全程监管</p>
            </a>
            </li>
            <li>
                合作伙伴
                <a href="">
                    <p>服务商入驻</p>
                </a><a href="">
                <p>服务商入驻流程</p>
            </a><a href="">
                <p>商家管家规范</p>
            </a>
            </li>
            <li>
                帮助中心
                <a href="">
                    <p>维修服务常见问题</p>
                </a><a href="">
                <p>建站市场常见问题</p>
            </a><a href="">
                <p>镜像常见问题</p>
            </a>
            </li>
        </ul>
    </div>
    <div class="kefu">
        <div>
            <img src="../images/TB1Xk6pKpXXXXakXpXXXXXXXXXX-40-38.png" />
            <p>云市场官方售前客服</p>
            <a href="">点击与客服对话</a>
        </div>
        <div>
            <img src="../images/TB1cLnnKFXXXXXRXXXXXXXXXXXX-36-37.png" />
            <p>95187转1</p>
            <p>官方售前5*8客服电话</p>
        </div>
    </div>
</div>
<div class="zhuce">
    <a href="">免费注册，想新手礼包</a>
</div>
<!--页脚-->
<div class="green">
<a href="">
<aside>点我提问</aside>
</a>
</div>
<footer>
    <div>
        <a href="">关于我们</a>
        <a href="">法律声明</a>
        <a href="">廉政举报</a>
        <a href="">友情链接</a>
    </div>
    <div>
        <p>阿里巴巴 淘宝网 天猫 聚划算 全球数买通 阿里巴巴国际交易市场 1688 阿里巴巴国际交易市场 1688 阿里妈妈 飞猪 阿里云计算</p>
        <p>@2009-2016Aliyun.com 版权所有ICP：折B2-20080101</p>
    </div>
    <div>搜索</div>
</footer>
</body>
</html>
以下时css样式

/*头部*/
body{
    background-color: #f8f8f8;
}
header{
    width: 100%;
    height: 32px;
    background-color: #373d41;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
nav{
    line-height: 32px;
}
header>div{
    width: 1200px;
    height: 32px;
    margin: 0 auto;
    line-height: 32px;
}
nav>img{
    width: 66px;
    float: left;
    padding-top: 10px;
}
nav>a{
    float: right;
    color: white;
    margin-left:30px ;
    padding: 0 42px;
}
nav>a:hover{
    background-color: #00c0dd;
}
.yunshichang{
    width: 100%;
    height: 128px;
    background-color: #fdfdfd;
    margin-top: 20px;
}
/*云市场上边*/
.yunshichang-top{
    width: 1200px;
    height: 86px;
    margin: 0 auto;
    overflow: hidden;
}
.yunshichang-top>img{
    width: 100px;
    float: left;
    overflow: hidden;
}
.fuwu{
    border: 1px solid gray;
    width: 634px;
    height: 28px;
    margin-left: 160px;
    float: left;
    overflow: hidden;
}
.fuwu>p{
    color: gray;
    float: left;
    line-height: 28px;
}
.fuwu>a{
    line-height: 28px;
    float: right;
    color: white;
    background-color: #00c0dd;
}

.yunshichang-top span{
    font-weight: 800;
    float: right;
    color: #00c0dd;
    margin-right: 6px;
    border: 1px solid#00c0dd;
}
.wangzhan>a{
    color: gray;
    margin-right:20px ;
    font-size: 14px;

}
.wangzhan{
    float: left;
    margin-left:168px ;
    margin-bottom: 16px;
    margin-top: 10px;
}
/*云市场下边*/
.yunshichang-bottom{
    width: 1200px;
    height: 44px;
    margin: 0 auto;
}

.yunshichang-bottom>div:first-child>p{
    background-color: #00c0dd;
    color: white;
    width: 242px;
    height: 43px;
    line-height: 43px;
    font-size: 18px;
    padding-left: 10px;
    float: left;
}
.yunshichang-bottom>div:nth-child(2)>a{
    color: black;
    font-size: 18px;
    font-weight: 800;
    margin-left: 38px;
    line-height:43px ;

}
.yunshichang-bottom>div:nth-child(2)>a:hover{
    color: #00c0dd;
}
/*市场分类*/
.shichangfenlei{
    margin: 0 auto;
    width: 1200px;
    height: 300px;
    background-image: url("../images/TB15PQ5OXXXXXb7XpXXXXXXXXXX-1200-300.jpg");
    background-position: center;
}
.shichangfenlei>div>ul{
    width: 251px;
    height: 300px;
    background-color: #00c0dd;
    border-top: 1px solid white;

}
.shichangfenlei>div>ul>li>span{
    font-size: 16px;
    margin-right: 16px;
    color: white;
    font-weight: 700;

}
.shichangfenlei>div>ul>li{
    border-top: 1px solid white;
    display: inline-block;
    padding-top: 10px;
    padding-left:10px ;
}
.shichangfenlei>div>ul>li>span:hover{
    color: red;
}
/*找商品*/
.zhaoshangping{
    width: 1200px;
    height: 164px;
    margin: 0 auto;
    background-color: #ffffff;
}
.zhaoshangping>div:first-child{
   background-color: #f7f7f7;
    height: 44px;
    line-height: 44px;
}
.zhaoshangping>div:first-child>p{
    font-size: 18px;
    width: 124px;
    background: linear-gradient(to right,red,blue);
}
.zhaoshangping>div:last-child>figure{
    float: left;
    padding: 28px 42px 22px 42px;
}
.zhaoshangping>div:last-child>figure:not(:last-child){
    border-right: 1px solid gainsboro;
}
.zhaoshangping>div:last-child>figure:hover{
    background-color: #00c0dd;
}
/*企业官网定制*/
.qiye{
    height: 450px;
    width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
    overflow: hidden;
    background-color: #ffffff;
}
.qiye>div:first-child{
    line-height: 60px;
    overflow: hidden;
}
.qiye>div:first-child>span{
    float: left;
    margin-right: 10px;
}
.qiye>div:first-child>span:first-child {
    font-size: 22px;
    background: linear-gradient(to right, red, blue);
}
.qiye>div:first-child>span:nth-child(2){
    color: gray;
    font-size: 14px;
}
.qiye>div:first-child>a{
    float: right;
    color: #00c0dd;
    font-size: 16px;
}
/*企业下边*/
.qiye-bottom{
    width: 1400px;
    height: 350px;
    margin: 0 auto;
    margin-top: 24px;
    overflow: hidden;
}
.qiye-bottom>div:first-child>img{
    width:240px;
    background-color: #fdeacd;
}
.qiye-bottom>div:first-child>div{
    width: 240px;
    height: 123px;
    background-color: #fbdeb4;
}
.qiye-bottom>div:first-child>div>p{
    line-height: 123px;
    text-align: center;
    color:orangered;
}
.qiye-bottom>div:first-child{
    float: left;
    margin-right:50px ;
}
.qiye-bottom>div:nth-child(2){
    height: 348px;
    width: 383px;
    float: left;
    margin-right: 52px;
    overflow: hidden;
}
.qiye-bottom>div:nth-child(2)>div>p{
    text-align: center;
    margin-bottom: 4px;
}
.qiye-bottom>div:nth-child(2)>div>p:first-child{
    font-size: 28px;
}
.qiye-bottom>div:nth-child(2)>div>p:last-child{
    font-size: 18px;
    color: gray;
}
.disan{
    width: 474px;
    /*height: 347px;*/
    overflow: hidden;
    float: left;
}
.qiyeshang{
    float: left;
    margin-right: 10px;
}
.zizu{
    overflow: hidden;
    float: left;
    margin-right: 20px;
}
.gexing{
    overflow: hidden;
}
.ximian{
    float: left;
}
.shangmian{
    margin-bottom: 18px;
}
.disan p{
    text-align: center;
    margin-top: 5px;
}
.qiye p{
    text-shadow: 2px 3px 3px orange;
}
.qiye p:hover{
    color: red;
}
.tupian{
    width: 1200px;
    overflow: hidden;
    margin: 0 auto;
}
/*服务商推荐*/
.fuwushang{
    width: 1200px;
    height: 400px;
    margin: 0 auto;
    margin-top: 20px;
    background-color: #ffffff;
}
.fuwushang>div:first-child>p{
    font-size: 16px;
    text-shadow: 2px 3px 3px green;
    line-height: 54px;
}
.fuwushang>div:first-child>p:hover{
    color: yellow;
}
.fuwushang>div:nth-child(2){
    height: 200px;
    width: 1200px;
    margin: 0 auto;
    border-top: 1px solid gainsboro;
    margin-bottom:28px ;
}
.fuwushang img{
    width: 238px;
    height: 173px;
    object-fit: contain;
}
.fuwushang p{
    width: 238px;
    height: 93px;
    text-align: center;
    text-shadow: 3px 4px 4px red;
}
.fuwushang p:hover{
    color: blue;
}
.biejing{
    float: left;
    border-right: 1px solid gainsboro;
}
.hangz{
    float: left;
    border-right: 1px solid gainsboro;
}
.guang{
    float: left;
    border-right: 1px solid gainsboro;
}
.shan{
    float: left;
    border-right: 1px solid gainsboro;
}
.chang{
    float: left;
}
/*云市场服务保障体系*/
.yunbao{
    width: 1200px;
    height: 156px;
    margin: 0 auto;
    background-color: #ffffff;
}
.yunbao>div:first-child>p{
    text-align: center;
    color: gray;
    font-size: 18px;
    line-height: 50px;
}
.jiaoyi>div:first-child{
    width:260px ;
    height: 105px;
    float: left;
    margin-right: 46px;
}
.jiaoyi>div:nth-child(2){
    width:260px ;
    height: 105px;
    float: left;
    margin-right: 46px;
}
.jiaoyi>div:nth-child(3){
    width:260px ;
    height: 105px;
    float: left;
    margin-right: 46px;
}
.jiaoyi>div:nth-child(4){
    width:260px ;
    height: 105px;
    float: left;
}
.jiaoyi p,span:hover{
    color: goldenrod;
}

/*关于我们*/
.guanyuwo{
    width: 1200px;
    height: 216px;
    background-color: #ffffff;
    margin: 0 auto;
    margin-top: 30px;
    overflow: hidden;
}
.guanyuwo ul>li{
    width:136px ;
    height: 174px;
    float: left;
    text-align: center;
    padding-top: 44px;
}
.guanyuwo ul>li>a>p{
    padding-top: 20px;
    color: black;
}
.guanyuwo ul>li>a>p:hover{
    color: purple;
}
.kefu{
    width: 267px;
    height: 216px;
    float: right;
    border-left: 1px solid gainsboro;
    padding-left: 36px;
}
.kefu>a{
    color: #00c0dd;
}
.zhuce{
    width: 1200px;
    text-align: center;
    margin-top: 35px;
    margin-bottom: 32px;
}
.zhuce>a{
    background-color: #00c0dd;
    width: 200px;
    height: 36px;
    color: white;
    font-size: 18px;
}
/*页脚*/
footer{
    width: 1200px;
    height: 208px;
    margin: 0 auto;
    background-color: #f5f6f6;
}
footer a{
    color: gray;
    font-size: 20px;
    margin-right: 10px;
}
footer a:hover{
    color: red;
}
footer p{
    margin-top: 10px;
    color: gray;
}
footer>div:first-child{
    float: left;
}
footer>div:nth-child(2){
    float: left;
}
footer>div:last-child{
    width: 222px;
    height: 30px;
    border: 1px solid gainsboro;
    float: right;
}
footer>div:last-child:hover{
    background: linear-gradient(to right,blue,gold,red,green);
}
.green aside{
    height: 50px;
    width: 50px;
    background-color: #00c0dd;
    position: fixed;
    right: 30px;
    bottom: 100px;
    text-align: center;
    color: white;
    border-radius: 50%;
}

用HTML编写阿里云

标签：双十一   微网站   ide   专业技术   bottom   精选   2-2   add   手机   

原文地址：https://www.cnblogs.com/yangkaiming/p/8974029.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！