百度前端学院第七到八天

最新推荐文章于 2020-11-19 17:12:12 发布

qq_40891002

最新推荐文章于 2020-11-19 17:12:12 发布

阅读量105

点赞数

分类专栏： css 文章标签： html css flex css3 html5

本文链接：https://blog.csdn.net/qq_40891002/article/details/105898857

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

实现一个两栏布局，左侧占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;
	}

记录完成！！

qq_40891002

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度前端学院第七到八天

实现一个两栏布局，左侧占30%宽度，右侧占70%宽度首先固定一个HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ife</title> <link rel="stylesheet" type="text/css" hr...
复制链接

扫一扫

专栏目录