百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

一些常用但是容易忽略的标签css属性(首行缩进,img空隙)与常用三栏的布局方式

作者齐海艳课程任务三:三栏式布局2536次浏览72017-03-02 16:32

1.三栏式布局方式:使用浮动的方式float,左右大小固定,中间自适应;使用的方法是左右浮动,中间的层使用margin-left和margin-right来控制距离,最外层的div需要清除浮动

代码如下:

<div class="main">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="center">中间</div>
</div>

<style type="text/css">
.main{overflow:auto;zoom:1;....}
.left{flaot:left;width:220px;height:auto;...}
.right{float:right;width:120px;height:auto;...}
.center{margin:0 140px 0 240px;height:auto;...}
</style>

2.首行缩进两个字符:text-intent:2em

3.img标签与div层之间会有空隙
解决方法:使用display:block就可以消除

4.vertical-align的使用:对象内容对齐方式

值:baseline: 将支持valign特性的对象的内容与基线对齐
sub: 垂直对齐文本的下标
super: 垂直对齐文本的上标
top: 将支持valign特性的对象的内容与对象顶端对齐
text-top: 将支持valign特性的对象的文本与对象顶端对齐
middle: 将支持valign特性的对象的内容与对象中部对齐
bottom: 将支持valign特性的对象的文本与对象底端对齐
text-bottom: 将支持valign特性的对象的文本与对象底端对齐

4条评论