div+css经典三行两列布局
写在前面
在面试的时候遇到这样一个笔试题，使用div+css布局一个三行两列的页面。这里主要考察的是css中postion的具体用法。详细信息可参考我这篇文章：
代码
闲来无事，就自己动手实现了一下，代码如下：
<!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经典三行两列布局的更多相关文章
- css之页面两列布局
两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...
- css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- DIV+CSS 网页布局之：两列布局
1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...
- CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
- css两列布局，一边固定宽度，另一边自适应
<!DOCTYPE HTML><HTML> <head> <meta charset="utf-8" ...
- 两列布局，读《css那些事儿》
两列布局: 1.两列定宽: 要点:float.width固定. :after清除浮动. 前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象. <!DOCTYPE html> ...
- css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...
- CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化 个人总结出如下三种实现思路: 通过绝对定位实现 S ...
- 慕课笔记利用css进行布局【两列布局】
<html> <head> <title>两列布局</title> <style type="text/css"> bo ...
随机推荐
- phpstorm将本地代码传递到远程服务器
由于对vim不太熟悉,效率比较低,作为过渡阶段,采用本地编写代码,然后上传到开发机上,进行调试 前提是服务器开启了ftp服务:http://www.cnblogs.com/redirect/p/693 ...
- 申请社交平台appkey详细教程
申请社交平台appkey详细教程 大部分app都需要实现分享到微信.微博等社交平台的功能,但是在各个平台上申请appkey是一件很繁琐的事情.现在来分享一个申请社交平台appkey详细教程,在开发过程 ...
- 移动web前端开发小结
注意:Chrome模拟手机的显示的界面是有误差的,强烈建议一定要在真机测试自己的移动端页面(以移动端页面为准). 1.页面高度渲染错误,页面的高度是否包含了导航,(华为手机就是偏偏有底部菜单) 设置窗 ...
- 第九届极客大挑战 部分WP
CODE 和0xpoker分0day 百度 取石子游戏. https://blog.csdn.net/qq_33765907/article/details/51174524 已经说得很详细了,慢慢来 ...
- 深入学习之mysql（二）表的操作
1.表:是数据库中的存储数据的基本单位,一个表包含若干个字段和值 2.创建表: CREATE TABLE 表名称 ( 字段名1 数据库类型1 [约束条件1], 字段名2 数据库类型2 [约束条件2], ...
- 【bzoj1041】[HAOI2008]圆上的整点 数论
题目描述 求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整数. 输入 只有一个正整数n,n<=2000 000 000 输出 整点个数 样例输入 4 样例输出 4 题解 数 ...
- 【bzoj3028】食物 数论+生成函数
题目描述 明明这次又要出去旅游了,和上次不同的是,他这次要去宇宙探险! 我们暂且不讨论他有多么NC,他又幻想了他应该带一些什么东西.理所当然的,你当然要帮他计算携带N件物品的方案数. 他这次又准备带一 ...
- windows通过NSF挂载centos目录
windows通过NSF挂载centos目录 来源: http://blog.csdn.net/u012955038/article/details/77151346 CentOS 配置 1.安装NF ...
- Codeforces Round #402 (Div. 2) D. String Game（二分答案水题）
D. String Game time limit per test 2 seconds memory limit per test 512 megabytes input standard inpu ...
- 省选算法学习-数据结构-splay
于是乎,在丧心病狂的noip2017结束之后,我们很快就要迎来更加丧心病狂的省选了-_-|| 所以从写完上一篇博客开始到现在我一直深陷数据结构和网络流的漩涡不能自拔 今天终于想起来写博客(只是懒吧.. ...