CSS 网站布局
-
网站布局
网站通常分为标题,菜单,内容和页脚:
有大量不同的布局设计可供选择。但是,上面的结构是最常见的结构之一,我们将在本教程中仔细研究它。
-
页眉(header)
标题通常位于网站的顶部(或顶部导航菜单的右下方)。它通常包含徽标或网站名称:
尝试一下.header { background-color: #F1F1F1; text-align: center; padding: 20px; }
-
导航栏
导航栏包含一系列链接,可帮助访问者浏览您的网站:
尝试一下/* The navbar container */ .topnav { overflow: hidden; background-color: #333; } /* Navbar links */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Links - change color on hover */ .topnav a:hover { background-color: #ddd; color: black; }
-
内容
本节中的布局通常取决于目标用户。最常见的布局是以下一个(或组合它们):
- 1列(通常用于移动浏览器)
- 2列(通常用于平板电脑和笔记本电脑)
- 3列布局(仅用于桌面)
我们将创建一个3列布局,并在较小的屏幕上将其更改为1列布局:
尝试一下/* 创建三个相互浮动的相等列 */ .column { float: left; width: 33.33%; } /* 清除列后的浮动 */ .row:after { content: ""; display: table; clear: both; } /* 响应式布局——让三列堆叠在一起,而不是在较小的屏幕上相邻(600px宽或更小) */ @media screen and (max-width: 600px) { .column { width: 100%; } }
提示:要创建2列布局,请将宽度更改为50%。要创建4列布局,请使用25%等。
提示:您是否想知道@media规则是如何工作的?在我们的CSS媒体查询章节中阅读更多相关信息。
提示:创建列布局的一种更现代的方法是使用CSS Flexbox。但是,Internet Explorer 10和早期版本不支持它。如果您需要IE6-10支持,请使用float(如上所示)。 -
不相等的列
主要内容是您网站中最重要和最重要的部分。通常具有不相等的列宽,因此大部分空间是为主要内容保留的。副内容(如果有的话)通常用作替代导航或指定与主要内容相关的信息。根据需要更改宽度,只记住它总共应加起来100%:
尝试一下.column { float: left; } /* Left and right column */ .column.side { width: 25%; } /* Middle column */ .column.middle { width: 50%; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; } }
-
页脚
页脚位于页面底部。它通常包含版权和联系信息等信息:
尝试一下.footer { background-color: #F1F1F1; text-align: center; padding: 10px; }
-
响应式网站布局
通过使用上面的一些CSS代码,我们创建了一个响应式网站布局,根据屏幕宽度在两列和全宽列之间变化:
尝试一下* { box-sizing: border-box; } body { font-family: Arial; padding: 10px; background: #f1f1f1; }
-
相关页面
HTML教程:HTML样式