html阿里云网页练习实现代码

html

<body>

<p>

</p>

<p>

</p>

</div>

<div>

<nav>

</nav>

</div>

<nav>

<p>

<a href="#">PHP运行环境</a>

<a href="#">JAVA运行环境</a>

<a href="#">linux环境配置</a>

</p>

</nav>

<p>

<a href="#">发布定制需求<i></i></a>

<a href="#">管理我的服务</a>

</p>

</div>

<p>

<a href="#">云市场分类</a>

</p>

<p>

<a href="#">代维&amp服务</a>

<a href="#">数据及API</a>

</p>

<p>

<a href="#">服务商入驻</a>

</p>

</div>

</header>

<div>

<div>

</div>

<div>

<a href="#">移动APP</a>

</div>

<div>

<a href="#">网站素材设计</a>

<a href="#">LOGO设计</a>

</div>

<div>

<a href="#">店铺代运营</a>

</div>

<div>

<a href="#">个性化网站定制</a>

</div>

</div>

<p>

找商品·轻松挑

</p>

<span>

</span>

</dvi>

<span>

</span>

</dvi>

<span>

</span>

</dvi>

<span>

</span>

</dvi>

<span>

<a href="#">移动APP</a>

</span>

</dvi>

<span>

</span>

</dvi>

<span>

</span>

</dvi>

<span>

</span>

</dvi>

</div>

<span>1F企业官网定制

<span>提供量身定制的建站服务，设计师专人对接，服务流程全程监管</span>

</span>

<span>

<a href="#">发布叮嘱需求</a>

<a href="#">更多官网方案&gt</a>

</span>

</div>

<div>

</div>

<div>

<a href="#">企业官网定制</a>

</div>

<a href="#">云·定制企业官网</a>

<a href="#">【双十一销冠】【建站市场最佳选择奖】</a>

<div>

</div>

<a href="#">PC+手机+微信三站合一</a>

<a href="#">企业官网自助版</a>

<a href="#">傻瓜式后台，可视化操作</a>

</div>

<a href="#">PC+手机+微信三站合一</a>

<a href="#">企业官网自助版</a>

<a href="#">傻瓜式后台，可视化操作</a>

</div>

</div>

<p>

服务商推荐

</p>

<div>

<a href="#">北京云梦网络科技有限公司</a>

<a href="#">基于云计算的企业网站建设专家</a>

</div>

<div>

<a href="#">杭州飞色网络科技有限公司</a>

<a href="#">基于云计算的企业网站建设专家</a>

</div>

<div>

<a href="#">广州友慧网络科技有限公司</a>

<a href="#">基于云计算的企业网站建设专家</a>

</div>

<div>

<a href="#">陕西畅通网络科技有限公司</a>

<a href="#">基于云计算的企业网站建设专家</a>

</div>

<div>

<a href="#">长沙海商网络科技有限公司</a>

<a href="#">基于云计算的企业网站建设专家</a>

</div>

</article>

</body>

</html>

css

/* 固定浮动栏样式 */

.guding {

width: 38px;

height: 81px;

position: fixed;

right: 0px;

top: 304px;

}

.guding>p:first-child {

border: 1px solid rgb(127, 211, 231);

margin: 0px;

padding: 0px 3px;

}

.guding>p:first-child>a {

font-size: 14px;

color: rgb(0, 167, 208);

text-decoration: none;

}

.guding>p:last-child>a {

color: rgb(255, 255, 255);

text-decoration: none;

}

.guding>p:last-child {

margin: 5px 0px 0px 0px;

padding: 9px 15px;

background-color: rgb(255, 138, 0);

}

/* 导航一样式 */

header>div:first-child {

background-color: rgb(55, 61, 65);

}

header>div:first-child>div {

width: 1200px;

margin: auto;

display: flex;

justify-content: space-between;

background-color: rgb(55, 61, 65);

}

