                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

和效果图对不上

直接输入margin：0 auto；结果和设计图根本对不上啊,没人发现么？header栏并没有填满浏览器，反而是main和footer填满了

你若盛开0

2016-03-19

源自：如何用CSS进行网页布局 2-3

关注问题我要回答

819

操作

收起

4 回答

破晓5 回答被采纳 +3 积分
2016-03-19

main和footer并没有设置width,你设置一下width：90%

0 回复有任何疑惑可以回复我~

#1

你若盛开0 提问者

非常感谢！

2016-03-19 回复有任何疑惑可以回复我~

兔子玮幻
2016-05-25

我的和楼主情况一样

0 回复有任何疑惑可以回复我~

诗酒乘年华
2016-04-16

我打开也不是这样的，但是在Editplus中打开却是正确的

0 回复有任何疑惑可以回复我~

chovitaminl
2016-03-19

margin:0 auto,其实就是等价于margin-top：0；margin-bottom：0；margin-left：0；margin-right：0，

输入结果前，代码是这样子的：

<style type="text/css">

body{ margin:0; padding:0; font-size:30px}

div{ text-align:center; font-weight:bold}

.main,.footer{ width:960px; 【任务1】}

.head{ width:100%; height:100px; background:#ccc}

.main{ height:600px; background:#FCC;}

.footer{ height:50px; background:#9CF;}

</style>

输入结果后可以是这样子

<style type="text/css">

body{ margin:0; padding:0; font-size:30px}

div{ text-align:center; font-weight:bold}

.main,.footer{ width:960px;margin:0 auto; }

.head{ width:100%; height:100px; background:#ccc}

.main{ height:600px; background:#FCC;}

.footer{ height:50px; background:#9CF;}

</style>

或

<style type="text/css">

body{ margin:0; padding:0; font-size:30px}

div{ text-align:center; font-weight:bold}

.main,.footer{ width:960px; }

.head{ width:100%; height:100px; background:#ccc}

.main{ height:600px; background:#FCC;margin:0 auto;}

.footer{ height:50px; background:#9CF;margin:0 auto;}

</style>

全屏点开后

0 回复有任何疑惑可以回复我~

#1

你若盛开0 提问者

我的打开后不是这个样子，不知道为什么，还是谢谢你

2016-03-19 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

如何用CSS进行网页布局

参与学习 209624 人
解答问题 1153 个

用最简洁的案例教你布局的那些知识，这是前端工程师基本技能

和效果图对不上

我要回答关注问题

意见反馈帮助中心 APP下载