用HTML编写阿里云

2022-05-31 01:05:17

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

            <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" alt=""/>
            <p>云市场官方售前客服</p>
            <a href="">点击与客服对话</a>
        </div>
        <div>
            <img src="../images/TB1cLnnKFXXXXXRXXXXXXXXXXXX-36-37.png" alt=""/>
            <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%;
}

码农公寓

相关文章