一栏式布局，也称为单栏布局，是网站设计中最为简单和常见的布局方式之一

Bol5261

已于 2024-02-24 18:52:51 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5(HyperText Markup) Bootstrap(Twitter Mark Jacob) JQuery(AJAX、HTML、CSS) 文章标签： html css js javascript bootstrap

于 2020-07-06 09:53:56 首次发布

本文链接：https://blog.youkuaiyun.com/blog_programb/article/details/107150653

一栏式布局是网站设计的基础，适用于内容简洁、重点突出的页面，如个人博客、作品集和简历网站。通过HTML和CSS实现，包含header、nav、main和footer等部分，易于定制和增强视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一栏式布局，也称为单栏布局，是网站设计中最为简单和常见的布局方式之一。在这种布局中，所有的内容都被放置在一个单一的列中，从上到下垂直排列。这种布局方式适用于内容较少、重点突出的个人网站，如个人博客、作品集、简历网站等。

HTML结构
一栏式布局的HTML结构相对简单，主要由一个主要的

容器包含所有的内容。

html

个人网站 - 一栏式布局

我的个人网站

欢迎来到我的个人网站

这里是我的个人网站，欢迎浏览。

<section id="about">  
  <h2>关于我</h2>  
  <p>在这里介绍一些关于我的信息。</p>  
</section>  
  
<section id="portfolio">  
  <h2>我的作品集</h2>  
  <p>展示我的一些作品。</p>  
</section>  
  
<section id="contact">  
  <h2>联系我</h2>  
  <p>提供联系方式或联系表单。</p>  
</section>

CSS样式一栏式布局的CSS样式也相对简单，主要关注内容的垂直排列和整体样式。

css
/* styles.css */

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.container {
max-width: 800px; /* 限制容器最大宽度，使其在小屏幕设备上也能良好显示 /
margin: 0 auto; / 水平居中 /
padding: 20px; / 添加内边距 */
}

header {
text-align: center; /* 标题居中显示 /
margin-bottom: 20px; / 添加底部边距 */
}

nav ul {
list-style-type: none; /* 移除列表默认样式 /
padding: 0;
margin: 0;
text-align: center; / 导航链接居中显示 */
}

nav ul li {
display: inline-block; /* 使列表项水平排列 /
margin: 0 10px; / 添加左右边距 */
}

nav ul li a {
text-decoration: none; /* 移除链接下划线 /
color: #333; / 链接颜色 */
}

nav ul li a:hover {
color: #000; /* 鼠标悬停时的链接颜色 */
}

main {
margin-bottom: 20px; /* 添加主内容区域底部边距 */
}

footer {
text-align: center; /* 页脚内容居中显示 /
font-size: 0.8em; / 减小页脚字体大小 /
margin-top: 20px; / 添加页脚顶部边距 */
}

/* 可选的：为section添加一些间距 */
section {
margin-bottom: 30px;
}
在这个示例中，我们使用了简单的CSS样式来设置容器的宽度、内边距、文本对齐方式以及列表和链接的样式。你可以根据自己的需要调整这些样式，以符合你的设计要求和品牌风格。

一栏式布局虽然简单，但可以通过添加图像、背景色、字体图标等元素来增强其视觉效果和吸引力。同时，确保内容
在这里插入图片描述

<!doctype html>
<html lang="en">
	<head>
        <title>Home</title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


        <!-- Main CSS --> 
        <link rel="stylesheet" href="css/style.css">

        <!-- Font Awesome -->
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
  
    <body>

        <!-- Main navigation -->
        <nav class="navbar navbar-expand-md navbar-dark">
            <div class="container">

                <!-- Company name shown on mobile -->
                <a class="navbar-brand" href="#">Company<span>Name</span></a>

                <!-- Mobile menu toggle -->
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- Main navigation items -->
                <div class="collapse navbar-collapse" id="mainNavbar">
                    <ul class="navbar-nav mr-auto justify-content-end">
                        <li class="nav-item">
                                <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                        </li>

                        <li class="nav-item dropdown active">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Examples &amp; Pages</a>
                                    <div class="dropdown-menu navbar-dark bg-primary">
                                          <a class="dropdown-item" href="examples.html">Style Examples</a>
                                          <a class="dropdown-item" href="three-column.html">Three Colum