美文网首页
百度前端学院task3笔记

百度前端学院task3笔记

作者: Lareina林暖暖 | 来源:发表于2017-01-15 17:36 被阅读0次

实现三栏式布局(左右两栏定宽,中间宽度自适应)有多种方法
最合适的是 将左边栏与右边栏的css的float属性分别设置为left和right
在html中将浮动元素放在不浮动元素前面,这样浮动元素就会环绕在不浮动元素的两侧。
部分css样式如下
.Left{
padding:20px;
width: 200px;
position:relative;
float: left;
background-color:white;
}
.Right{
width: 120px;
float:right;
position:relative;
background-color:white;

}
.Middle{
   margin-left:260px;
   margin-right:200px;
   background-color:white; 
   overflow: auto;
}

部分文档结构
<html>
<body>
<div class="content">
<div class="Left">



<p>团队名称</p>
</div>
<div class="Right">






</div>
<div class="Middle">
<h3>百度前端学院</h3>

<p>2016春季班概述</p>
</div>
</div>
</body>
</html>

相关文章

  • 百度前端学院task3笔记

    实现三栏式布局(左右两栏定宽,中间宽度自适应)有多种方法最合适的是 将左边栏与右边栏的css的float属性分别设...

  • 2019-10-24

    尽快完成百度前端学院,找到工作。

  • 零基础前端学习笔记01

    零基础前端学习笔记 今天开始第一天的前端学习,学习内容来自导师推荐的百度前端技术学院 我本身是学习测控技术与仪器专...

  • 扁平数组与多级菜单转换

    最近在复习前端基础,在百度前端技术学院看到的题。 我的代码如下:

  • 快速建一个代码 Demo

    看到一些团队提交的代码没有 Demo 地址,就分享一下自己的方法 百度前端技术学院学习笔记 最终效果 http:/...

  • vue(8) - 收藏集 - 掘金

    2017 百度前端技术学院——vue 源码分析之动态数据绑定一 - 前端 - 掘金一、Object.keys() ...

  • 小白入门:git上传代码到github

    最近在百度前端技术学院开始学习前端的基础知识——HTML ,CSS , JavaScript . 今天的一大收获便...

  • 活动#2 来百度前端学院刷题吧

    百度前端技术学院诞生于2014年,由百度最大规模的前端技术组织 EFE 团队发起成立。在去年,有超过了一万一千名同...

  • 前端札记

    简书专辑-Web 前端入门 基础碎片化教学w3cschool 菜鸟教程 系统教学百度前端技术学院HTML Tuto...

  • 语义化标签,和类名说再见

    百度前端技术学院学习笔记 由于在第一阶段的任务一中,也就是编写页面结构中较多的使用了HTML5规范中新增的“语义化...

网友评论

      本文标题:百度前端学院task3笔记

      本文链接:https://www.haomeiwen.com/subject/ljhzpttx.html