HTML底部CSS代碼，是指我們?cè)诰W(wǎng)頁(yè)制作中為了美化網(wǎng)頁(yè)所添加的代碼中，放在HTML文檔最底部的CSS代碼。為什么要放在底部呢？原因是為了提高網(wǎng)站打開(kāi)速度，因?yàn)镃SS是可能會(huì)阻塞頁(yè)面渲染的資源。所以我們將CSS代碼放在底部，可以讓網(wǎng)頁(yè)盡早地呈現(xiàn)，縮短頁(yè)面加載時(shí)間。下面是一個(gè)示例的HTML底部CSS代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的網(wǎng)頁(yè)</title>
</head>
<body>
<header>
<h1>我的網(wǎng)頁(yè)</h1>
</header>
<nav>
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">關(guān)于我</a></li>
<li><a href="#">聯(lián)系我</a></li>
</ul>
</nav>
<section>
<h2>我的簡(jiǎn)介</h2>
<p>我是一個(gè)愛(ài)好編程的小伙子。</p>
<p>我熱愛(ài)開(kāi)源，熱愛(ài)分享。</p>
<p>這是我的個(gè)人網(wǎng)站。</p>
</section>
<footer>
<p>Copyright ? 2021</p>
</footer>
<!-- 底部CSS代碼 -->
<style>
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
background-color: #f1f1f1;
text-align: center;
}
nav li {
display: inline-block;
margin: 0;
padding: 0;
}
nav a {
display: block;
padding: 10px;
color: #333;
font-size: 18px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
}
section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
</style>
</body>
</html>這段底部CSS代碼是用來(lái)美化網(wǎng)頁(yè)的，如改變頁(yè)面背景顏色、調(diào)整元素間距離、設(shè)置字體等等。放在底部的優(yōu)點(diǎn)就是可以保證頁(yè)面的快速呈現(xiàn)，提高用戶體驗(yàn)。上一篇css完善格式