web前端开发之布局:先看效果图,最简单的左右布局。有可能还会被面试问道哈哈哈。
一看也没什么特别之处,就是左边固定,右边自适应,就这么简单。
原理:通过设置一个margin-left;或者margin-right就可以搞定。方法有很多,这次就只介绍这种设置margin的。
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>
body{
margin:0;
padding:0;
}
#wrap {
overflow: hidden; *zoom: 1;
}
#content ,#sidebar {
background-color: #eee;
}
#sidebar {
float: left; width: 300px;
background-color:pink;
position:fixed;
top:50px;
left:0;
}
#content {
margin-left: 310px;
height:1000px;
background-color:#e456aa;
margin-top:50px;
}
#footer {
background-color: #f00;
color:#fff;
margin-top: 1em;
}
</style>
</head>
<body>
<div id=”wrap”>
<div id=”sidebar” id=”content” id=”footer”>这是尾部,想写什么就写什么,这是一个神奇的地方</div>
</body>
</html>
非常简单,如果你还有更好的方法,欢迎前来投稿交流。只为学习更多,技术更上一层楼,早日升职加薪,赢取白富美,走上人生巅峰。