50道前端面试题(含答案) 拿高薪查漏补缺

最新推荐文章于 2024-06-15 03:51:35 发布

鸭绒

最新推荐文章于 2024-06-15 03:51:35 发布

阅读量1.6k

点赞数 1

分类专栏：前端面试文章标签：前端 html5 css3 html vue.js

本文链接：https://blog.csdn.net/weixin_43334673/article/details/108412527

版权

文章目录

1.根据下面效果设计页面：(腾讯面试稿)

在这里插入图片描述
两点要求：

自适应宽度，左右两栏固定宽度，中间栏优先加载；
要考虑换肤；

参考答案：

自适应宽度，左右两栏固定宽度，中间栏优先加载，可以采用双飞翼布局。(中间栏如何实现优先加载：HTML是由上往下加载的，因此将中间栏地html结构写在左右两栏前面即可。再利用布局实现左、中、右排布)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>每日一道</title>
  </head>
  <style>
    * {
    
      margin: 0px;
      padding: 0px;
    }

    * {
    
      margin: 0;
      padding: 0px;
    }
    .header {
    
      background: #666;
      text-align: center;
    }
    .body {
    
      overflow: hidden;
      *zoom: 1;
    }
    .container {
    
      margin-top: 500px;
    }
    .container .main-2 {
    
      float: left;
      width: 100%;
      margin-bottom: -3000px;
      padding-bottom: 3000px;
      background: #f90;
    }
    .container .main-container {
    
      margin: 0 200px 0 150px;
    }
    .container .left {
    
      float: left;
      margin-left: -100%;
      width: 150px;
      background: #6c0;
      margin-bottom: -3000px;
      padding-bottom: 3000px;
    }
    .container .right {
    
      float: left;
      margin-left: -200px;
      width: 200px;
      background: #f9f;
      margin-bottom: -3000px;
      padding-bottom: 3000px;
    }
    .footer {
    
      background: #666;
      text-align: center;
    }
  </style>
  <body>
    <div class="container">
      <div class="header">Header</div>
      <div class="body">
        <div class="main-2">
          <div class="main-container">
            <p>main-wrap</p>
            <p>main-wrap</p>
          </div>
        </div>
        <div class="left">
          <p>sub&l

最低0.47元/天解锁文章

鸭绒

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
50道前端面试题(含答案) 拿高薪查漏补缺

1.根据下面效果设计页面：(腾讯面试稿)两点要求：自适应宽度，左右两栏固定宽度，中间栏优先加载；要考虑换肤；参考答案：自适应宽度，左右两栏固定宽度，中间栏优先加载，可以采用双飞翼布局。(中间栏如何实现优先加载：HTML是由上往下加载的，因此将中间栏地html结构写在左右两栏前面即可。再利用布局实现左、中、右排布)<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"
复制链接

扫一扫