我在看燕十八的HTML视频第十课浮动布局
最后的10分钟试布局一个网站框架
课程里面提及要先设置一个整体的div方便以后编排全局
教程里的代码是
<div id="A"> 这是主体,我是方便发帖才这样定义ID的反正A是代表整个主体
<div id="a"></div> 这些都是A里面的框架
…………
…………
</div>
CSS部分
A只设置了宽度为1002PX和背景颜色
没有设置高度
然后A里面的子框架也是1002PX高度随意和不同的背景色
当添加了外边框后
子框架与子框架之间的位置出现了A的背景色
但我自己写的如果不设置A的高值
是完全没有效果的
就是子框架与子框架间是没有颜色的
如果设置了高度那么宽度设不设都没问题
到底出什么问题了
我的代码
html部分：
<!DOCTYPE html public "-//W3C// DTD XHML 1.0 Strict//en"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>云浮小站</title>
<meta http-equiv="Contion-Type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="test.css" type="text/css"/>
</head>
<body>
<div id="zhuti"><!--主体-->
<div id="headera">首页</div> <!--版头1-->
<div id="headerb">云浮黄页</div> <!--版头2-->
<div id="headerc">团购商城</div> <!--版头3-->
<div id="banner">banner</div>
<div id="main">主体</div>
<div id="footer">尾部</div>
</div>
</body>
CSS部分
#zhuti{ /* 布局主体框架 */
width:1002px;
height:1002px;
background:red;
margin:0 auto;
}
#headera{ /* #+ID名为引用ID */
width:334px; /* 属性：属性值; */
height:50px;
background:green;
float:left;
}
#headerb{
width:334px;
height:50px;
background:gold;
float:left;
}
#headerc{
width:334px;
height:50px;
background:blue;
float:left;
}
#banner{
width:1002px;
height:50px;
background:blue;
float:left;
margin-top:10px;
}
#main{
width:1002px;
height:128px;
background:pink;
float:left;
margin-top:10px;
}
#footer{
width:1002px;
height:128px;
background:red;
float:left;
margin-top:10px;
}
#mleft{
width:601px;
height:128px;
background:pansy;
float:left;
margin-top:30px;
}
#mright{
width:601px;
height:128px;
background:yello;
float:left;
margin-top:30px;
}
最后的10分钟试布局一个网站框架
课程里面提及要先设置一个整体的div方便以后编排全局
教程里的代码是
<div id="A"> 这是主体,我是方便发帖才这样定义ID的反正A是代表整个主体
<div id="a"></div> 这些都是A里面的框架
…………
…………
</div>
CSS部分
A只设置了宽度为1002PX和背景颜色
没有设置高度
然后A里面的子框架也是1002PX高度随意和不同的背景色
当添加了外边框后
子框架与子框架之间的位置出现了A的背景色
但我自己写的如果不设置A的高值
是完全没有效果的
就是子框架与子框架间是没有颜色的
如果设置了高度那么宽度设不设都没问题
到底出什么问题了
我的代码
html部分：
<!DOCTYPE html public "-//W3C// DTD XHML 1.0 Strict//en"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>云浮小站</title>
<meta http-equiv="Contion-Type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="test.css" type="text/css"/>
</head>
<body>
<div id="zhuti"><!--主体-->
<div id="headera">首页</div> <!--版头1-->
<div id="headerb">云浮黄页</div> <!--版头2-->
<div id="headerc">团购商城</div> <!--版头3-->
<div id="banner">banner</div>
<div id="main">主体</div>
<div id="footer">尾部</div>
</div>
</body>
CSS部分
#zhuti{ /* 布局主体框架 */
width:1002px;
height:1002px;
background:red;
margin:0 auto;
}
#headera{ /* #+ID名为引用ID */
width:334px; /* 属性：属性值; */
height:50px;
background:green;
float:left;
}
#headerb{
width:334px;
height:50px;
background:gold;
float:left;
}
#headerc{
width:334px;
height:50px;
background:blue;
float:left;
}
#banner{
width:1002px;
height:50px;
background:blue;
float:left;
margin-top:10px;
}
#main{
width:1002px;
height:128px;
background:pink;
float:left;
margin-top:10px;
}
#footer{
width:1002px;
height:128px;
background:red;
float:left;
margin-top:10px;
}
#mleft{
width:601px;
height:128px;
background:pansy;
float:left;
margin-top:30px;
}
#mright{
width:601px;
height:128px;
background:yello;
float:left;
margin-top:30px;
}
