<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5語意化</title> <style type="text/css"> header, section, footer, aside, nav, article, figure { display: block; } nav,header,p,article{ width: 1200px; margin:0 auto; }
ul{ height:40px; background-color: #fff; list-style: none; display: inline-block; width: 1200px; padding: 0px; }
li{ line-height: 40px; text-align: center; float: left; width: 400px; margin:0 auto; } li:hover{ background: pink; }
a{ text-decoration: none; } .post{ border:1px dashed #000; padding: 0 0 20px 20px; margin-bottom: 40px; padding-top: 10px; background-color: #fff; } #content{ border:1px solid #ccc; padding:30px 40px; background-color: rgb(247,244,255); margin-top: 20px; } </style> </head> <body> <!-- 放在body中，這個頁面的相關資訊 --> <aside style="background-color: rgb(244,247,255)"> <h4 style="padding-top: 20px;padding-left: 20px;">頁面導航</h4> <nav> <ul> <li><a href=https://www.cnblogs.com/sjslove/p/"#">查看相關內容</a></li> <li><a href=https://www.cnblogs.com/sjslove/p/"#">回傳首頁</a></li> <li><a href=https://www.cnblogs.com/sjslove/p/"#">回傳本頁</a></li> </ul> </nav> </aside> <!-- <article> 標簽定義獨立的內容部分 --> <article id="content"> <!-- <header>元素主要用于定義內容的介紹展示區域：引導、導航. --> <!-- 帖子的頭部 --> <header> <h1>馬上要去作業了，也不知道會怎么樣</h1> <div>作者，初級碼農</div> <p><time datetime="2020-03-15"></time></p> </header> <p>培訓的，大概培訓了半年，js、jquery、bootstrap、angular、vue、Ajax、資料庫、php、面向物件、Web服務器、移動端</p> <br><br> <!-- <section> 標簽定義檔案中的節（section、區段），比如章節、頁眉、頁腳或檔案中的其他部分， --> <!-- 回復部分 --> <section> <!-- 每個article代表一個回復 --> <!-- <article>定義獨立的內容部分 --> <article class="post"> <!-- 回復的頭部 --> <header> <h4>我覺得還行</h4> <div>作者：Amy</div> <p><time datetime="2020-04-01"></time></p> </header> <p>作業機會還多的，php是輕量級網站開發最好的選擇</p> </article> <!-- 每個article代表一個回復 --> <!-- <article>定義獨立的內容部分 --> <article class="post"> <!-- 回復的頭部 --> <header> <h4>不錯了</h4> <div>作者：鍵盤俠</div> <p><time datetime="2020-04-06"></time></p> </header> <p>學歷本科、資訊專業、會這么多，不會找不到的，對自己有信心一點</p> </article> </section> <br><br> <!-- 描述了檔案的底部區域 --> <!-- 一個頁腳通常包含檔案的作者，著作權資訊，鏈接的使用條款，聯系資訊等 --> <!-- 腳注 附加資訊--> <footer> <p style="color: pink;padding-left: 40px;">我的帖子我做主</p> </footer> <br><br> <!-- <aside> 標簽定義頁面主區域內容之外的內容（比如側邊欄）， --> <!-- 文章的額外的資訊 --> <aside style="padding-left: 40px;"> <h4>關于樓主</h4> <section> <div>用戶組：菜鳥初級</div> <div>閱讀量：20</div> <div>發表時間：2020-03-18</div> </section> </aside> <!-- <figcaption> 標簽定義 <figure> 元素的標題. --> <!-- <figure>標簽規定獨立的流內容（影像、圖表、照片、代碼等等）， --> <figure> <img src=https://www.cnblogs.com/sjslove/p/"https://p0.ssl.qhimg.com/t013feee31537e51f3b.png" height="96px" width="96px" alt="xiangmao" /> <figcaption style="padding-left: 20px">my logo</figcaption> </figure> </article> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/3994.html
標籤：HTML5
上一篇：vue-router詳解
下一篇：html頁面布局