老师帮忙检查一下，感觉问题很多，却不知道从何下手

<!DOCTYPE html>

<html>

<head>

/*此处写代码*/

*{margin:0px;padding:0px;}

a{text-decoration:none;}

ul{list-style:none;margin:0px;}

img{display：block;}

.header{height:100px;width:100%;background-color:black;overflow:hidden;position:fixed;top:0px;left:0px;z-index:999;}

.logo{float:left;}

.nav{float:right;line-height:100px;}

.nav ul li{display:inline-block;padding-right:40px;font-size:18px;font-family:"黑体";font-weight:bold;}

.nav a{color:white;}

.main{width:100%;height:900px;position:absolute;top:100px;overflow:hidden;}

.mainleft{float:left;height:900px;width:35%;background-color:#00bfff;}

.mainright{float:left;height:900px;width:35%;background-color:#00bfff;}

.mainlogin{float:left;height:900px;width:30%;background-color:#00bfff;}

.miancontain{margin-left:50px;padding-left:40px;margin-top:100px;font-family:"黑体";line-height:40px;font-size:15px;}

.miancontain span{background-color:pink;}

.rule{position:absolute;left:800px;width:5px;height:900px;background-color:orange;}

input{

display: inline-block;

height: 40px;

width: 150px;

line-height: 40px;

margin-top: 20px;

}

.btn{background-color:red;font-family:"黑体";color:white;border: 1px solid black;}

.footer{width: 100%;height: 100px;background: black;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;position:fixed;line-height:100px;}

.footer ul{position:absolute;left:400px;}

.footer ul li{display:inline-block;padding-left:40px;}

.footer a{color:white;}

</style>

</head>

<body>

</ul>

</div>

<ul>

<li><span>职业路径</span>  HTML5与CSS3实现动态网页</li>

<li><span>职业路径</span>  零基础语法与界面</li>

<li><span>职业路径</span>  IOS基础语法与常用控件</li>

<li><span>职业路径</span>  PHP入门开发</li>

<li><span>职业路径</span>  JAVA入门开发</li>

</ul>

</div>

<ul>

<li>  HTML  CSS  Javascript</li>

<li>  HTML  CSS  Jquary</li>

<li>  移动端基础  移动端开发</li>

</ul>

</div>

</div>

<ul>

</ul>

</div>

</body>

</html>

慕雪9296518 2020-02-20

源自：CSS网页布局基础 2-12 编程练习

收起

2回答

好帮手慕夭夭 2020-02-21 10:45:12

同学你好，问题解答如下：

这个是不合理的，三个盒子宽度都是百分比，会随着分辨率不同而变化。而边框是固定像素，不会变化。那么总宽度并不会保持100%了。不是变空白了，是因为设置固定像素，它在分辨率小的情况下也不会缩小，把盒子给挤下去了。边框不能使用百分比，建议同学按照老师给出的建议去修改。
区分如下：
（1）margin是让块元素居中的，且margin:0 auto只能设置水平居中。一般不需要设置垂直居中，使用margin更简单。
（2）定位可以设置水平居中也可以设置垂直居中，一个元素需要同时设置水平垂直居中，就可以使用定位。
（3）text-align: center;是设置文本以及行内元素（行内块元素）居中的，对块元素无效。

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

收起回答

好帮手慕夭夭 2020-02-20 16:17:40

同学你好，问题和修改如下：

1.如下冒号是中文的，导致样式无效。

改为英文冒号

2.a作为行内元素会有默认间隙，且不能被图片撑开

解决方式是把a设置为块元素：

3.导航项的padding设置左右相等的间距，让文字居中更好

参考如下：

4.分割线使用定位，距离左侧是固定的，当分辨率大时，距离右侧就远了。

其他三个盒子都设置了浮动，所以它也设置左浮动，让它紧跟着mainright后面显示即可：

把其中一个盒子宽度修改一下，留给分割线1%

5.尾部内容没有居中。设置定位，距离左侧是固定的，但是分辨率不同，距离右侧并不是固定的。

如下设置居中：

注释的没有用，要去掉。

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

收起回答

提问者慕雪9296518 #1

感谢老师，讲的很详尽，想再问问三个问题。1）我试图把那条分割线设置为但三个盒子的左边框带有粗细的，.mainlogin{border:1px solid orange}只是可是设置后整个盒子变空白是怎么回事？如果设置为1%呢，border-width能有百分比的值吗？2）对于margin的各个方向居中办法很模糊，总是记得不清楚，老师能在这里枚举出几种常用的margin居中写法吗？3）对于什么时候用position的方式居中，或者是margin的方式居中，还是text-align的方式居中还是没法很好判断，请老师帮忙分析一下到底什么时候用哪种相对合适？

2020-02-20 20:23:35