header>div:first-child>div>a>img {

width: 64px;

height: 15px;

margin-top: 9px;

}

header>div:first-child>div>nav>a {

font-size: 12px;

color: rgb(248, 255, 255);

text-decoration: none;

}

header>div:first-child>div>nav>a:last-child {

display: inline-block;

padding: 9px 40px;

}

header>div:first-child>div>nav>a {

display: inline-block;

padding: 9px 0px;

}

header>div:first-child>div>nav>a:nth-child(4):hover {

background-color: rgb(0, 193, 222);

}

header>div:first-child>div>nav>a:not(:nth-child(4)):hover {

color: rgb(0, 193, 222);

}

header>div:first-child>div>nav>a:not(:last-child) {

margin-right: 26px;

display: inline-block;

}

/* 导航二样式 */

.daohang {

width: 1200px;

height: 100px;

margin: auto;

display: flex;

justify-content: space-between;

}

.daohang>a>img {

width: 100px;

height: 41px;

}

.daohang>a {

display: inline-block;

margin-top: 21px;

}

.daohang>nav>input {

width: 578px;

padding: 0px 5px;

}

.daohang>nav>a {

font-size: 12px;

text-decoration: none;

color: rgb(103, 103, 103);

padding: 5px;

}

.daohang>nav>a:hover {

background-color: rgb(0, 193, 222);

}

.daohang>nav {

margin-left: 100px;

margin-top: 20px;

}

.daohang>nav>p {

margin: 7px 0px 18px 0px;

}

.daohang>nav>p>a {

font-size: 12px;

color: rgb(103, 103, 103);

text-decoration: none;

margin-left: 9px;

}

.daohang>p>a {

font-size: 12px;

text-decoration: none;

color: rgb(0, 193, 222);

border: 1px solid rgb(0, 193, 222);

display: inline-block;

padding: 4px 3px;

}

.daohang>p>a:hover {

text-shadow: -1px 1px 2px rgb(199, 202, 224);

}

.daohang>p>a>i {

display: inline-block;

width: 12px;

height: 7px;

background-position: -1171px -64px;

}

/* 导航三样式 */

.daohang2 {

width: 1200px;

margin: auto;

/* border: 1px solid red; */

display: flex;

justify-content: space-between;

}

.daohang2>p:first-child>a {

font-size: 18px;

text-decoration: none;

display: inline-block;

color: rgb(255, 255, 255);

}

.daohang2>p:first-child>a:first-child:hover {

background-color: rgb(0, 175, 202);

}

.daohang2>p:first-child>a:last-child>i {

display: inline-block;

width: 11px;

height: 11px;

background-position: -333px -131px;

}

.daohang2>p:first-child>a:last-child {

display: inline-block;

margin-left: 115px;

}

.daohang2>p:first-child {

width: 240px;

height: 23px;

margin: 0px;

padding: 11px 9px 11px 13px;

background-color: rgb(0, 193, 222);

}

.daohang2>p:nth-child(2)>a {

font-size: 16px;

color: rgb(0, 0, 0);

text-decoration: none;

}

.daohang2>p:nth-child(2)>a:hover {

color: rgb(15, 135, 218);

text-shadow: -1px 1px 2px rgb(199, 202, 224);

}

.daohang2>p:nth-child(2)>a:not(:first-child) {

margin-left: 36px;

display: inline-block;

}

.daohang2>p:nth-child(2)>a:last-child {

margin-right: 60px;

}

.daohang2>p:nth-child(3)>a:nth-child(2)>i {

display: inline-block;

width: 21px;

height: 21px;

background-position: -1205px -129px;

position: relative;

bottom: -5px;

}

.daohang2>p:nth-child(3),

.daohang2>p:nth-child(2) {

margin-bottom: 0px;

position: relative;

top: -8px;

}

.daohang2>p:nth-child(2) {

margin-top: 20px;

}

.daohang2>p:nth-child(3)>a {

font-size: 16px;

text-decoration: none;

color: rgb(15, 135, 218);

}

