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

这篇具有很好参考价值的文章主要介绍了【CSS 20】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>

页脚
页脚位于页面底部
通常包含诸如版权和联系方式之类的信息文章来源地址https://www.toymoban.com/news/detail-539724.html

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

</body>

到了这里,关于【CSS 20】website layout 网站布局 页眉 导航栏 列布局 不相等栏 页脚的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 弹性盒子布局 Flexbox Layout

    可以嵌套下去 1.display 属性 默认行排列 此时是 列拍 flex-direction属性——行布局 row 列布局:column flex-wrap 属性 折叠 flex-flow属性 包括 flex-direction 和flex-wrap flex-flow: row wrap 行排列 折叠 justify-content属性 元素在主轴上的对齐方式 左对齐 居中对齐 右对齐 两端对齐 拉手对齐 align

    2024年03月15日
    浏览(45)
  • Qt入门教程【Core篇】Layout布局(布局管理器、手动布局)

    😈 「CSDN主页」 :传送门 😈 「Bilibil首页」 :传送门 😈 「网易云课堂」 :传送门 😈 「CSDN学院」 :传送门 😈 「51CTO学院」 :传送门 😈 「本文的内容」 :Qt布局指南 😈 「动动你的小手」 : 点赞 👍 收藏 ⭐️ 评论 📝 界面开发首先要对整个界面进行布局,使窗体上

    2023年04月18日
    浏览(71)
  • HTML布局(HTML Layout)简介

    HTML布局(HTML Layout)简介 HTML布局(HTML Layout)是创建一个网站时需要考虑的情况,合理设计网页中内容的排列方式,让网页看起来更加合理、美观,能产生引人注目的视觉效果。页面布局一般包括: 标题:前端的一部分,用于页面顶部。header标签用于在网页中添加标题部分

    2024年02月08日
    浏览(51)
  • 【CocosCreator入门】CocosCreator组件 | Layout(布局)组件

            Cocos Creator 是一款流行的游戏开发引擎,具有丰富的组件和工具,其中的Layout组件是一种用于实现节点自适应布局的重要组件。它可以根据不同的布局方式,自动调整子节点的位置和大小,从而实现节点的自适应布局。 目录 一、组件介绍 二、组件属性 三、布局类

    2023年04月22日
    浏览(47)
  • Unity 网格布局控件-Grid Layout Group

    Unity 网格布局控件-Grid Layout Group是Unity中的UGUI控件,用于在 UI 中创建网格布局, 它的作用是:自动将子对象排列成网格,即我们可以通过该组件对子对象按行和列的形式排列,根据指定的约束条件自动调整它们的大小和位置。通常我们使用它创建具有规律排列的 UI 元素,如

    2024年02月04日
    浏览(48)
  • Qt6教程之二(1) 布局 Layouts

    若你的电脑还未安装Qt,那么请转至上篇文章 Qt-6下载安装教程 按照指导进行操作。 本篇所讲的内容为Qt布局,为了节省时间,所用项目也是使用上篇的hello world 。 那么什么是布局呢? 简单来说,布局就是有效组织屏幕上显示的各类资源的模板,如按钮、文本框、图片、视

    2024年02月08日
    浏览(32)
  • Flutter 笔记 | Flutter 核心原理(三)布局(Layout )过程

    Layout(布局)过程主要是确定每一个组件的布局信息(大小和位置),Flutter 的布局过程如下: 父节点向子节点传递约束(constraints)信息,限制子节点的最大和最小宽高。 子节点根据约束信息确定自己的大小(size)。 父节点根据特定布局规则(不同布局组件会有不同的布

    2024年02月09日
    浏览(86)
  • 设置layout布局嵌套路由格式正确但是看不见页面问题

    一定确保格式正确.试试重置component路径 children: [

    2024年02月13日
    浏览(53)
  • Solidity内存布局介绍 Layout in Memory and Storage

    Solidity reserves four 32-byte slots, with specific byte ranges (inclusive of endpoints) being used as follows: 0x00 - 0x3f (64 bytes): scratch space(暂存空间) for hashing methods  Hash方法的暂存空间. 0x40 - 0x5f (32 bytes): currently allocated memory size (aka. free memory pointer) 0x60 - 0x7f (32 bytes): zero slot Solidity保留了四个32字节的

    2024年02月16日
    浏览(44)
  • 【ArcGIS Pro二次开发】(50):布局(Layout)的基本操作

    ArcGIS Pro SDK中的布局(Layout)是用于创建和编辑打印布局的一组功能。 Layout是打印布局的容器,它可以包含多个元素,例如地图框、文本框、图例、比例尺等。 Layout中包含多种元素,比较重要的有:地图(MapFrameElement)、文本(TextElement)、图片(PictureElement)、图例(LegendElement)等。

    2024年02月16日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包