html模仿csdn的一种布局

最新推荐文章于 2022-10-07 20:15:35 发布

刘璐菲

最新推荐文章于 2022-10-07 20:15:35 发布

阅读量410

点赞数 2

分类专栏： Html学习笔记文章标签： html

本文链接：https://blog.csdn.net/qq_43077318/article/details/105775119

版权

Html学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一.简介

网页布局是设计网页的第一步，布局就是我们的大纲，有了布局在进行内容的填充。这样的设计方式是的网页设计更具有逻辑性。

二.布局图

在这里插入图片描述

三.代码

1.Html文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>My Portfolio Website</title>
		<link rel="stylesheet" type="text/css" href="./index.css"/>
	</head>
	<body>
		<div class="background">
			
			<nav class="navigation">
				导航条	
			</nav>
			
			<div class = "content_background">
				<div class="header">
					标题
				</div>
				
				<div class="content clearfix">
						<div class="left_navigation">
							左导航条
						</div>
						
						<div class = "articles">
							<div>
								内容1
							</div>
							<div>
								内容2
							</div>
							<div>
								内容3
							</div>
							<div>
								内容4
							</div>
							<div>
								内容5
							</div>
							<div>
								内容6
							</div>
						</div>
				</div>
				
			</div>
			
		</div>
		
	</body>
</html>

2.Css文档

body{
	margin: 0px;
	padding: 0px;

}
.background{
	margin: 0px;
	padding: 0px;
	border: 1px solid red;
	width: 100%;
	height: 100%;	
}
.navigation{
	
	width: 100%;
	height: 44px;
	/*测试*/
	border:1px solid red;
	
}

.content_background{
	margin-top: 0.5rem;
	margin-left: 10%;
	margin-right: 10%;
	padding: 0px;
	width: auto;
	height: 100%;
	/*测试*/
	border:1px solid red;
	
}

.header{
	margin: 0;
	padding-left: 1rem;
	padding-right: 1rem;
	border: 1px solid red;
	widht: 80%;
	height: 6.25rem;
}
.content{
	margin: 0px;
	padding: 0;
	width: 100%;
	height: 50rem;
	/*测试*/
	border:1px solid red;
	
}
.left_navigation{
	float: left;
	margin: 0px;
	padding: 0px;
	width: 20%;
	height: 100%;
	/*测试*/
	border:1px solid red;
}
.articles{
	margin-left: 0;
	margin-right: 0;
	float: left;
	height: 98%;
	width: 77%;
	padding-left: 2%;

	padding-top: 12px;
	padding-bottom: 0px;
	/*test*/
	border: 1px solid red;

}
.clearfix::after{
	content: "";
	display:block;
	height: 0px;
	clear: both;
}
.articles>div{
	border: 1px solid red;
	width: 100%;
	height: 119.6px;
	
}