css左边固定右边自适应（CSS实现自适应布局）

web前端开发之布局：先看效果图，最简单的左右布局。有可能还会被面试问道哈哈哈。

一看也没什么特别之处，就是左边固定，右边自适应，就这么简单。

原理：通过设置一个margin-left;或者margin-right就可以搞定。方法有很多，这次就只介绍这种设置margin的。

<!doctype html>

<html>

<head>

<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=”sidebar” style=”height:600px;”>固定宽度区：jingfeng18</div>

</div>

<div id=”footer”>这是尾部，想写什么就写什么，这是一个神奇的地方</div>

</body>

</html>

非常简单，如果你还有更好的方法，欢迎前来投稿交流。只为学习更多，技术更上一层楼，早日升职加薪，赢取白富美，走上人生巅峰。

点击展开全文

css左边固定右边自适应（CSS实现自适应布局）

相关推荐

css怎么用，divcss布局经典实例

网页设计css是什么意思（解析有关CSS代码所有知识）

简述什么是css以及css的作用（详解css概念和作用）

什么是css样式及作用（css特效样式知识解析）

css新特性有哪些（详细介绍css的9大新特性）

超出显示省略号兼容写法（css文字溢出变省略号）

发表评论