.daohang2>p:nth-child(3)>a:hover {

text-shadow: -1px 1px 2px rgb(199, 202, 224);

}

.daohang2>p:nth-child(3)>a:first-child {

margin-right: 23px;

}

/* 主题样式 */

article {

background-color: rgb(248, 248, 248);

}

article>div:first-child {

width: 1200px;

/* height: 500px; */

margin: auto;

/* border: 1px solid red; */

}

/* 第一段样式 */

.zhuti1-1 {

width: 262px;

float: left;

}

.zhuti1-2 {

float: right;

}

.zhuti1 {

overflow: hidden;

}

.zhuti1>div:first-child {

background-color: rgb(0, 193, 222);

}

.zhuti1 a {

font-size: 12px;

color: rgb(255, 255, 255);

text-decoration: none;

padding: 5px 5px 4px 4px;

}

.zhuti1-1>div>a:first-child,

.zhuti1-1>div:nth-child(2)>a:nth-child(4),

.zhuti1-1>div:nth-child(2)>a:nth-child(7),

.zhuti1-1>div:nth-child(3)>a:nth-child(3),

.zhuti1-1>div:nth-child(5)>a:nth-child(3) {

margin-left: 10px;

}

.zhuti1-1>div:first-child {

padding: 7px 0px;

border-top: 1px solid rgb(120, 222, 238);

border-bottom: 1px solid rgb(120, 222, 238);

}

.zhuti1-1>div:nth-child(2),

.zhuti1-1>div:nth-child(3),

.zhuti1-1>div:nth-child(4) {

padding: 7px 0px;

border-bottom: 1px solid rgb(120, 222, 238);

}

.zhuti1-1>div:first-child>a {

margin-right: 16px;

}

.zhuti1-1>div:nth-child(2)>a:first-child,

.zhuti1-1>div:nth-child(2)>a:nth-child(2) {

margin-right: 16px;

}

.zhuti1-1>div:nth-child(2)>a:nth-child(3) {

margin-right: 20px;

}

.zhuti1-1>div:nth-child(2)>a:nth-child(6) {

margin-right: 55px;

}

.zhuti1-1>div:nth-child(3)>a:nth-child(2) {

margin-right: 70px;

}

.zhuti1-1>div:nth-child(5)>a:nth-child(2) {

margin-right: 80px;

}

.zhuti1-1>div:nth-child(5) {

padding-top: 8px;

padding-bottom: 44px;

}

.zhuti1 a:hover {

background-color: rgb(0, 175, 202);

}

.zhuti1-2>img {

width: 938px;

height: 300px;

}

/* 第二段样式 */

article>div>p:first-child {

font-size: 18px;

color: rgb(0, 0, 0);

margin-top: 12px;

margin-bottom: 7px;

}

.zhuti2 {

display: flex;

justify-content: space-around

}

.zhuti2-1>span,

.zhuti2-2>span,

.zhuti2-3>span,

.zhuti2-4>span,

.zhuti2-5>span,

.zhuti2-6>span,

.zhuti2-7>span,

.zhuti2-8>span {

display: flex;

flex-direction: column;

}

.zhuti2-1>span>a>i {

display: inline-block;

width: 63px;

height: 45px;

background-position: 0px -10px;

}

.zhuti2-2>span>a>i {

display: inline-block;

width: 60px;

height: 44px;

background-position: -1px -10px;

}

.zhuti2-3>span>a>i {

display: inline-block;

width: 63px;

height: 44px;

background-position: 0px -11px;

}

.zhuti2-4>span>a>i {

display: inline-block;

width: 63px;

height: 44px;

background-position: 0px -9px;

}

.zhuti2-5>span>a>i {

display: inline-block;

width: 63px;

height: 44px;

background-position: 0px -8px;

}

.zhuti2-6>span>a>i {

display: inline-block;

width: 63px;

height: 44px;

background-position: 0px -11px;

}

