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;

}

相关推荐
宋辰月16 分钟前
Vue2的进阶Vue3
前端·javascript·vue.js
酷飞飞1 小时前
C语言的复合类型、内存管理、综合案例
java·c语言·前端
姜太小白2 小时前
【前端】CSS Grid布局介绍及示例
前端·css
风继续吹..5 小时前
后台管理系统权限管理:前端实现详解
前端·vue
yuanmenglxb20046 小时前
前端工程化包管理器:从npm基础到nvm多版本管理实战
前端·前端工程化
新手小新6 小时前
C++游戏开发(2)
开发语言·前端·c++
我不吃饼干7 小时前
【TypeScript】三分钟让 Trae、Cursor 用上你自己的 MCP
前端·typescript·trae
小杨同学yx8 小时前
前端三剑客之Css---day3
前端·css
Mintopia9 小时前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九10 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf