前端工程师面试题之页面布局

最新推荐文章于 2024-04-02 07:17:48 发布

半步浮生

最新推荐文章于 2024-04-02 07:17:48 发布

阅读量309

点赞数

文章标签： html css 布局

本文链接：https://blog.csdn.net/qq_36245314/article/details/102986718

版权

html，css实现页面布局

我们去面试前端工程师这个岗位上的时候，很大的概率会遇到页面布局的面试题

我们去面试前端工程师这个岗位上的时候，很大的概率会遇到页面布局的面试题

下面是我看到过的一个布局的面试题
需要实现的效果图如下：

利用html和css实现布局

首先来分析一下整体的布局

它分为上中下三个部分那么我们可以创建3个div来实现，其次我们可以看到在中间部分又分为左中右三个部分，同样利用三个div来完成,HTML的布局如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>布局</title>
</head>
<body>
<div id="header"></div>
<div id="conent">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>
<div id="footer"></div>
</body>
</html>

难点在于我们需要利用css样式来调整达到我们的需求

第三种方法和第四种方法：这里用到的是ES6的知识，是属于新的方法

css的布局如下：

* {
            margin: 0;
            padding: 0;
        }
        #header {
            height: 100px;
            width: 100%;
            background-color: #7ecef3;
        }
        /*使用absolute 单位实现高度自适应*/
        #conent {
            width: 100%;
            position: absolute;
            display: flex;
            top: 100px;
            bottom: 100px;
        }
        #left {
            width: 200px;
            /*height: 200px;*/
            background-color: #89c997;
        }
        #right {
            width: 200px;
            /*height: 200px;*/
            background-color: #89c997;
        }
        #middle {
            flex: 1;
            background-color: #53b9be;
        }
        #footer {
            height: 100px;
            width: 100%;
            position: absolute;
            bottom: 0;
            background-color: #7ecef3;
        }

最后将css文件引入html文件中去

<link rel="stylesheet" href="buju.css">

这里要提点一下，我们在写代码的时候尽量使用这个外部引入的方式，至于原因，经历了社会的毒打你就懂了~

半步浮生

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端工程师面试题之页面布局

html，css实现页面布局我们去面试前端工程师这个岗位上的时候，很大的概率会遇到页面布局的面试题首先来分析一下整体的布局难点在于我们需要利用css样式来调整达到我们的需求第三种方法和第四种方法：这里用到的是ES6的知识，是属于新的方法我们去面试前端工程师这个岗位上的时候，很大的概率会遇到页面布局的面试题下面是我看到过的一个布局的面试题需要实现的效果图如下：首先来分析一下整体的布局它分...
复制链接

扫一扫