文鏈接: https://getflywheel.com/layout/css-grid-layouts-how-to/
柵格布局的思想起源源自于印刷設計。柵格是用來將設計元素精確定位到頁面上的的測量工具。這種想法經(jīng)常被用在網(wǎng)頁上來進行內(nèi)容組織和統(tǒng)一,提升用戶的視覺體驗。
網(wǎng)頁設計剛起步的時候,設計和布局都是是相當簡單的, 通常包含頭部,側(cè)邊欄,內(nèi)容區(qū)域和頁腳。現(xiàn)在,隨著網(wǎng)絡的演變,網(wǎng)頁的布局也變得更加復雜,做網(wǎng)頁設計師的人也隨之增加。我們經(jīng)常需要大量的內(nèi)容區(qū)域,響應式設計,多頁面模板設計,以及許多其他的。浮動和定位在實現(xiàn)這些設計的時候,是必不可少的。但浮動聽起來簡單,實際操作起來卻很棘手。
但接下來,我們會介紹一種簡單的設計布局。隨著CSS柵格布局的不斷發(fā)展,成為設計師也會變得越來越容易。
CSS柵格兼容性
作為一名設計師,需要了解網(wǎng)頁設計的未來。CSS柵格布局將改變現(xiàn)有規(guī)則,為設計師處理頭痛了許多年的定位。雖然目前還不是主流的做法,但是這是一件值得期待的事情。
在我們真的深入了解柵格布局之前,要強調(diào)的一件事,瀏覽器并不普遍支持, 希望這種工作方式在未來可以得到越來越多的瀏覽器支持。不過, 好消息是, 您可以輕松地嘗試使用CSS柵格布局,以及了解它是如何工作的。
在使用示例之前,請你確保你的瀏覽器支持。目前只有Internet Explorer 10+和 edge 支持。其他的瀏覽器通過一些手段也可以瀏覽,但因為它不是官網(wǎng)支持,所以你只能是不斷的去嘗試。(If you view the Can I Use documentation on CSS Grid Layouts, at the time of this post, you will notice little flag indicators. These show that you will need to be in “flag mode.”)如果你邊使用Can I Use來查看柵格布局的兼容性,邊看這篇文章,那么你就可以注意到每個細節(jié)的不同。
當您在測試柵格布局的時候,你需要做幾件事情幫助你正確地看到布局。使用Chrome查看,你需要啟用“實驗性網(wǎng)絡平臺功能”。如何啟用呢?在Chrome 瀏覽器中打開chrome://flags 這個地址。當url 鏈接chrome://flags加載完畢之后,向下滾動頁面,找到該選項,設置為“啟用實驗性網(wǎng)絡平臺功能”。
火狐也允許您查看柵格布局,通過“l(fā)ayout.css.grid.enabled”參數(shù)設置。開啟方法類似于Chrome瀏覽器的說明。在Firefox瀏覽器中URL輸入 about:config。向下滾動頁面,設置為啟用 “l(fā)ayout.css.grid.enabled” 。
如果你想馬上開始使用CSS柵格布局,對于不支持它的瀏覽器還有一個變通方案。如果你熟悉polyfills的想法,那已經(jīng)有解決方案了。如果你不熟悉polyfills,可以利用瀏覽器后退,利用JavaScript的力量,允許現(xiàn)代的瀏覽器功能(例如CSS柵格布局)在舊的瀏覽器運行。
Polyfills超出本教程范圍,但隨著越來越多的設計師開始使用這項技術,更多的polyfill 技術將會涌現(xiàn)。如果你準備嘗試,這里是一個推薦的 polyfill option。請務必閱讀作者的文檔,了解有關如何使用它的詳細信息。
那么,在承諾100%使用CSS柵格布局之前,要確保使用的生產(chǎn)代碼,做一些深入的測試。
CSS柵格布局基本知識
通過利用CSS,柵格布局將有助于您的網(wǎng)頁內(nèi)容的呈現(xiàn)。這里有一篇相對較新的定義的屬性的CSS柵格布局規(guī)范 。這是學習柵格設計的一個很好的資源。CSS柵格設計有助于簡化的東西,使創(chuàng)建布局更加容易。想象一下,柵格作為一種結(jié)構,尺寸可以被定義。
柵格的組成
行(lines)
在上圖中,有五條垂直線和三條水平線。線從1開始編號。示例中,垂直線從左至右,這取決于書寫方向。如果書寫方向是由右至左,順序就顛倒過來。可以給線起名(可選),方便在CSS中引用。
軌道(tracks)
軌道是兩條平行線之間的空間。在圖中,有四個垂直軌道和兩個水平的軌道。這是線和軌道的共同結(jié)果。 線是記錄內(nèi)容的起點和終點。軌道是內(nèi)容真實存在的位置。
單元格(cells)
單元格是水平和垂直軌道的相交處。圖中有八個單元格。
面(areas)
單元格指定面的時候發(fā)揮作用。面是矩形形狀,可以跨越多個單元格。像線一樣,面也可以任意命名。如在圖中的幾個標簽:“A”,“B”,和“C”。
創(chuàng)建柵格布局
用老方格紙,布局之前,先勾勒輪廓。
HTML柵格
<div class="container">
<div class="grid header">Header</div>
<div class="grid sidebar">Sidebar</div>
<div class="grid content">Main Content</div>
<div class="grid extra">Extra Content</div>
<div class="grid footer">Footer</div>
</div>
容器Container是非常重要的。容器內(nèi)是用于顯示網(wǎng)站的不同的內(nèi)容塊。內(nèi)容塊的順序并不重要。接下來,我們將使用CSS將它們按照我們的布局顯示。
CSS樣式
HTML完成后,我們來寫CSS。給container設置display:grid 或者 display:inline-grid. 如果你希望設置塊級元素,那使用 display:grid ; 如果你希望設置成內(nèi)聯(lián)元素, 那使用display:inline-grid。想了解更多細節(jié),可以查看文檔
.container {
display: grid;
grid-template-columns: 0.25fr 15px 0.75fr;
grid-template-rows: auto 25px auto 25px auto 25px auto;
}
.grid {
background-color: #444;
color: #fff;
padding: 25px;
font-size: 3rem;
}
grid-template-columns和grid-template-rows屬性用于指定行和列的寬度。這個布局定義了五列。15px是兩個元素之間的間距。第三列占用0.25份的剩余空間。同樣地,第五列占用0.75份的剩余空間。(疑問: 圖中根本沒有第五列啊,感覺作者寫錯了)
There are responsive customizations that can be made, but this is a great step to take prior to that. It may seem like using pixel measurements would be limiting, however, using auto for the first row in grid-template-rows allows the row to expand as necessary based on the content inside it. The 25px row acts as a gutter.
對于響應式布局這個規(guī)范是很便利的,如果使用像素,則會被限定死。第一行使用grid-template-rows來表示,隨著內(nèi)容需要的變化而變化。設置padding 成 25 像素,與頭部留有間隙。
元素看起來很緊湊,但再加一些規(guī)范,元素將初具規(guī)模。
這個例子先放置的頭部,但元素位置可以按您喜歡的任意順序擺放。如果你想從頁腳開始,也可以。
我們先從頭部開始,從列1開始到列4結(jié)束,從行1開始到行2結(jié)束,CSS看起來就像這樣:
.header {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
您可能會注意到側(cè)邊欄被壓住了,我們無法看到它。我們需要重新排列一下。在這種布局,通過行的位置進行排列。以行作為標準。頭部占一行和二行的位置,側(cè)邊欄,從三行開始, 到六行結(jié)束。 頭部到第二行結(jié)束,側(cè)邊欄從第三行開始正好可以顯示到頭部下面。要查看示例,請參見該項目Codepen。
我們使用grid-column-start指定一個元素起始垂直線。在本例中,它將被設置為3。grid-column-end表示一個元素的結(jié)束垂直線。在這種情況下,這個屬性就等于四。其他行值也用同樣的方式設置。側(cè)邊欄的位置是存在的,它只是覆蓋的內(nèi)容區(qū)。
.sidebar {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 6;
background: #a0c263;
}
主要內(nèi)容在第三列開始,第四列結(jié)束。側(cè)邊欄和內(nèi)容區(qū)域的頂部對齊,所以他們都從grid-row-start第三行開始。你可能想讓內(nèi)容欄比側(cè)邊欄高很多。通過設置容器上的高度,假如400像素,這個時候,它就會比其它元素高很多。
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #f5c531;
height: 400px;
}
最后兩個內(nèi)容區(qū)域是額外內(nèi)容區(qū)域和頁腳。
.extra {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
background: #898989;
}
.footer {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 7;
grid-row-end: 8;
background: #FFA500;
}
響應式優(yōu)勢
布局已經(jīng)創(chuàng)建好了,似乎很像一個“桌面”。那么平板電腦和移動設備怎么顯示?CSS柵格布局加上媒體查詢可以適應不同的屏幕尺寸。真正酷的是,你可以在這些不同的媒體查詢范圍里,改變內(nèi)容區(qū)域。作為一個設計師,這意味著你選擇什么是最適合你的布局在不同的斷點。例如,如果你想要將“次要內(nèi)容”被放在“內(nèi)容”區(qū)域之上,可以指定正確的行和列。
/* For mobile phones: */
.header {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.extra {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.content {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
background: #f5c531;
height: 400px;
}
通過設置成列1開始,列4結(jié)束,來設置成內(nèi)容全寬。將“次要內(nèi)容”顯示在了“內(nèi)容”之上。
CSS柵格布局是一種新型的布局方式。正如你所看到的,這種方法很容易創(chuàng)建一個簡單的頁面布局去運行。上面這個簡單的例子也可以為如何創(chuàng)建更復雜的布局打下良好的基礎。假如這個技術獲得普及,在設計各種設備和尺寸,布局大小自定義的時候,這個技術會是一個優(yōu)勢。
問切 wenqie(.cn),是切圖網(wǎng)旗下關注用戶體驗,專注H5移動適配的品牌網(wǎng)站。
HTML的世界里,一切都是由容器和內(nèi)容構成的。容器,就如同一個個盒子,用來裝載各種元素;而內(nèi)容,則是這些盒子里的珍寶。理解了這一點,我們就邁出了探索HTML布局的第一步。
在HTML中,布局標簽主要用于控制頁面的結(jié)構和樣式。本文將介紹一些常用的布局標簽及其使用方法,并通過代碼示例進行演示。
布局在我們前端開發(fā)中擔任什么樣的角色呢?想象一下,你面前有一堆散亂的積木,無序地堆放在那里。
而你的任務,就是將這些積木按照圖紙拼裝成一個精美的模型。HTML布局標簽的作用就像那張圖紙,它指導瀏覽器如何正確、有序地顯示內(nèi)容和元素,確保網(wǎng)頁的結(jié)構和外觀既美觀又實用。
下面我們就來看看在HTML中常用的基礎布局標簽有哪些,如何使用這些布局標簽完成我們的開發(fā)目標。
div標簽是一個塊級元素,它獨占一行,用于對頁面進行區(qū)域劃分。它可以包含其他HTML元素,如文本、圖片、鏈接等。通過CSS樣式可以設置div的布局和樣式。
示例代碼:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>這是一個div元素
</div>
</body>
</html>
運行結(jié)果:
span標簽是一個內(nèi)聯(lián)元素,它不獨占一行,用于對文本進行區(qū)域劃分。它主要用于對文本進行樣式設置,如字體、顏色等。與div類似,span也可以包含其他HTML元素。
示例代碼:
<!DOCTYPE html>
<html>
<head>
<style>
.text {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>這是一個<span>span元素</span>。</p>
</body>
</html>
運行結(jié)果:
table標簽用于創(chuàng)建表格,它包含多個tr(行)元素,每個tr元素包含多個td(單元格)或th(表頭單元格)元素。
<table> 定義一個表格,<tr> 定義表格中的行,而 <td> 則定義單元格。通過這三個標簽,我們可以創(chuàng)建出整齊劃一的數(shù)據(jù)表,讓信息的展示更加直觀明了。
需要注意的是:
示例代碼:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
</body>
</html>
運行結(jié)果:
<form>標簽的主要作用是定義一個用于用戶輸入的HTML表單。這個表單可以包含各種輸入元素,如文本字段、復選框、單選按鈕、提交按鈕等。
<form>元素可以包含以下一個或多個表單元素:<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>和<output>等。
示例代碼:
<!DOCTYPE html>
<html>
<head>
<style>
form {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<form>
<label for="username">用戶名:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
運行結(jié)果:
示例代碼:
<!DOCTYPE html>
<htmml>
<head>
<meta charst = "UTF-8">
<title>html--無序列表</title>
</head>
<body>
<ul>
<li>默認的無序列表</li>
<li>默認的無序列表</li>
<li>默認的無序列表</li>
</ul>
<ul>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
</ul>
<ul>
<li type = "square">添加square屬性</li>
<li type = "square">添加square屬性</li>
<li type = "squaare">添加square屬性</li>
</ul>
</body>
</html>
運行結(jié)果:
也可以使用CSS list-style-type屬性定義html無序列表樣式。
想要快速入門前端開發(fā)嗎?推薦一個前端開發(fā)基礎課程,這個老師講的特別好,零基礎學習無壓力,知識點結(jié)合代碼,邊學邊練,可以免費試看試學,還有各種輔助工具和資料,非常適合新手!點這里前往學習哦!「鏈接」
示例代碼:
<ol>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
</ol>
<ol type = "a" start = "2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
<li value ="20">第四項</li>
</ol>
<ol type = "Ⅰ" start = "2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
</ol>
運行結(jié)果:
同樣也可以使用CSS list-style-type屬性定義html有序列表樣式。
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
</dl>
<dl>即“definition list(定義列表)”,
<dt>即“definition term(定義名詞)”,
而<dd>即“definition description(定義描述)”。
示例代碼:
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置</dd>
</dl>
運行結(jié)果:
以上就是HTML中常用的布局標簽及其使用方法。在實際開發(fā)中,還可以結(jié)合CSS和JavaScript來實現(xiàn)更復雜的布局和交互效果。
掌握了這些HTML常用布局標簽,你已經(jīng)擁有了構建網(wǎng)頁的基礎工具。記住,好的布局不僅需要技術,更需要創(chuàng)意和對細節(jié)的關注。現(xiàn)在,打開你的代碼編輯器,開始你的布局設計之旅吧!
網(wǎng)頁布局有很多種方式,一般分為以下幾個部分:頭部區(qū)域、菜單導航區(qū)域、內(nèi)容區(qū)域、底部區(qū)域。
頭部區(qū)域位于整個網(wǎng)頁的頂部,一般用于設置網(wǎng)頁的標題或者網(wǎng)頁的 logo:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 項目(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
/* 頭部樣式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>頭部區(qū)域</h1>
</div>
</body>
</html>
菜單導航條包含了一些鏈接,可以引導用戶瀏覽其他頁面:
例
/* 導航條 */
.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;
}
內(nèi)容區(qū)域一般有三種形式:
不相等的列一般是在中間部分設置內(nèi)容區(qū)域,這塊也是最大最主要的,左右兩次側(cè)可以作為一些導航等相關內(nèi)容,這三列加起來的寬度是 100%。
例:
.column {
float: left;
}
/* 左右側(cè)欄的寬度 */
.column.side {
width: 25%;
}
/* 中間列寬度 */
.column.middle {
width: 50%;
}
/* 響應式布局 - 寬度小于600px時設置上下布局 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
底部區(qū)域在網(wǎng)頁的最下方,一般包含版權信息和聯(lián)系方式等。
例
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
通過以上等學習我們來創(chuàng)建一個響應式等頁面,頁面的布局會根據(jù)屏幕的大小來調(diào)整:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>項目</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* 頭部標題 */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* 導航條 */
.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;
}
/* 創(chuàng)建兩列 */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* 右側(cè)欄 */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* 圖像部分 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 文章卡片效果 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* 列后面清除浮動 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 底部 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* 響應式布局 - 屏幕尺寸小于 800px 時,兩列布局改為上下布局 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* 響應式布局 -屏幕尺寸小于 400px 時,導航等布局改為上下布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>我的網(wǎng)頁</h1>
<p>重置瀏覽器大小查看效果。</p>
</div>
<div class="topnav">
<a href="#">鏈接</a>
<a href="#">鏈接</a>
<a href="#">鏈接</a>
<a href="#" style="float:right">鏈接</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>文章標題</h2>
<h5>xx 年xx月 xx日</h5>
<div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
<p>文本...</p>
<p>當熱誠變成習慣,恐懼和憂慮即無處容身。缺乏熱誠的人也沒有明確的目標。熱誠使想象的輪子轉(zhuǎn)動。一個人缺乏熱誠就象汽車沒有汽油。
善于安排玩樂和工作,兩者保持熱誠,就是最快樂的人。熱誠使平凡的話題變得生動。!</p>
</div>
<div class="card">
<h2>文章標題</h2>
<h5>xx 年 xx 月xx日</h5>
<div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
<p>文本...</p>
<p>一切事無法追求完美,唯有追求盡力而為。這樣心無壓力,出來的結(jié)果反而會更好!</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>關于我</h2>
<div class="fakeimg" style="height:100px;"></div>
<p>6666</p>
</div>
<div class="card">
<h3>熱門文章</h3>
<div class="fakeimg"><img src="img/fy2_wp.png">\</div>
</div>
<div class="card">
<h3>關注我</h3>
<p>本站發(fā)布的系統(tǒng)與軟件僅為個人學習測試使用,請在下載后24小時內(nèi)刪除,
不得用于任何商業(yè)用途,否則后果自負,請支持購買正版軟件!如侵犯到您的權益,請及時通知我們,我們會及時處理。
聲明:為非贏利性網(wǎng)站 不接受任何贊助和廣告。</p>
</div>
</div>
</div>
<div class="footer">
<h2>底部區(qū)域</h2>
</div>
</body>
</html>
本文主要介紹了Html的網(wǎng)頁布局結(jié)構,如何去了解網(wǎng)絡的布局,介紹了常見的移動設備的三種網(wǎng)頁模式,最后通過一個小項目,總結(jié)之前講解的內(nèi)容。
代碼很簡單,希望可以幫助你學習。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。