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，在笔试的时候，不是非得动笔写出来才行，列出要点，也一样。

 

posted @   wolfy  阅读(9964)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手