数据结构
Networking
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究构建一个带有 CSS 的响应式网格视图
您可以尝试运行下列代码来构建一个响应式网格视图
示例
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid black;
padding: 10px;
}
.leftmenu {
width: 30%;
float: left;
padding: 10px;
border: 1px solid black;
}
.content {
width: 70%;
float: left;
padding: 10px;
border: 2px dotted black;
}
</style>
</head>
<body>
<div class = "header">
<h1>Header</h1>
</div>
<div class = "leftmenu">
<ul>
<li>Menu One</li>
<li>Menu Two</li>
<li>Menu Three</li>
<li>Menu Four</li>
<li>Menu Five</li>
<li>Menu Six</li>
<li>Menu Seven</li>
<li>Menu Eight</li>
<li>Menu Nine</li>
<li>Menu Ten</li>
</ul>
</div>
<div class = "content">
<h1>Demo</h1>
<p>This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text.
</p>
</div>
</body>
</html>
更新日期：2020 年 6 月 25 日
366 次浏览
广告