响应式 Web 设计 - 网格视图

最新推荐文章于 2021-10-22 21:50:17 发布

冷月醉雪

最新推荐文章于 2021-10-22 21:50:17 发布

阅读量760

点赞数

分类专栏： CSS3 文章标签：网格视图

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80813519

版权

本文介绍了如何使用CSS进行响应式网格视图设计，包括设置box-sizing属性、创建响应式网格、12列网格系统的计算方法，以及如何通过浮动和清除浮动来布局。通过实例展示了如何创建两列的响应式网页，并提供了样式的添加建议。

摘要由CSDN通过智能技术生成

网格视图的定义

使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。

创建响应式网格视图

首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。

确保边距和边框包含在元素的宽度和高度间。

添加如下代码：

* {
    box-sizing: border-box;
}

以下实例演示了简单的响应式网页，包含两列：

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			* {
				box-sizing:border-box;
			}
			
			.header {
				border:1px solid red;
				padding:15px;
			}
			
			.menu {
				width: 25%;
				float:left;
				padding:15px;
				border:1px solid red;
			}
			
			.main {
				width:75%;
				float:left;
				padding:15px;
				border:1px solid red;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<h1>Chania</

最低0.47元/天解锁文章

冷月醉雪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
响应式 Web 设计 - 网格视图

网格视图的定义使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。创建响应式网格视图首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。确保边距和边框包含在元素的宽度和高度间。添加如下代码：* { box-sizing: border-box;} 以下实例演示了简...
复制链接

扫一扫