css左边固定右边自适应(CSS实现自适应布局)

   发布日期:2024-05-07 23:21:12     手机:https://m.qqhuangye.com/yule/tag/49461.html     违规举报

css左边固定右边自适应(CSS实现自适应布局)

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 {

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>

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

 
 
本文地址:https://www.qqhuangye.com/yule/tag/49461.html,转载请注明出处。"error":400,"message":"over quota","url:"https://www.qqhuangye.com/yule/tag/49461.html
 
更多>同类娱乐

推荐图文
推荐娱乐
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  违规举报  |  蜀ICP备18010318号-2  |  SiteMaps  |  BaiDuNews 微尚时代网站地图微尚时代百度地图圈圈荒野网站地图圈圈荒野百度地图新新物语网站地图新新物语百度地图淘购网站地图淘购百度地图君子闲话网站地图君子闲话百度地图
Processed in 0.375 second(s), 8 queries, Memory 0.54 M