.zhuti2-7>span>a>i {

display: inline-block;

width: 63px;

height: 44px;

background-position: 0px -10px;

}

.zhuti2-8>span>a>i {

display: inline-block;

width: 63px;

height: 46px;

background-position: 0px -10px;

}

.zhuti2-1 a:last-child,

.zhuti2-2 a:last-child,

.zhuti2-3 a:last-child,

.zhuti2-4 a:last-child,

.zhuti2-5 a:last-child,

.zhuti2-6 a:last-child,

.zhuti2-7 a:last-child,

.zhuti2-8 a:last-child {

font-size: 14px;

color: rgb(102, 102, 102);

text-decoration: none;

margin-top: 13px;

margin-left: 3px;

}

.zhuti2-1 a:hover,

.zhuti2-2 a:hover,

.zhuti2-3 a:hover,

.zhuti2-4 a:hover,

.zhuti2-5 a:hover,

.zhuti2-6 a:hover,

.zhuti2-7 a:hover,

.zhuti2-8 a:hover {

color: rgb(68, 175, 255);

}

.zhuti2-1 a>i:hover {

background-position: 0px -10px;

}

.zhuti2-2 a>i:hover {

background-position: -1px -10px;

}

.zhuti2-3 a>i:hover {

background-position: 0px -11px;

}

.zhuti2-4 a>i:hover {

background-position: 0px -9px;

}

.zhuti2-5 a>i:hover {

background-position: 0px -8px;

}

.zhuti2-6 a>i:hover {

background-position: 0px -11px;

}

.zhuti2-7 a>i:hover {

background-position: 0px -10px;

}

.zhuti2-8 a>i:hover {

background-position: 0px -10px;

}

.zhuti2-1,

.zhuti2-2,

.zhuti2-3,

.zhuti2-4,

.zhuti2-5,

.zhuti2-6,

.zhuti2-7 {

width: 150px;

height: 120px;

border-right: 1px solid rgb(238, 238, 238);

background-color: rgb(255, 255, 255);

}

.zhuti2-8 {

width: 150px;

height: 120px;

background-color: rgb(255, 255, 255);

}

.zhuti2 span{

margin-top:27px;

margin-left:43px;

}

/* 第三段样式 */

.zhuti3{

margin-top:20px;

display: flex;

justify-content: space-between;

background-color: rgb(255, 255, 255);

}

.zhuti3>span:first-child{

margin:20px 0px 19px 14px;

font-size:18px;

}

.zhuti3>span:first-child>span{

margin-left:14px;

font-size:12px;

color:rgb(102,102,102);

}

.zhuti3>span:last-child>a{

text-decoration: none;

margin-right:15px;

font-size:12px;

color:rgb(0,162,202);

}

.zhuti3>span:last-child{

margin-top:25px;

}

.zhuti3>span:last-child>a:hover{

text-shadow: -1px 1px 2px rgb(199, 202, 224);

}.zhuti4{

border-top:2px solid rgb(245,199,133);

display:flex;

}

.zhuti4>div:first-child,.zhuti4>div:nth-child(2){

display: flex;

flex-direction: column;

}

.zhuti4>div:nth-child(2)>div>a:nth-of-type(1)>i{

display: inline-block;

width: 12px;

height: 19px;

background-position: -377px -867px;

}

.zhuti4>div:nth-child(2)>div>a:nth-of-type(2)>i{

display: inline-block;

width: 12px;

height: 19px;

background-position: -797px -867px;

}

.zhuti4>div:first-child>div:first-child{

width: 240px;

height: 223px;

background-color: rgb(255,235,206);

}

.zhuti4>div:first-child>div:last-child{

width: 240px;

height: 121px;

background-color: rgb(253,223,181);

}

.zhuti4>div:first-child>div:first-child>img{

margin-top:60px;

margin-left:59px;

}

