+86-13828884598

divcss如何布局左边固定右边自适应的?

37632017-03-10編輯:深圳网站建设來源:互联网 在線PDF預覽

原理:通过设置一个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

文章引用:https://www.hkhulian.com/infos/632.html
本文之圖文訊息香港網頁設計,香港App開發公司——香港互聯摘自互聯網,如有版權糾紛或違規,請聯繫我們刪除,谢谢。

上一篇: 暫無

下一篇: 暫無

感謝您訪問香港互聯,我們用13年的技術實力用心為您服務

高端網頁設計 • App定制開發 • 網路推廣服務

我們推薦直接電話溝通
+86-13828884598
9:00~18:30
+86-75536630177
szhulian@qq.com
香港互聯微信好友

掃碼微信加好友
請您標注微信說明

請提交您的需求

5 香港互聯微信好友
掃一掃,微信溝通