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 { #eee; } #sidebar { float: left; 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 style="100%;height:50px;line-height:50px;background-color:#ccc;position:fixed;top:0;left:0;">这是头部:web前端开发大全</div> <div id="wrap"> <div id="sidebar" style="height:600px;">固定宽度区：微信号：jingfeng18</div> <div id="content" style="height:1340px;">自适应区</div> </div> <div id="footer">这是尾部，想写什么就写什么，这是一个神奇的地方</div> </body> </html> |
非常简单，如果你还有更好的方法，欢迎前来投稿交流。只为学习更多，技术更上一层楼，早日升职加薪，赢取白富美，走上人生巅峰。学习更多前端技术就在：web前端开发视大全
请记住我们的网站：http://www.qianduanshiping.com 微信号：jingfeng18