海诗网 css左边固定右边自适应(css自适应布局方法)

css左边固定右边自适应(css自适应布局方法)

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.hallse.com/n/5426.html

真空玉米用微波炉加热要加水吗(真空玉米用微波炉加热会爆炸吗)

中古包买了会不会不好(中古包买了还可以再转手吗)

发表回复

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 3587015498@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部