.zhuti4>div:first-child>div:last-child>a{

display: inline-block;

text-decoration: none;

font-size:12px;

color:rgb(218,112,27);

margin-top:38px;

margin-left:65px;

}

.zhuti4>div:first-child>div:last-child>a:hover{

text-shadow: -1px 1px 2px rgb(245, 114, 7);

}

.zhuti4-1>a:nth-of-type(1){

font-size:24px;

color:rgb(0, 0, 0);

text-decoration: none;

display: inline-block;

margin-top:17px;

margin-left:153px;

}

.zhuti4-1>a:nth-of-type(2){

font-size:14px;

color:rgb(102, 102, 102);

text-decoration: none;

display: inline-block;

margin-top:11px;

margin-left:110px;

}

.zhuti4-1>div>img{

margin-left:40px;

}

.zhuti4-1>div>a:nth-of-type(1)>i{

position: relative;

top:-160px;

right: -30px;

}

.zhuti4-1>div>a:nth-of-type(2)>i{

position: relative;

top:-160px;

left: 9px;

}

.zhuti4-2{

display: flex;

flex-direction: column;

}

.zhuti4-2>a:nth-of-type(1),.zhuti4-2>a:nth-of-type(3){

font-size:18px;

color:rgb(0, 0, 0);

text-decoration: none;

display: inline-block;

margin-top:20px;

margin-bottom:7px;

}

.zhuti4-2>a:nth-of-type(2),.zhuti4-2>a:nth-of-type(4){

font-size:12px;

color:rgb(102, 102, 102);

text-decoration: none;

display: inline-block;

}

.zhuti4-2>img{

margin-left:20px;

}

.zhuti4-2>a:nth-of-type(1){

margin-left:112px;

}

.zhuti4-2>a:nth-of-type(2){

margin-left:85px;

}

.zhuti4-2>a:nth-of-type(3){

margin-left:80px;

}

.zhuti4-2>a:nth-of-type(4){

margin-left:80px;

}

article>div>p:nth-of-type(2){

font-size:18px;

color:rgb(0, 0, 0);

background-color: rgb(255, 255, 255);

margin-bottom:0px;

padding:20px 0px 20px 30px;

border-bottom:1px solid rgb(238, 238, 238);

}

.zhuti5{

display: flex;

flex-direction: row;

}

.zhuti5>div{

width:240px;

height:192px;

border-right:1px solid rgb(248, 248, 248);

display: flex;

flex-direction: column;

}

.zhuti5 img{

width:239px;

height: 96px;

}

.zhuti5 a{

font-size:14px;

color:rgb(0, 0, 0);

text-decoration: none;

display: inline-block;

margin-top:15px;

}

.zhuti5>div>a:nth-of-type(1){

margin-left:30px;

}

.zhuti5>div>a:nth-of-type(2){

margin-left:15px;

}

html阿里云网页练习实现代码的更多相关文章

