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;

}

相关推荐
0wioiw03 分钟前
Flutter基础(前端教程④-组件拼接)
前端·flutter
花生侠28 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯35 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调42 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined244 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js