为了账号安全,请及时绑定邮箱和手机立即绑定

企业网站综合布局实战

zkpplpp PHP开发工程师
难度初级
时长 2小时55分
学习人数
综合评分9.73
544人评价 查看评价
9.8 内容实用
9.8 简洁易懂
9.6 逻辑清晰
li {
/*width: 50px;
height: 30px;*/
float: left;
list-style-type: none;
}
a {
text-decoration: none;
padding: 10px;
/*display: block;
line-height: 30px;
text-align: center;*/
}
a:link,a:visited {
color: #000;
}
a:hover,a:active {
color: #fff;
background-color: #BE3948;
}
li {
width: 50px;
height: 30px;
float: left;
list-style-type: none;
}

a {
text-decoration: none;
display: block;
line-height: 30px;
text-align: center;
}

a:link,a:visited {
color: #000;
}

a:hover,a:active {
color: #fff;
background-color: #BE3948;
}
<body>
<div class="mainBox clearfix">
<div class="leftBox"></div>
<div class="rightBox"></div>
<div class="clear"></div>
</div>
</body>
/*.clearfix{
overflow: hidden;
zoom: 1;
}*/

/*.clearfix{
overflow: auto;
height:1%;
}*/

/*.mainBox:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}*/

/*.clear {
clear: both;
height: 0;
overflow: hidden;
}*/
.mainBox {
width: 960px;
/*height: 300px;*/
background-color: #cff;
}
.leftBox {
width: 740px;
height: 300px;
background-color: #c9f;
float: left;
}
.rightBox {
width: 210px;
height: 300px;
background-color: #fcf;
float: right;
}
<style type="text/css">
.myBox{
width:200px;
height:100px;
border:1px solid #f00;
margin-top:10px;
padding-left:15px;
}
</style>
.
.
.
<div class="myBox">Hello World!</div>
老师好棒啊~
如果一个元素里的所有子元素都设置了浮动,而这个元素本身又没设置高度,它才会塌陷
为了做样式而做样式
板犬区。。。我第一反应竟然是犬夜叉
俗话说得好:磨刀不误砍柴工貌似更符合语境。。
关于clearfix的具体用法参见:http://www.imooc.com/wenda/detail/11604
浮动会让元素塌陷。即被浮动元素的父元素不具有高度。例如一个父元素包含了浮动元素,它将塌陷具有零高度。你可以按以下哪种方法处理:http://www.jb51.net/css/67471.html,http://blog.csdn.net/u014084662/article/details/52988536
三栏布局,两栏自适应?
要想理解浮动,推荐大家去查看BFC的知识,上面加的那些属性,导致都是父元素也成为块级元素上下文,所以才会被撑开。
课程须知
1. 您已具备HTML 常用标签和属性。 2. 您已具备CSS 常用属性和值。 3. 您想提升网页布局技能。
老师告诉你能学到什么?
1.CSS中盒子模型的使用 2.网页三列布局方法 3.两列自适应高度布局方法 4.幻灯片切换效果的制作方法 5.导航菜单的制作方法

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消