web前端研究之布局：先看效果图，最无脑的差不多布局。有可能还会被面试问柳三变道嘿嘿哈。
一看也没什么特别之处，只是左边特殊，右边自适应，就这么无脑。
原理：通过设置一个margin-left;或者margin-right就应该搞定。数学差方法有很多，这次就只讲解这种设置margin的。
<!doctype html>
<html>
<head>
<meta chart=”UTF-8″>
<title>Document</title>
<style>
body{
margin:0;
padding:0;
}
#wrap {
overflow: hidden; *zoom: 1;
}
#content ,#side洗濯造句bar {
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:5感悟母爱0px;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>
超级无脑，如果你还有更加好的方法，欢迎前来投稿交流。只为学习再多，技术更上一层楼，早日升职加薪，赢取白富美，走上人的一生巅峰。
本文发布于:2023-03-31 07:03:15，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/816157a6a43711fc064c031e79a51fc0.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：css左边固定右边自适应（css自适应布局方法）.doc
本文 PDF 下载地址：css左边固定右边自适应（css自适应布局方法）.pdf
| 留言与评论（共有 0 条评论） |
