您的位置：首页 > Web前端

阿里的一道笔试题

2015-08-18 15:07 429 查看

题目：实现如下图布局，核心区域左侧自适应，右侧固度宽度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;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端布局

相关文章推荐

新的分享

章节导航

阿里的一道笔试题

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

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