麻烦请老师检验一下我的代码？我自己发现了几个问题写在代码中，能不能帮我解决一下？

首页课程实战体系课手记专栏慕课教程

来源：2-10 编程练习

weixin_慕后端7118097

2019-09-08 14:47:33

<!DOCTYPE html>

<html>

<head>

/*此处写代码*/

margin:0;

padding:0;

}

.nav{

height:100px;

width:100%;

background-color:black;

position:fixed;

top:0;

}

.nav .logo{

float:left;

}

.nva .logo:active{

color:gray;

}

.nav ul{

list-style-type:none;

margin:0;

padding:0;

}

.nav ul li a{

float:right;

color:white;

height:100px;

line-height:100px;

margin-right:30px;

text-align:center;

text-decoration: none;

display: block;

width:90px;

font-family:"正楷";

font-weight:bold;

font-size:20px;

text-decoration:none;

list-style:none;

}

.nav ul li a:hover,.nav ul li a:active{

color:white;

background-color:orange;

}

.fot{

background-color:black;

width:100%;

height:100px;

position:fixed;

bottom:0;

}

.fot ul{

list-style-type:none;

position:absolute;

margin-left:50%;

left:-300px;

padding:0;

}

.fot ul li{

float:left;

}

.fot ul li a{

color:white;

height:100px;

line-height:100px;

margin-right:30px;

text-align:center;

text-decoration: none;

display: block;

width:90px;

font-size:30px;

text-decoration:none;

list-style:none;

}

.fot ul li a:hover{

background-color;

}

.mainn{

width:100%;

background:#6bb2d5;

padding:100px 0;

height:1200px;

}

.mainn .right{

float:right;

width:50%;

background-color:red;

height:500px;

}

.mainn .left{

float:left;

width:50%;

background-color:white;

height:500px;

position:relative;

}

.mainn .right p,.mainn .left p,.mainn .left h2{

padding-left:30%

}

.mainn a,p,h3{

list-style-type: none;

font-size:20px;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

<p><a href="#">职业路径</a>   HTML5与CSS3实现动态网页</p><br/>

<p><a href="#">职业路径</a>   0基础入门Android语法与界面</p><br/>

<p><a href="#">职业路径</a>   IOS基础语法与常用控件</p><br/>

<p><a href="#">职业路径</a>   PHP入门开发</p><br/>

<p><a href="#">职业路径</a>   JAVA入门开发</p><br/>

</div>

<p>HTML  CSS  JavaScript</p><br/>

<p>HTML5  CS3S  Jquery</p><br/>

<p>移动端基础  移动端APP开发</p><br/>

</div>

<ul>

</ul>

</div>

</body>

</html>

1.请问nav部分设置了fixed定位，为什么网页下移的时候左半部分没有跟着移动？

2.请问主题部分的文字怎么设置垂直居中显示？

3.请问FOT部分的文字怎么设置间隔大一点？

写回答

2回答

好帮手慕码

2019-09-08

已采纳

同学你好！
已经在提问中回答同学了哦，同学快去看一下吧~

祝学习愉快~

好帮手慕码

2019-09-08

同学你好!

(1)顶部设置固定定位之后即是滚动也是在最上层显示的。同学的代码中是因为中部也有设置了定位，层级比顶部高，所以会覆盖左侧的顶部区域，可以提高顶部的层级堆叠顺序：

（2）想让中部的文字垂直居中，建议外层添一个div，比较好操作：

这部分内容的高度：

修改如下：

效果：

（3）底部的导航可以通过外边距来调整其中的间隔。例：

（4）底部没有实现垂直居中：

如果帮助到了你，欢迎采纳，祝学习愉快~

heixin_慕后端7118097

h 我在一个提问中把代码写进去了，麻烦帮我看看

h019-09-08

共4条回复

0 学习 · 40143 问题

查看课程

相似问题

老师我想要一下,这几个编程练习的源码

回答 2

检查代码，圣杯布局不用这个代码，中间padding挤进来，两边用定位一个左边一个右边，可以吗？

回答 3

回答 2

回答 1

回答 1