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 小时前
🚀 Vue3按钮组件Loading状态最佳实践:优雅的通用解决方案
前端·vue.js·element
1024小神16 小时前
vue3项目使用指令方式修改img标签的src地址
前端
sujiu16 小时前
CommonJS 原理与实现:手写一个极简的模块系统
前端
用户516816614584116 小时前
使用全能电子地图下载器MapTileDownloader 制作瓦片图层详细过程
前端·后端
拉不动的猪16 小时前
从底层逻辑和实用性来分析ref中的值为什么不能直接引用
前端·javascript·面试
1024小神16 小时前
tauri项目编译的时候,最后一步的时候内存溢出了?
前端
ONE_Gua17 小时前
Wireshark常用过滤规则
前端·后端·数据挖掘
通往曙光的路上17 小时前
vue啊哈哈哈哈哈哈哈哈
前端·javascript·vue.js
fouryears_2341717 小时前
如何将Vue 项目转换为 Android App(使用Capacitor)
android·前端·vue.js
葡萄城技术团队17 小时前
在线Excel新突破:SpreadJS如何完美驾驭中国式复杂报表
前端