用HTML编写阿里云
<!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%;
}
用HTML编写阿里云的更多相关文章
- 【结果很简单,过程很艰辛】记阿里云Ons消息队列服务.NET接口填坑过程
Maybe 这个问题很简单,因为解决方法是非常简单,但填坑过程会把人逼疯,在阿里云ONS工作人员.同事和朋友的协助下,经过一天的调试和瞎捣鼓,终于解决了这个坑,把问题记下来,也许更多人在碰到类似问题的 ...
- git上传到阿里云code
一.在阿里云code(kelude)注册用户,新建项目.二.安装Git后使用GitBash生产ssh key:(https://zhidao.baidu.com/question/1303468264 ...
- 新手上路,配置阿里云CentOS服务器LAMP
最近出了个9.9包月的阿里云一直想弄就买了个半年的,脑子一热选了个CentOS系统的然后就是无尽的代码...... 话不多说直接上步骤: 在实例中选择"连接管理终端",输入一些应 ...
- springmvc学习笔记--支持文件上传和阿里云OSS API简介
前言: Web开发中图片上传的功能很常见, 本篇博客来讲述下springmvc如何实现图片上传的功能. 主要讲述依赖包引入, 配置项, 本地存储和云存储方案(阿里云的OSS服务). 铺垫: 文件上传是 ...
- [分享]运维分享一一阿里云linux系统mysql密码修改脚本
[分享]运维分享一一阿里云linux系统mysql密码修改脚本 大象吃豆子 级别: 小白 发帖 12 云币 27 加关注 写私信 只看楼主 更多操作楼主 发表于: 2014-09-3 ...
- 【阿里云产品公测】以开发者角度看ACE服务『ACE应用构建指南』
作者:阿里云用户mr_wid ,z)NKt# @I6A9do 如果感觉该评测对您有所帮助, 欢迎投票给本文: UO<claV RsfTUb)< 投票标题: 28.[阿里云 ...
- 【阿里云产品公测】与云引擎ACE第一次亲密接触
阿里云用户:林哥神话 公测当然是第一次了.这个第一次亲密接触,但话又说回来对ACE我一直都不是那感兴趣的,但是看到阿里介绍还是那般神奇,再加上200无代金券来更加给力.最后就申请了这次公测. 平时一直 ...
- 【阿里云产品公测】利用PTS服务优化网站数据库读写性能
[阿里云产品公测]利用PTS服务优化网站数据库读写性能 作者:阿里云用户千鸟 写这个帖子主要也是因为在用PTS测试网站的时候,手动访问网站进入报错页面,主要原因是数据库连接对象存在问题,导致并发多的时 ...
- 【阿里云产品公测】简单日志服务SLS使用评测 + 教程
[阿里云产品公测]简单日志服务SLS使用评测 + 教程 评测介绍 被测产品: 简单日志服务SLS 评测环境: 阿里云基础ECS x2(1核, 512M, 1M) 操作系统: CentOS 6.5 x6 ...
随机推荐
- 使用servicestack连接redis
引言:作为少有的.net架构下的大型网站,stackoverflow曾发表了一篇文章,介绍了其技术体系,原文链接http://highscalability.com/blog/2011/3/3/sta ...
- CSS的设计模式
什么是设计模式? 曾有人调侃,设计模式是工程师用于跟别人显摆的,显得高大上:也曾有人这么说,不是设计模式没用,是你还没有到能懂它,会用它的时候. 先来看一下比较官方的解释:“设计模式(Design p ...
- java获取当月天数,指定年月的天数,指定日期获取对应星期 .
package huolongluo.family.util; import java.text.SimpleDateFormat; import java.util.Calendar; import ...
- 132.1.001 Union-Find | 并查集
@(132 - ACM | 算法) Algorithm | Coursera - by Robert Sedgewick > Tip: Focus on WHAT is really impor ...
- 网络 私有IP和子网掩码设置
私有IP不需要花钱 节约使用公网IP有两个方法,一个方法是动态IP(关机回收IP),一个方法是私有IP,尤其是私有IP作用巨大. 私有IP不具有唯一性,不能直接访问公网.比如,我以私有IP192.16 ...
- JVM知识(一):基础原理
学过java知识和技术人,都应该听说过jvm,jvm一直是java知识里面晋级阶段的重要部分,如果想要在java技术领域更深入一步,jvm是必须需要明白的知识点. 本篇来讲解jvm的基础原理,先来熟悉 ...
- eclipse安装python
在Eclipse中安装pydev插件 启动Eclipse, 点击Help->Install New Software... 在弹出的对话框中,点Add 按钮. Name中填:Pydev, ...
- leetCode题解 Reverse Words in a String III
1.题目描述 Given a string, you need to reverse the order of characters in each word within a sentence wh ...
- 梯度下降法实现最简单线性回归问题python实现
梯度下降法是非常常见的优化方法,在神经网络的深度学习中更是必会方法,但是直接从深度学习去实现,会比较复杂.本文试图使用梯度下降来优化最简单的LSR线性回归问题,作为进一步学习的基础. import n ...
- Django之modelform修改数据库
工程包目录:https://github.com/kongzhagen/python/tree/master/Django 目的: 客户信息表Customer在前端以表单形式展示 提交Customer ...