阿里云code上传代码
1-从官网下载git,然后安装,这一步可以百度. 2-在阿里云上面创建project,如图 3-回到本地,进入本地代码文件目录,右击打开git 4-输入git init 在文件夹下面会出现.git文件 ...
阿里云1218动态css3代码
See the Pen jEWpWm by kujian (@kujian) on CodePen. .room-nav { /* -webkit-animation:roomNavTranslate ...
阿里云代码管理平台 Teambition Codeup（行云）亮相，为企业代码安全护航
2019杭州云栖大会企业协作与研发效能专场,企业协同平台Teambition负责人齐俊元正式发布阿里云自研的代码管理平台Teambition Codeup(行云),Codeup是一款企业级代码管理产品 ...
阿里云ODPS <====>蚂蚁大数据
1.命令行客户端工具的安装参考文档:http://repo.aliyun.com/odpscmd/?spm=a2c4g.11186623.2.17.5c185c23zHshCq 2.创建和查看表:ht ...
Android应用通过JDBC直连阿里云MySQL数据库
1.设置白名单,获取外网连接地址外部设备要访问阿里云MySQL数据库,则需要设置白名单,具体操作链接: https://help.aliyun.com/document_detail/43185.h ...
阿里云上安装 OpenStack 是什么体验
阿里云上跑火车(安装 OpenStack Train 版本),猜猜最终花了多少钱? 前言前面给大家提供了用虚拟机安装 OpenStack 的镜像,虽然已经很简便了,但还是略显笨重.一来镜像文件比较大 ...
阿里云ECS问题 Login Incorrect , all available gssapi merchanisms failed
1.阿里云ECS无法登录 Login Incorrect 阿里云ECS密码包含2个密码: 1.重置密码(实例密码也就是我们SSH远程连接的密码): 2.修改远程连接密码(在阿里云网页控制台上远程连接的 ...
将html代码部署到阿里云服务器，并进行域名解析，以及在部署过程中遇到的问题和解决方法
本博客主要是说一下,,如何将html代码部署到阿里云服务器,并进行域名解析,以及在部署过程中遇到的问题和解决方法. 1.先在阿里云上购买一台阿里云服务器(ECS云服务器): 2.远程连接上该服务器,在 ...
阿里云提示Discuz uc.key泄露导致代码注入漏洞uc.php的解决方法
适用所有用UC整合阿里云提示漏洞: discuz中的/api/uc.php存在代码写入漏洞,导致黑客可写入恶意代码获取uckey,.......... 漏洞名称:Discuz uc.key泄露导致代 ...

随机推荐

Session & Cookie小知识~
Cookie 一个HTTP cookie的(也称为网络Cookie,互联网的cookie,浏览器cookie,或者干脆饼干)是一小块从发送的数据的网站用户的并存储在用户的计算机上的网页浏览器,而用户浏 ...
springmvc-mybatis整合出错： Invalid bound statement (not found)
Invalid bound statement (not found):(自己dao里面的某个方法) 错误原因:在使用mybatis generator插件自动生成代码后将UserMapper.jav ...
python函数之第一类对象
目录 python函数之第一类对象 python函数之第一类对象第一类对象(英语:First-class object)在计算机科学中指可以在执行期创造并作为参数传递给其他函数或存入一个变数的实体. ...
python 0,1行列问题
shape[0]-- 行 A.min(0) --A的按列最小值,生成一个行向量 >>> a = np.random.rand(3,3) >>> a array([[ ...
java 偏向锁、轻量级锁及重量级锁synchronized原理
Java对象头与Monitor java对象头是实现synchronized的锁对象的基础,synchronized使用的锁对象是存储在Java对象头里的. 对象头包含两部分:Mark Word 和 ...
delphi字符串分割
function GetLeft(sText, sepStr: string): string; var p: Integer; begin p := Pos(sepStr, sText); then ...
Linux之cd、pwd、mkdir、rmdir
cd.pwd.mkdir.rmdir 命令功能: 切换到指定的目录,可用绝对路径和相对路径命令格式: cd directory 命令参数: 无命令实例: 1.切换到/bin目录 vbird@Ubu ...
C# 代码小技巧
一 .自动属性. 1.vs下输入prop,Tab键就出现了. 2.有了自动属性,我们不用再额外为一个类的每个公共属性定义一个私有字段(实际上没多大用处的字段), 但是通过反射还是可以看到对应的私有 ...
UDP广播包
一,广播地址: 广播地址是专门用于同时向网络中所有工作站进行发送的一个地址.在使用TCP/IP 协议的网络中,主机号为全1的IP地址为广播地址.例如,对于 :192.168.199.0(掩码:255. ...
JavaScript常见的代码精简
1.&& callback && callback() 等价于: if(callback){ callback(); } 表达的意思: 先判断 callback 是不是 ...

html阿里云网页练习实现代码

html阿里云网页练习实现代码的更多相关文章

随机推荐

热门专题