在 Web 開發(fā)中,我們時常需要讓一些文字固定在屏幕上方或下方。這時,可以使用 CSS 樣式來實現(xiàn)。下面介紹一個簡單的實現(xiàn)方式。
.fixed-text { position: fixed; top: 0; left: 0; width: 100%; background-color: #000; color: #fff; padding: 10px; font-size: 18px; }
代碼解釋:
position: fixed;
設(shè)置元素的定位方式為固定,即不隨滾動條滾動而改變位置。top: 0;
和left: 0;
分別表示元素距離視口頂部和左側(cè)的距離為0。width: 100%;
將元素寬度設(shè)置為100%,即橫向充滿整個視口。background-color: #000;
設(shè)置背景顏色為黑色。color: #fff;
設(shè)置文字顏色為白色。padding: 10px;
設(shè)置內(nèi)邊距為10px。font-size: 18px;
設(shè)置字號為18px。
使用示例:
<div class="fixed-text"> 這是固定在屏幕上方的文字。 </div>
以上代碼將固定在 Web 頁面的屏幕上方顯示黑底白字的文字,不會隨頁面滑動而改變位置。
上一篇css文字后加顏色
下一篇css文字合并為一行