資料結構
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 次瀏覽
廣告