div+css经典三行两列布局

写在前面

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

[HTML/CSS]说说position

代码

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

 1 <!DOCTYPE html>
 2
 3 <html>
 4 <head>
 5     <meta name="viewport" content="width=device-width" />
 6     <title>首页</title>
 7     <style>
 8         * { 9             margin: 0;
10             padding: 0;
11         }
12
13         div {14             border: 1px solid red;
15         }
16         /*整个容器*/
17         #main {18             position: relative;
19             height: 768px;
20         }
21         /*头部*/
22         #head {23             position: absolute;
24             height: 10%;
25             width: 100%;
26         }
27         /*左部*/
28         #left {29             width: 15%;
30             position: absolute;
31             height: 80%;
32             top: 10%;
33         }
34         /*内容部分*/
35         #content {36             position: absolute;
37             top: 10%;
38             left: 15%;
39             width: 85%;
40             height: 80%;
41             border-bottom: -1px;
42         }
43         /*下部*/
44         #foot {45             position: absolute;
46             width: 100%;
47             height: 9.5%;
48             bottom: 0px;
49         }
50     </style>
51 </head>
52 <body>
53     <div id="main">
54         <div id="head">
55
56         </div>
57         <div id="left">
58
59         </div>
60         <div id="content"></div>
61         <div id="foot">111111</div>
62
63     </div>
64 </body>
65 </html>

结果

总结

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

转载于:https://www.cnblogs.com/wolf-sun/p/4326059.html

div+css经典三行两列布局相关推荐

CSS布局教程：用DIV CSS实现国内经典式三行两列布局-CSS布局实例
我们碰到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等.这样的形式是国内经典式的布局,我们这里不对 ...
金典 DIV+CSS 3行2列布局详解--企业网站通用的基本布局详解
我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等.这样的形式是国内经典式的布局,我们这里不对 ...
Div+CSS构建三行三列框架
要构建的框架如图所示: 方法一:使用div的浮动窗口属性显然,页面布局到下是三层结构,中间的div包含三个小div:因为div是块元素,占用文档流的一行空间,要使一行中出现多个div,需要为div设 ...
DIV+CSS三行两列经典布局
师阿捷2004年发布在<网页设计师>上的,一个非常经典的布局,在IE.Mozilla和Opera浏览器中均可以实现居中和高度自适应.完整代码如下(在阿捷的代码基础上作了部分修改): < ...
CSS布局代码:两列布局实例
CSS两列布局,右侧固定,左侧自适应宽度 <div style="width:90%; margin:0 auto;"> <div style="wid ...
CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...
html5+css 两列布局
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
CSS布局之两列布局
两列布局两列布局一般情况下是指定宽与自适应布局,两列中左列是确定的宽度,右列是自动填满剩余所有空间的一种布局效果: 左列自适应, 右列定宽 float + margin 属性实现: float + ...

div+css经典三行两列布局

写在前面

代码

总结

div+css经典三行两列布局相关推荐

最新文章

热门文章