CSS 网页布局

网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域:

1)、头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的logo。

<style>

body {

margin: 0;

}

/* 头部样式 */

.header {

background-color: #f1f1f1;

padding: 20px;

text-align: center;

}

</style>

</head>

<body>

<div class="header">

<h1>头部区域</h1>

</div>

</body>

2)、菜单导航栏包含一些链接,可以引导用户浏览其他网页:

<style>

* {

box-sizing: border-box;

}

body {

margin: 0;

}

/* 头部样式 */

.header {

background-color: #f1f1f1;

padding: 20px;

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;

}

</style>

</head>

<body>

<div class="header">

<h1>头部区域</h1>

</div>

<div class="topnav">

<a href="#">主页</a>

<a href="#">产品</a>

<a href="#">关于</a>

</div>

3)、内容区域一般有2种形式;1列(一般用于移动端);2列(一般用于平板设备);3列(一般用于PC设备)。

<style>

* {

box-sizing: border-box;

}

body {

margin: 0;

}

/* 头部样式 */

.header {

background-color: #f1f1f1;

padding: 20px;

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%;

}

/* 列后清除浮动 */

.row:after {

content: "";

display: table;

clear: both;

}

/* 响应式布局 - 小于 600 px 时改为上下布局 */

@media screen and (max-width: 600px) {

.column {

width: 100%;

}

}

</style>

4)、底部区域在网页的最下方,一般包含版权信息和联系方式等:

/* 底部样式 */

.footer {

background-color: #f1f1f1;

padding: 10px;

text-align: center;

}

相关推荐
岁月宁静4 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者4 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~5 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge5 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再5 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴5 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟6 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1236 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚6 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院7 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js