写在前面

在面试的时候遇到这样一个笔试题，使用div+css布局一个三行两列的页面。这里主要考察的是css中postion的具体用法。详细信息可参考我这篇文章：

[HTML/CSS]说说position

代码

闲来无事，就自己动手实现了一下，代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <title>首页</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         div {

             border: 1px solid red;

         }

         /*整个容器*/

         #main {

             position: relative;

             height: 768px;

         }

         /*头部*/

         #head {

             position: absolute;

             height: 10%;

             width: 100%;

         }

         /*左部*/

         #left {

             width: 15%;

             position: absolute;

             height: 80%;

             top: 10%;

         }

         /*内容部分*/

         #content {

             position: absolute;

             top: 10%;

             left: 15%;

             width: 85%;

             height: 80%;

             border-bottom: -1px;

         }

         /*下部*/

         #foot {

             position: absolute;

             width: 100%;

             height: 9.5%;

             bottom: 0px;

         }

     </style>

 </head>

 <body>

     <div id="main">

         <div id="head">

         </div>

         <div id="left">

         </div>

         <div id="content"></div>

         <div id="foot">111111</div>

     </div>

 </body>

 </html>

结果

总结

考察的知识点就是css中的postion，在笔试的时候，不是非得动笔写出来才行，列出要点，也一样。

div+css经典三行两列布局的更多相关文章

  1. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

  2. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  3. DIV+CSS 网页布局之：两列布局

    1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...

  4. CSS布局——横向两列布局

    1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...

  5. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  6. 两列布局，读《css那些事儿》

    两列布局: 1.两列定宽: 要点:float.width固定. :after清除浮动. 前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象. <!DOCTYPE html> ...

  7. css两列布局之基于BFC规则实现

    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

  8. CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

    最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 S ...

  9. 慕课笔记利用css进行布局【两列布局】

    <html> <head> <title>两列布局</title> <style type="text/css"> bo ...

随机推荐

  1. 3 - JVM随笔分类（gc.log ，VisualVM插件介绍，VisualVM远程连接方式介绍）

    gc.log 354.2 KB 对于对应用的监控上可以使用Jdk自带的VisualVM来做可视化监控,可以查看当前服务应用进程的堆大小的走向,以及类的加载数量等,除此之外,VisualVM可以支持很多 ...

  2. 55、android app借助友盟实现微信授权登录

    一.去微信开放平台的管理中心申请移动设备的审核(需进行开发者资质认证,每年300元) 1.获取应用的签名 2.在微信开放平台申请移动应用 两个注意点:①签名要填对 ②应用的包名要写对(tips: co ...

  3. 文件处理之复杂，在于内置方法-----python

    抛砖引玉: 文件是我们储存信息的地方,我们经常要对文件进行读.写.删除等的操作,在Python中,我们可用Python提供的函数和方法方便地操作文件. ************************ ...

  4. 数组线性表ArrayList 和链表类LinkedList

    数组线性表类ArrayList 和链表类LinkedList 是实现List接口的两个具体类.ArrayList 数组储存元素,这个数组是动态创建的.如果元素个数超过了数组的容量,就创建一个更大的新数 ...

  5. sql 使用存储过程传递列名或表名作为参数

    原网址: http://www.cnblogs.com/85538649/archive/2011/09/23/2186155.html alter procedure Proc_UpdateDate ...

  6. Spring整合Hibernate与Struts

    整合S2SH 一.导入jar包 Spring jar包 Hibernate jar包 Struts2 jar包 以上就是整合需要的所有jar包,当然其中有重复的包,(对比之后去掉版本低的就可以了,还有 ...

  7. JDBC 学习笔记（十）—— 使用 JDBC 搭建一个简易的 ORM 框架

    1. 数据映射 当我们获取到 ResultSet 之后,显然这个不是我们想要的数据结构. 数据库中的每一个表,在 Java 代码中,一定会有一个类与之对应,例如: package com.gerrar ...

  8. HTML5与HTML4的比较

    HHTML5封装一些标签和属性,方便了开发. <form> <p> <label>Username:<input name="search" ...

  9. JS 中如何输出空格

    在写JS代码的时候,大家可以会发现这样现象: document.write(" 1 2 3 "); 结果: 无论在输出的内容中什么位置有多少个空格,显示的结果好像只有一个空格. 这 ...

  10. 洛谷P2168 荷马史诗 [NOI2015]

    题目描述 追逐影子的人,自己就是影子 ——荷马 Allison 最近迷上了文学.她喜欢在一个慵懒的午后,细细地品上一杯卡布奇诺,静静地阅读她爱不释手的<荷马史诗>.但是由<奥德赛&g ...