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; 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
>
|
非常簡單，如果你還有更好的方法，歡迎前來投稿交流。只為學習更多，技術更上一層樓，早日升職加薪，贏取白富美，走上人生巔峰。學習更多前端技術就在：web前端開發視大全
請記住我們的網站：http://www.qianduanshiping.com 微信號：jingfeng18