有可能还会被面试问道哈哈哈。
一看也没什么特别之处，就是左边固定，右边自适应，就这么简单。
原理：通过设置一个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 style=”width: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>非常简单，如果你还有更好的方法，欢迎前来投稿交流。
只为学习更多，技术更上一层楼，早日升职加薪，赢取白富美，走上人生巅峰。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）