百度前端学院任务题---任务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>

  

时间: 09-07

百度前端学院任务题---任务3的相关文章

百度前端学院---小薇学院---任务---12

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 tr th { 8 color: #fff; 9 background-color: #000; 10 } 11 12 tbody tr:nth-child(1), 13 tbody tr:nth-child(2), 14

百度前端学院两个月学习量任务说明

任务说明 初级班 & 中级班 初级班和中级班的任务内容基本一致,但是在细节要求和时间要求上会不一样. 任务一:HTML.CSS基础 初级班:11天 中级班:4天 任务二:JavaScript基础 初级班:13天 中级班:7天 任务三:一个简单的to-do APP,巩固之前的学习,并深入学习JavaScript语言的一些特性.以及相关的一些设计模式 初级班:7天 中级班:7天 任务:关于移动.node.js.ES6.CSS Processing.JavaScript模块化.前端工程化,掌握目前前端

百度前端学院---耀耀学院---任务1

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>表单验证1</title> 6 <style> 7 #input{ 8 border: 1px solid #eee; 9 outline: none; 10 border-radius: 5px; 11 height: 30px; 12 line-height

百度前端学院--斌斌学院--demo---2

1 <!DOCTYPE html> 2 <html> 3 <!-- 4 作者:[email protected] 5 时间:2017-07-22 6 描述:demo2 7 --> 8 <head> 9 <meta charset="utf-8"> 10 <title> 任务2</title> 11 </head> 12 <body> 13 <h3>污染城市列表<

百度前端学院--小薇学院--任务04

这次的样式图为 注意事项中,想让灰色div随着内容高度自适应变化的方法是:给该div设置最小高度即min-height,再设置height为auto即可. 另外,position为absolute是相对父级元素为relative或者为absolute的元素而言的. 具体到这个任务当中,主要的难点是如何是块级元素居中显示和如何画四分之一圆. 对于块级元素水平垂直居中显示的问题,网上有很多种答案,我个人觉得代码量最少的一种是 position: absolute; top: 50%; left: 5

百度前端学院--小薇学院--任务05

这次的任务是在第一次完成的基础上,将它们实现两栏式分布:效果图如下(由于截图不全的原因,底部还有footer部分没有显示出来): 尝试了很多思路,都没有很好的方案,最终选择了这种:只让右边的侧栏脱离文档流,并且在HTML代码结构当中,让它位于左边的div的上面,然后利用float让其脱离文档流,即可让它显示在右边,并且,这里涉及到的其中一个问题是当div层中有另一个div是流动的布局的话,会使得外层的div塌陷,最终导致的结果是外层的背景无法显示,底部的footer会在上面显示,相当于没有外层d

百度前端学院---斌斌学院---任务demo---1

1 <!DOCTYPE html> 2 <html> 3 <!-- 4 作者:[email protected] 5 时间:2017-07-22 6 描述:demo1 7 --> 8 <head> 9 <meta charset="utf-8"> 10 <title> 任务1</title> 11 </head> 12 13 <body> 14 <label>请输入北

百度前端学院---小薇学院---任务---10

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 @media screen and (max-width: 640px) { 8 .d {order: -1;} 9 } 10 body{ 11 padding: 0; 12 marg

百度前端学院--斌斌学院--demo---3

1 <!DOCTYPE html> 2 <html> 3 <!-- 4 作者:[email protected] 5 时间:2017-07-22 6 描述:demo3 7 --> 8 <head> 9 <meta charset="utf-8"> 10 <title>3</title> 11 </head> 12 <body> 13 <ul id="source&