divcss如何布局左邊固定右邊自適應的?

2017-03-10 1515 4 編輯:深圳網站建設 來源:互聯網

原理:通過設置一個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>

原理:通過設置一個margin-le.jpg

專業的網站建設公司,深正互聯,如您有網站營銷需求,請您關注我們,或者致電13828884598

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾 力港官网捕鱼来了 不是彩票的兼职赚钱 中大奖彩票群 想用手机赚钱的进 捕鱼达人2无限金币 捕鱼王小游戏 美国可以赚钱游戏生命 天天海南麻将安装 新兴产业赚钱项目 彩77彩票苹果 什么诈骗最赚钱 长虹彩票网址 赚钱铁耙 捕鱼游戏赢现金 微信里招打字员真赚钱 经典街机电玩捕鱼游戏