今天看了div+css的第三集视频教程。
感觉不是很好,发现本集视频只是做了一个网页框架。这并没有什么感觉不好的,让人觉得有点不好的是:讲师只是单独的使用的ie来测试讲解。
我个人把demo分别放大ietester测试,放到ff4,放到opera,放到chrome发现只有在ie核心下效果才不会变形。失望。。。
兼容性差了。。。有空把该框架改进一下!呵呵。。。
也不怎么多说了。
效果图:
代码如下:
<!–
body{
margin:0px;
text-align:center;
background:#ffffcc;
}
立即学习“前端免费学习笔记(深入)”;
#container {
width:800px;
height:1000px;
margin:auto 0px;
}
#header {
float:left;
width:800px;
height: 100px;
margin:auto 0px;
background:red;
clear:both;
}
#logo {
float:left;
width:250px;
height:90px;
background:green;
clear:right;
margin:opx;
}
#banner{
float:right;
width:540px;
height:90px;
margin:0px;
clear:left;
background:blue;
}
#menu {
width:800px;
height:35px;
margin:auto 0px;
clear: both;
}
.nav {
margin:auto 0px;
width:800px;
height:10px;
clear:both;
background:#ffffff;
line-height:10px;
}
.nav_a {
float:left;
margin:0px;
width:610px;
height:10px;
clear:both;
background:#ffffff;
line-height:10px;
}
.left_main {
margin:0px;
float:left;
width:610px;
height:420px;
background:red;
}
.right_main{
margin:0px;
float:right;
width:180px;
height:420px;
background:green;
clear:left;
}
.left_a {
margin:0px;
float:left;
width:300px;
height:205px;
background:blue;
}
.left_b {
margin:0px;
float:right;
width:300px;
height:205px;
background:blue;
clear:left;
}
.con {
margin:auto 0px;
width:800px;
height:200px;
background:green;
clear:both;
}
.one {
float:left;
width:200px;
height:200px;
background:#ff99f0;
clear:right;
}
.two{
float:left;
width:200px;
height:200px;
background:#ffcc00;
}
.three {
float:left;
width:200px;
height:200px;
background:#0ffff0;
}
.four {
float:right;
width:190px;
height:200px;
background:#f0fff0;
}
#footer {
width:800px;
height:100px;
background:red;
margin:auto 0px;
padding-top: 30px;
color: #ffffff;
}
//–>
nav
nav_left
nav
nav_left
nav
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3088533.html