首页 > 代码库 > 百度前端学院任务题---任务3
百度前端学院任务题---任务3
任务3：三栏式布局
就是这个样子 。总结：
思路就是三个div，前两个浮动，第三个设置margin-left，margin-right值这样就可以实现这样的效果，我在做的过程中遇到的问题：
三个div比如 头像部分class=head,个人logo部分class=person,内容部分class=content，可是如果把class=content的内容区域放在中间的话，那么class=person的盒子就会被挤下来， 这是第一个点：float不脱离文档流的，会被普通元素影响到的，但是文字环绕效果是一个特殊。
第二个点 ：中间的content盒子是不设定宽度，既然class=head,class=person是浮动的会吧content挤下来，那content是怎么上去的？
给content设置margin-left，margin-right值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>任务3</title> <style type="text/css"> *{margin: 0;padding: 0;} body{padding: 20px;} .box{padding: 20px;min-width: 600px;background: #eee;border: 1px solid #999;overflow: hidden;} .head{float: left;width: 200px;padding: 20px 0 20px 20px;background: #fff;border: 1px solid #999;overflow: hidden;} .head .logo{width: 80px;height:80px;background: url(‘head.jpg‘);float:left;} .head .name{width: 200px;font-size: 13px;font-weight: bold;text-align: center;} .content{background: #fff;margin-left: 240px;margin-right: 140px;border: 1px solid #999;padding: 20px;} .content h2{line-height: 50px;font-size: 16px;} .person{width: 120px;background: #fff;border: 1px solid #999;float: right;} .person div{margin: 20px;width: 80px;height: 80px;} .person .one{background: url(‘logo1.jpg‘);} .person .two{background: url(‘logo2.jpg‘);} .person .three{background: url(‘logo3.jpg‘);} .person .four{background: url(‘logo4.jpg‘);} </style></head><body> <div class="box"> <div class="head"> <div class="logo"></div> <div class="name">老白队和小粉队</div> </div> <div class="person"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> </div> <div class="content"> <h2>小粉队</h2> <p>我们是小粉队 另外，苹果还带来了一款无线耳机AirPods，售价1288元，采用W1芯片，内置麦克风，它的大小如同普通没有线的苹果耳机。支持5小时续航，双击耳机开启Siri，充电盒支持24小时续航，只需要打开就可以让iPhone自动识别，对Apple Watch等产品也都支持。</p> <h2>老白队</h2> <p>我们是老白队 另外，苹果还带来了一款无线耳机AirPods，售价1288元，采用W1芯片，内置麦克风，它的大小如同普通没有线的苹果耳机。支持5小时续航，双击耳机开启Siri，充电盒支持24小时续航，只需要打开就可以让iPhone自动识别，对Apple Watch等产品也都支持。</p> </div> </div></body></html>
百度前端学院任务题---任务3
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。