收藏
天蓬老師批改狀態(tài)：合格
老師批語：寫得可以
語義化常用標(biāo)簽(元素):
<h1> ~ <h6> : 劃分段落(標(biāo)題)
<header> : 頁眉(位于網(wǎng)站的頂部)
<nav> : 常用于網(wǎng)站的導(dǎo)航條
<main> : 位于網(wǎng)站的主體內(nèi)容
<aside> : 邊欄(常用于廣告位, 推薦位, 熱門信息等....)
<section> : 區(qū)塊(定義文檔某區(qū)域, 如: 章節(jié),頁眉, 頁腳)
<footer> : 頁腳(位于網(wǎng)站的底部)
<article> : 文章內(nèi)容專用標(biāo)簽
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5方式: 語義化結(jié)構(gòu)</title>
<style>
/* 初始化外邊距和內(nèi)邊距為: 0 */
* {margin: 0;padding: 0;}
/* 頁眉header標(biāo)簽樣式 */
header {width: 800px;background: lightcoral;height: 40px;margin: 10px auto;border-radius: 4px;}
header > nav > a {line-height: 40px;margin-left: 10px;text-decoration: none;}
header > nav > a:hover {background: yellowgreen;}
/* 主體內(nèi)容樣式 */
.container {width: 780px;height:510px;background: wheat;margin: 0 auto;border-radius: 4px;padding: 10px;}
/* aside左邊欄與aside右邊欄 */
.container > aside:first-child,
.container > aside:last-child {float:left;width: 160px;height: 510px;background: lightsalmon;}
.container > aside > section {text-align: center;margin-top: 220px;}
/* 主體區(qū) */
.container > main {float: left;width: 440px;height: 508px;margin: 0px 10px;border-top: 1px solid #ccc;}
.container > main > header {background: red;width: 140px;height: 140px;
transform: rotate(50deg);margin: 30px auto;}
.container > main > header > h3 {text-align: center;line-height: 140px;transform: rotate(130deg);
font-size: 80px;}
.container > main > article {margin-top: 0px;}
/* footer標(biāo)簽頁腳樣式 */
footer {width: 800px;height: 80px;margin: 0 auto;background: lightpink;margin-top: 10px;border-radius: 4px;}
footer > .links {margin: 0 auto;text-align: center;}
footer > .links > a {line-height: 80px;margin-left: 10px;text-decoration: none;}
</style>
</head>
<body>
<!-- 利用header標(biāo)簽作為網(wǎng)站的頁眉 -->
<header>
<nav>
<a href="">萬事如意</a>
<a href="">事事順心</a>
<a href="">福壽安康</a>
<a href="">笑口常開</a>
<a href="">吉祥如意</a>
<a href="">步步高升</a>
<a href="">登峰造極</a>
<a href="">一帆風(fēng)順</a>
<a href="">身體健康</a>
<a href="">學(xué)習(xí)進(jìn)步</a>
</nav>
</header>
<!-- 內(nèi)容主體區(qū) -->
<div class="container">
<!-- aside標(biāo)簽作為邊欄_左邊 -->
<aside>
<section>區(qū)塊1</section>
</aside>
<!-- 利用main標(biāo)簽定義主體區(qū) -->
<main>
<header>
<h3>福</h3>
</header>
<hr>
<article>
傳說明太祖朱元璋當(dāng)年用“福”字作暗記準(zhǔn)備殺人。好心的馬皇后為消除這場災(zāi)禍，
令全城大小人家必須在天明之前都在自家門上貼上一個(gè)“?！弊?。
馬皇后的旨意自然沒人敢違抗，于是家家門上都貼了“?！弊?。其中有戶人家不識字，
把“?！弊仲N倒了。第二天，皇帝派人上街查看，發(fā)現(xiàn)家家都貼了“?！弊郑€有一家把“?！弊仲N倒了。
皇帝聽了稟報(bào)大怒，立即命令御林軍把那家滿門抄斬。馬皇后一看事情不好，
忙對朱元璋說：“那家人知道您今日來訪，故意把福字貼倒了，這不是'福到'的意思嗎？”
皇帝一聽有道理，便下令放人，一場大禍終于消除了。從此，人們便將“?！弊值官N起來，
一求吉利，二為紀(jì)念馬皇后。
</article>
</main>
<!-- aside標(biāo)簽作為邊欄_右邊 -->
<aside>
<section>區(qū)塊2</section>
</aside>
</div>
<!-- 利用footer標(biāo)簽頁腳 -->
<footer>
<section class="links">
<a href="">links1</a>
<a href="">links2</a>
<a href="">links3</a>
<a href="">links4</a>
<a href="">links5</a>
</section>
</footer>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
效果圖:
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號