阿里的一道笔试题

最新推荐文章于 2021-02-28 08:02:04 发布

zbhzbn

最新推荐文章于 2021-02-28 08:02:04 发布

阅读量299

点赞数

分类专栏：网页布局文章标签：前端布局

本文链接：https://blog.csdn.net/zbhzbn/article/details/47752245

版权

网页布局专栏收录该内容

6 篇文章 0 订阅

订阅专栏

题目：实现如下图布局，核心区域左侧自适应，右侧固度宽度200px。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        input{ padding: 0; margin:0; text-align: right;}
        .header{width: 100%; height: 100px; border: 1px solid darkgreen; position: relative;}
        .logo{ width: 80px; height: 80px; margin: 9px; border: 1px solid red;}
        .inputTxt{ float: left; position: absolute; bottom: 10px; right: 10px;}
        .main{ width: 100%; height: 500px; margin: 10px 0;  }
        .content{ height: 498px;  margin-right: 210px; border: 1px solid blue;}
        .aside{  width: 200px; border: 1px solid red; position: absolute; top:120px; right: 10px; }
        .footer{ width: 100%; border: 1px solid gray; text-align: center;}
    </style>
</head>
<body>
<div class="header">
    <div class="logo">Logo</div>
    <div class="inputTxt">
        <input type="text" value="用户名" >
    </div>
</div>
<div class="main">
    <div class="content">content-宽度自适应</div>
    <div class="aside">aside-定宽200px</div>
</div>
<div class="footer">footer</div>

</body>
</html>

虽然功能实现了，但觉得自己做这个好慢，我是用绝对定位处理那个aside的。都是一点点调出来的，效率不高。

结果如下图：

我觉得实现效果并不理想啊。

用我今天后面学的盒布局实现下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        input{ padding: 0; margin:0; text-align: right;}
        .header{width: 100%; height: 100px; border: 3px solid darkgreen; position: relative;}
        .logo{ width: 80px; height: 80px; margin: 9px; border: 3px solid red;}
        .inputTxt{ position: absolute; bottom: 10px; right: 10px;}
        .main{ width: 100%; height: 500px; margin: 10px 0; display: -webkit-box;  }
        .content{ height: 498px;  margin-right: 30px; border: 3px solid blue; -webkit-box-flex: 1;}
        /*利用弹性盒布局有时候尺寸不是太精确，这里我加了一个margin-right：-5px; 不知道为什么它不跟右端对齐*/
        .aside{  width: 200px; border: 3px solid red; height: 20px; -webkit-box-flex: 0; margin-right:-5px;}
        .footer{ width: 100%; border: 3px solid gray; text-align: center;}
    </style>
</head>
<body>
<div class="header">
    <div class="logo">Logo</div>
    <div class="inputTxt">
        <input type="text" value="用户名" >
    </div>
</div>
<div class="main">
    <div class="content">content-宽度自适应</div>
    <div class="aside">aside-定宽200px</div>
</div>
<div class="footer">footer</div>

</body>
</html>

效果如下图

感觉这个比上一个更好用些，记住这两个属性 display: -webkit-box; -webkit-box-flex: value;

zbhzbn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阿里的一道笔试题

题目：实现如下图布局，核心区域左侧自适应，右侧固度宽度200px。代码如下： input{ padding: 0; margin:0; text-align: right;} .header{width: 100%; height: 100px; border: 1px solid darkgreen; positi
复制链接

扫一扫