1. 首頁 > 生活百科 > >

css自適應布局方法 css左邊固定右邊自適應

生活百科

css左邊固定右邊自適應，css自適應布局方法,金華號帶你了解相關信息 。
web前端研究之布局：先看效果圖，最無腦的差不多布局 。有可能還會被面試問道嘿嘿哈 。

css自適應布局方法 css左邊固定右邊自適應

文章插圖
一看也沒什么特別之處，只是左邊特殊，右邊自適應，就這么無腦 。
原理：通過設置一個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>
【css自適應布局方法 css左邊固定右邊自適應】<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>
超級無腦，如果你還有更加好的方法，歡迎前來投稿交流 。只為學習再多，技術更上一層樓，早日升職加薪，贏取白富美，走上人的一生巔峰 。

    推薦閱讀