【CSS 20】website layout 网站布局页眉导航栏列布局不相等栏页脚

Zanebla

于 2023-07-06 09:31:26 发布

阅读量785

点赞数 1

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/m0_62629457/article/details/131564762

版权

CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

CSS

- - website layout 网站布局

website layout 网站布局

header 页眉
页眉（header）通常位于网站顶部（或顶部导航菜单的正下方）
通常包含徽标（logo）或网站名称

.header {
	background-color: #f1f1f1;
	text-align: center;
	padding: 20px;
}

navbar 导航栏
导航栏包含链接列表，以帮助访问者浏览您的网站

/* navbar 容器 */
.topnav {
	overflow: hidden;
	background-color: #333;
}

/* navbar 链接 */
.topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px; /*padding很重要，没有padding内容会很小很挤很不好看，内边距可以理解为把内容撑大*/
	text-decoration: none;
}

/* 链接 - 悬停改变颜色 */
.topnav a:hover {
	background-color: #ddd;
	color: black;
}

内容
使用哪种布局通常取决于您的目标用户
最常见的布局是以下布局之一（或将它们组合在一起）

1-列布局（通常用于移动浏览器）
2-列布局（通常用于平板电脑和笔记本电脑）
3-列布局（仅用于台式机）

<!--
提示：如需创建 2 列布局，请将宽度更改为 50％
如需创建 4 列布局，请使用 25％

创建列布局的一种更现代的方法是使用 CSS Flexbox
Internet Explorer 10 和更早版本不支持它
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS网站布局</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
	box-sizing: border-box;
}

body {
	margin: 0; /*消除那一点点的网页内容间隙*/
}

.header {
	background-color: #333;
	padding: 10px;
	text-align: center;
}

.topnav {
	overflow: hidden;
	background-color: #333;
}

.topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

.topnav a:hover {
	background-color: #ddd;
	color: black;
}

/* 创建并排的三个非等列 */
.column {
	float: left;
	width: 33.33%;
	padding: 15px;
}

/* 清除列之后的浮动 */
.row:after {
	content: "";
	display: table;
	clear: both;
}

/*响应式布局 - 创建堆叠而非并排的三列*/
@media screen and (max-width:600px) {
	.column {
		width: 100%;
	}
}
</style>
</head>
<body>

<div class="header">
	<h1>Header</h1>
	<p>调整浏览器窗口大小来查看响应效果</p>
</div>

<div class="topnav">
	<a href="#">Link1</a>
	<a href="#">Link2</a>
	<a href="#">Link3</a>
</div>

<div class="row">
	<div class="column">
		<h2>Column</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
	</div>

	<div class="column">
		<h2>Column</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
	</div>

	<div class="column">
		<h2>Column</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
	</div>
</div>

</body>
</html>

不相等栏
主要内容（main content）是您网站上最大、最重要的部分
列宽不相等的情况很常见，因为大部分空间都为主内容保留
附属内容（如果有）通常用作替代导航或指定与主要内容有关的信息
您可以随意更改宽度，只要记住它的总和应为 100％

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 网站布局</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* 设置页眉的样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* 设置顶部导航栏的样式 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* 设置 topnav 链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* 创建并排的三个不相等的列 */
.column {
  float: left;
  padding: 10px;
}

/* 左右列 */
.column.side {
  width: 25%;
}

/* 中间列 */
.column.middle {
  width: 50%;
}

/* 清除列之后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 响应式布局 - 创建堆叠而非并排的三列 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
	<h1>Header</h1>
	<p>调整窗口大小查看响应效果</p>
</div>

<div class="topnav">
	<a href="#">Link1</a>
	<a href="#">Link2</a>
	<a href="#">Link2</a>
</div>

<div class="row">
	<div class="column side">
		<h2>Side</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
	</div>

	<div class="column middle">
    <h2>Main Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
	
	<div class="column side">
		<h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
   </div>
</div>

</body>
</html>

页脚
页脚位于页面底部
通常包含诸如版权和联系方式之类的信息

<style>
.footer {
	background-color: #f1f1f1;
	padding: 10px;
	text-align: center;
}
</style>
<body>
<div class="footer">
	<p>footer</p>
</div>

</body>