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;

}

相关推荐
excel20 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着20 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友21 小时前
什么是API签名?
前端·后端·安全
会豪1 天前
Electron-Vite (一)快速构建桌面应用
前端
中微子1 天前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶1 天前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子1 天前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_1 天前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23331 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin1 天前
TypeScript设计模式:适配器模式
前端·后端·node.js