概述
html
<body>
<!-- 固定浮动栏 -->
<div class="guding">
<p>
<a href="#">点我提问</a>
</p>
<p>
<a href="#">8</a>
</p>
</div>
<header>
<!-- 导航一 -->
<div>
<div>
<a href="#"><img src="../IMG/TBheader_logo.png" alt="logo"></a>
<nav>
<a href="#">控制台</a>
<a href="#">备案</a>
<a href="#">登陆</a>
<a href="#">注册有礼</a>
</nav>
</div>
</div>
<!-- 导航二 -->
<div class="daohang">
<a href="#"><img src="../IMG/TB1B5cJLXXXXXbVaXXXXXXXXXXX-400-168.jpg" alt="logo"></a>
<nav>
<input type="text" placeholder="在此输入您要的服务">
<a href="#">搜索</a>
<p>
<a href="#">PHP运行环境</a>
<a href="#">JAVA运行环境</a>
<a href="#">全能环境</a>
<a href="#">linux环境配置</a>
<a href="#">数据迁移</a>
<a href="#">清除木马</a>
<a href="#">微网站</a>
</p>
</nav>
<p>
<a href="#">发布定制需求<i></i></a>
<a href="#">管理我的服务</a>
</p>
</div>
<!-- 导航3 -->
<div class="daohang2">
<p>
<a href="#">云市场分类</a>
<a href="#"><i></i></a>
</p>
<p>
<a href="#">基础软件</a>
<a href="#">代维&服务</a>
<a href="#">网站建设</a>
<a href="#">企业应用</a>
<a href="#">云安全</a>
<a href="#">数据及API</a>
</p>
<p>
<a href="#">保障</a>
<a href="#"><i></i></a>
<a href="#">服务商入驻</a>
</p>
</div>
</header>
<article>
<!-- 主题 -->
<div>
<!-- 第一段 -->
<div class="zhuti1">
<div class="zhuti1-1">
<div>
<a href="#">精美模板</a>
<a href="#">企业展示</a>
<a href="#">电子商务</a>
</div>
<div>
<a href="#">网站定制</a>
<a href="#">企业官网</a>
<a href="#">电商网站</a>
<a href="#">手机网站</a>
<a href="#">移动APP</a>
<a href="#">社区论坛</a>
<a href="#">信息门户</a>
<a href="#">精选建站</a>
</div>
<div>
<a href="#">网站素材设计</a>
<a href="#">LOGO设计</a>
<a href="#">海报设计</a>
</div>
<div>
<a href="#">网站服务</a>
<a href="#">网站改版</a>
<a href="#">店铺代运营</a>
</div>
<div>
<a href="#">个性化网站定制</a>
<a href="#">查看攻略</a>
<a href="#">提交需求</a>
</div>
</div>
<div class="zhuti1-2">
<img src="../IMG/TB15PQ5OXXXXXb7XpXXXXXXXXXX-1200-300.jpg" alt="logo"></div>
</div>
<!-- 第二段 -->
<p>
找商品·轻松挑
</p>
<div class="zhuti2">
<dvi class="zhuti2-1">
<span>
<a href=""><i></i></a>
<a href="#">精美模板</a>
</span>
</dvi>
<dvi class="zhuti2-2">
<span>
<a href=""><i></i></a>
<a href="#">官网定制</a>
</span>
</dvi>
<dvi class="zhuti2-3">
<span>
<a href=""><i></i></a>
<a href="#">电商网站</a>
</span>
</dvi>
<dvi class="zhuti2-4">
<span>
<a href=""><i></i></a>
<a href="#">手机网站</a>
</span>
</dvi>
<dvi class="zhuti2-5">
<span>
<a href=""><i></i></a>
<a href="#">移动APP</a>
</span>
</dvi>
<dvi class="zhuti2-6">
<span>
<a href=""><i></i></a>
<a href="#">素材设计</a>
</span>
</dvi>
<dvi class="zhuti2-7">
<span>
<a href=""><i></i></a>
<a href="#">信息门户</a>
</span>
</dvi>
<dvi class="zhuti2-8">
<span>
<a href=""><i></i></a>
<a href="#">社区论坛</a>
</span>
</dvi>
</div>
<!-- 第三段 -->
<div class="zhuti3">
<span>1F企业官网定制
<span>提供量身定制的建站服务，设计师专人对接，服务流程全程监管</span>
</span>
<span>
<a href="#">发布叮嘱需求</a>
<a href="#">更多官网方案></a>
</span>
</div>
<div class="zhuti4">
<div>
<div>
<img src="../IMG/TB1yvfuHVXXXXaXXXXXwu0bFXXX.png" alt="logo">
</div>
<div>
<a href="#">企业官网定制</a>
</div>
</div>
<div class="zhuti4-1">
<a href="#">云·定制企业官网</a>
<a href="#">【双十一销冠】【建站市场最佳选择奖】</a>
<div>
<a href="#"><i></i></a>
<img src="../IMG/TB1HG.uOXXXXXXmaFXXXXXXXXXX-380-266.jpg" alt="logo">
<a href="#"> <i></i></a>
</div>
</div>
<div class="zhuti4-2">
<a href="#">企业建站</a>
<a href="#">PC+手机+微信三站合一</a>
<img src="../IMG/TB1GwwiOXXXXXaVapXXXXXXXXXX-240-108.jpg" alt="logo">
<a href="#">企业官网自助版</a>
<a href="#">傻瓜式后台，可视化操作</a>
<img src="../IMG/TB1sGfyNVXXXXXbXVXXXXXXXXXX-213-105.png" alt="logo">
</div>
<div class="zhuti4-2">
<a href="#">企业建站</a>
<a href="#">PC+手机+微信三站合一</a>
<img src="../IMG/TB1GwwiOXXXXXaVapXXXXXXXXXX-240-108.jpg" alt="logo">
<a href="#">企业官网自助版</a>
<a href="#">傻瓜式后台，可视化操作</a>
<img src="../IMG/TB1sGfyNVXXXXXbXVXXXXXXXXXX-213-105.png" alt="logo">
</div>
</div>
<div class="tupian">
<img src="../IMG/TB1eriAHVXXXXc6XVXXO8z25XXX-1200-90.png" alt="logo">
</div>
<p>
服务商推荐
</p>
<div class="zhuti5">
<div>
<img src="../IMG/TB1aB3MHVXXXXbMXpXXwu0bFXXX.png" alt="logo">
<a href="#">北京云梦网络科技有限公司</a>
<a href="#">基于云计算的企业网站建设专家</a>
</div>
<div>
<img src="../IMG/TB14LSPIpXXXXXYXFXXwu0bFXXX.png" alt="logo">
<a href="#">杭州飞色网络科技有限公司</a>
<a href="#">基于云计算的企业网站建设专家</a>
</div>
<div>
<img src="../IMG/TB1EUoMHVXXXXb0XpXXSutbFXXX.jpg" alt="logo">
<a href="#">广州友慧网络科技有限公司</a>
<a href="#">基于云计算的企业网站建设专家</a>
</div>
<div>
<img src="../IMG/TB14C51IFXXXXc8XpXX0p7L0VXX-396-240.png" alt="logo">
<a href="#">陕西畅通网络科技有限公司</a>
<a href="#">基于云计算的企业网站建设专家</a>
</div>
<div>
<img src="../IMG/TB1Ei1wNVXXXXasXFXXXXXXXXXX-110-50.jpg" alt="logo">
<a href="#">长沙海商网络科技有限公司</a>
<a href="#">基于云计算的企业网站建设专家</a>
</div>
</div>
</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-image: url("../IMG/index_01.png");
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-image: url("../IMG/index_01.png");
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-image: url("../IMG/index_01.png");
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-image: url("../IMG/TB1oP6tHFXXXXXUapXXAAT2HVXX-63-63.png");
background-position: 0px -10px;
}
.zhuti2-2>span>a>i {
display: inline-block;
width: 60px;
height: 44px;
background-image: url("../IMG/TB1XNwNHpXXXXa1XVXXAAT2HVXX-63-63.png");
background-position: -1px -10px;
}
.zhuti2-3>span>a>i {
display: inline-block;
width: 63px;
height: 44px;
background-image: url("../IMG/TB1woESHpXXXXXSXpXXAAT2HVXX-63-63.png");
background-position: 0px -11px;
}
.zhuti2-4>span>a>i {
display: inline-block;
width: 63px;
height: 44px;
background-image: url("../IMG/TB11GsPHpXXXXciXFXXAAT2HVXX-63-63.png");
background-position: 0px -9px;
}
.zhuti2-5>span>a>i {
display: inline-block;
width: 63px;
height: 44px;
background-image: url("../IMG/TB1t.ARHpXXXXb0XpXXAAT2HVXX-63-63.png");
background-position: 0px -8px;
}
.zhuti2-6>span>a>i {
display: inline-block;
width: 63px;
height: 44px;
background-image: url("../IMG/TB1KGwUHpXXXXaOXXXXAAT2HVXX-63-63.png");
background-position: 0px -11px;
}
.zhuti2-7>span>a>i {
display: inline-block;
width: 63px;
height: 44px;
background-image: url("../IMG/TB17s7UHpXXXXa1XXXXAAT2HVXX-63-63.png");
background-position: 0px -10px;
}
.zhuti2-8>span>a>i {
display: inline-block;
width: 63px;
height: 46px;
background-image: url("../IMG/TB1F6wPHpXXXXboXFXXAAT2HVXX-63-63.png");
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-image: url("../IMG/TB1Zm2YHFXXXXaBaXXXAAT2HVXX-63-63.png");
background-position: 0px -10px;
}
.zhuti2-2 a>i:hover {
background-image: url("../IMG/TB1AUURHpXXXXbUXpXXAAT2HVXX-63-63.png");
background-position: -1px -10px;
}
.zhuti2-3 a>i:hover {
background-image: url("../IMG/TB1l8USHpXXXXX0XpXXAAT2HVXX-63-63.png");
background-position: 0px -11px;
}
.zhuti2-4 a>i:hover {
background-image: url("../IMG/TB1x2UNHpXXXXaVXVXXAAT2HVXX-63-63.png");
background-position: 0px -9px;
}
.zhuti2-5 a>i:hover {
background-image: url("../IMG/TB1rvgQHpXXXXXWXFXXAAT2HVXX-63-63.png");
background-position: 0px -8px;
}
.zhuti2-6 a>i:hover {
background-image: url("../IMG/TB19aIOHpXXXXX4XVXXAAT2HVXX-63-63.png");
background-position: 0px -11px;
}
.zhuti2-7 a>i:hover {
background-image: url("../IMG/TB1S5ULHpXXXXbKXFXXAAT2HVXX-63-63.png");
background-position: 0px -10px;
}
.zhuti2-8 a>i:hover {
background-image: url("../IMG/TB1qCUMHpXXXXbRXVXXAAT2HVXX-63-63.png");
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-image: url("../IMG/index.png");
background-position: -377px -867px;
}
.zhuti4>div:nth-child(2)>div>a:nth-of-type(2)>i{
display: inline-block;
width: 12px;
height: 19px;
background-image: url("../IMG/index.png");
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;
}
转载于:https://www.cnblogs.com/zhuxinpeng-looking/p/10568326.html
最后
以上就是机智灰狼为你收集整理的html阿里云网页练习实现代码的全部内容，希望文章能够帮你解决html阿里云网页练习实现代码所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复