实现一个两栏布局,左侧占30%宽度,右侧占70%宽度
首先固定一个HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ife</title>
<link rel="stylesheet" type="text/css" href="ife.css">
</head>
<body>
<div class="wrap">
<div class="left" style="background-color:red ; height: 200px; text-align: center; line-height:200px ;">
两栏布局左侧</div>
<div class="right" style="background-color: green; height: 200px;
text-align: center;
line-height: 200px;">两栏布局右侧</div>
</div>
</body>
</html>
position方法
.wrap{
position: relative;
}
.left{
position: absolute;
left: 0;
top: 0;
width: 30%;
}
.right{
position: absolute;
right: 0;
width: 70%;
}
float来实现
/* .wrap{
overflow: hidden;
} */
.left{
width: 30%; /*这个有一点迷惑,只需要把左边的快设置成30%,左浮动,右边的默认宽度为整个行*/
float: left;
}
.wrap{
display: flex;
}
.left{
flex: 1 30%;
}
.right{
flex: 1 70%;
}
实现一个两栏布局,左侧固定宽度右侧根据浏览器宽度自适应变化
.wrap{
overflow: hidden;
}
.left{
float: left;
width: 400px;
}
.right{
float: left;
width: calc(100% - 400px); /* css3中的calc函数,这里的意思是设置宽度比100%的宽度少20px */
}
position
.wrap{
position: relative;
}
.left{
position: absolute;
top: 0px;
left: 0px;
width: 200px;
}
.right{
position: absolute;
right: 0;
width: calc(100% - 200px);
}
flex:
.wrap{
display: flex;
}
.left{
width: 200px;
}
.right{
width: calc(100% - 200px);
}
右侧固定,左侧随浏览器变化
float
.wrap{
overflow: hidden;
}
.left{
float: left;
width: calc(100% - 200px);
}
.right{
float: left;
width: 200px;
}
position
.wrap{
overflow: auto;
}
.left{
position: absolute;
left: 0;
width: calc(100% - 200px);
}
.right{
position: absolute;
right: 0px;
width: 200px;
}
flex
.wrap{
display: flex;
}
.left{
width: calc(100% - 200px);
}
.right{
width: 200px;
}
实现一个三栏布局,左侧固定宽度,右侧固定宽度,中间部分宽度随浏览器宽度变化而自适应变化
float
.wrap{
/* overflow: hidden; */
}
.left{
float: left;
width: 200px;
}
.middle{
float: left;
width: calc(100% - 400px);
}
.right{
float: left;
width: 200px;
}
position
.wrap{
position: relative;
}
.left{
position: absolute;
left: 0;
width: 200px;
}
.middle{
position: absolute;
width: calc(100% - 400px);
left: 200px;
}
.right{
position: absolute;
right: 0px;
width: 200px;
}
flex
.wrap{
display: flex;
}
.left{
width: 200px;
}
.middle{
width: calc(100% - 400px);
}
.right{
flex: 1;
min-width: 200px;
}
写一个静态简单页面
HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿写页面</title>
<link rel="stylesheet" type="text/css" href="仿写页面.css">
</head>
<body>
<header>
<div class="header">
<logo>logo</logo>
<nav>
<ul>
<li>
<a href="#">github</a>
<a href="#">register</a>
<a href="#">login</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="banner">
<div class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<div class="wrap1">
<ul class="home">
<li>home</li>
<li>profile</li>
<li>about</li>
</ul>
</div>
<hr>
<main>
<ul class="top">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="mid">
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul class="bottom">
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</main>
<footer>
<div class="text">@2020 ife baidu.com</div>
<text style="position: absolute; right:5%; color: white;bottom: 5%;">http://blog.csdn</text>
</footer>
</body>
</html>
css部分
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
background-color: rgb(32,32,32);
height: 60px;
}
.header{
overflow: auto;
width: 960px;
height: 100px;
margin: 0 auto;
}
logo{
color: white;
font-size: 20px;
font-weight: bold;
float: left;
line-height: 60px;
}
nav{
float: right;
}
a{
color: white;
}
.banner{
background-color:yellowgreen;
height: 200px;
width: 100%;
margin: 0px;
}
.wrap{
height: 100%;
position: relative;
width: 960px;
overflow: auto;
margin: 0px auto;
}
.banner ul{
position: absolute;
right: 0px;
bottom: 10px;
}
.banner ul li{
line-height: 50px;
text-align: center;
width: 50px;
height: 50px;
background-color: white;
display: inline-block;
}
.wrap1{
height: 60px;
position: relative;
width: 960px;
/* background: red; */
/* overflow: auto; */
margin: 0px auto;
}
.home{
/* display: table; */
position: absolute;
left: 1px;
word-spacing: -1em;
}
.home li{
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin-top: 5px;
font-weight: bold;
text-align: center;
border: 1px solid gainsboro;
line-height: 50px;
height: 50px;
width: 100px;
display: inline-block;
}
hr{
margin-top: -4px;
border: none;
height: 1px;
background-color: gainsboro;
}
main{
margin: 0 auto;
width: 960px;
}
main li{
text-align: center;
display: block;
border: 1px solid black;
padding: 80px;
margin: 4px;
}
.top{
display: flex;
}
.mid{
display: flex;
}
.bottom{
display: flex;
}
.top li{
flex: 1;
}
.mid li{
flex: 1;
}
.bottom li{
flex: 1;
}
footer{
position: relative;
margin-top: 20px;
background-color: rgb(32,32,32);
width: 100%;
height: 40px;
}
.text{
padding-top: 20px;
text-align: center;
color: white;
}
记录完成!!