用HTML编写阿里云
2018-06-24 02:22:57来源：未知 阅读 ()
<!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%;
}
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
相关文章
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签