整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
例
設置圖像的底部邊緣，在元素的底邊上面5px：
img
{
position:absolute;
bottom:5px;
}
屬性定義及使用說明
對于絕對定位元素，bottom屬性設置單位高于/低于包含它的元素的底邊。
對于相對定位元素，bottom屬性設置單位高于/低于其正常位置的元素的底邊。
注意：如果"position：static"，底部的屬性沒有任何效果。
說明： 對于 static 元素，為 auto；對于長度值，則為相應的絕對長度；對于百分比數(shù)值，為指定值；否則為 auto。 對于相對定義元素，如果 bottom 和 top 都是 auto，其計算值則都是 0；如果其中之一為 auto，則取另一個值的相反數(shù)；如果二者都不是 auto，bottom 將取 top 值的相反數(shù)。
| 默認值： | auto |
|---|---|
| 繼承性： | no |
| 版本： | CSS2 |
| JavaScript 語法： | object.style.bottom="50px" |
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| bottom | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
屬性值
| 值 | 描述 |
|---|---|
| auto | 默認值。通過瀏覽器計算底部的位置。 |
| % | 設置以包含元素的百分比計的底邊位置。可使用負值。 |
| length | 使用 px、cm 等單位設置元素的底邊位置。可使用負值。 |
| inherit | 規(guī)定應該從父元素繼承 bottom 屬性的值。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
這邊對基本的樣式進行了設置，首先在html部分設置了一個名為nav的div，隨后進行基本的默認樣式的清除，并且設置盒子為ie盒子方便后續(xù)的計算，整體都設置為彈性盒，方便后續(xù)矢量文字的操作，對導航欄nav進行定位，方便后續(xù)位置上的操作
<body>
<!-- 目前就一個簡單的nav，推薦大家語義化來寫 -->
<div class="nav"></div>
</body>
<style>
/* 清除一些默認樣式 */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
a{
text-decoration: none;/*確保在瀏覽器中顯示鏈接時，沒有任何文本裝飾，如下劃線。 */
}
/* 對整體進行設置，并且都設置為彈性盒，方便進行操作 */
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222327;
}
/* 設置導航欄樣式 */
.nav{
/* 對導航欄位置進行定位處理，方便后續(xù)的圖標位置的設置 */
position: relative;
width: 400px;
height: 70px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
</style>
這里面呢引用了阿里巴巴的矢量文字效果，具體如何使用請見www.iconfont.cn/manage/inde… 里面的教程，這邊我挑了五個字體圖標加入到了網(wǎng)頁中，并且用ul和lil加入到了導航欄中，目前是豎著排列的，后續(xù)加入css樣式之后會好起來，并且在第一個li上加入了active的css樣式，用于設置選中效果
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4173165_2g4t5a6pg9v.css">
<div class="nav">
<ul>
<li class="active"> <span><i class="iconfont icon-shouye"></i></span></li>
<li > <span><i class="iconfont icon-liuyan"></i></span></li>
<li > <span><i class="iconfont icon-code"></i></span></li>
<li > <span><i class="iconfont icon-box-empty"></i></span></li>
<li > <span><i class="iconfont icon-gitee-fill-round"></i></span></li>
</ul>
</div>這里面呢針對ul和li進行了設置，使之達到了圖下的效果，對ul 和li進行了彈性盒的設置，li中的使用flex：1讓這些矢量文字按等份劃分容器寬度，使之達到了一個距離平均的樣式，并且設置了這個zindex的疊加級別
.nav{
/* 對導航欄位置進行定位處理，方便后續(xù)的圖標位置的設置 */
position: relative;
width: 400px;
height: 70px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.nav ul{
display: flex;
width: 350px;
}
.nav ul li{
height: 60px;
/* flex:1是讓所有的li平均分nav這個容器 */
flex: 1;
position: relative;
z-index: 2;
display: flex;
justify-content: center;
}這里呢針對了span元素和i元素進行了設置，通過span元素蔣i元素中的矢量圖標設置到水平垂直都居中的位置，并且設置了圓角，加入了動畫和動畫延遲，針對i元素將文字大小設置了，并且在html中加入了對應圖標的文字效果，并且為例美觀在每個li元素中都添加了一個選中時候的不同的顏色，使用了變量--clr用于獲取選中效果 行內(nèi)樣式是一種直接在HTML元素上指定樣式的方法，在這種情況下，你使用 style 屬性將 --clr 變量設為不同色
.nav ul li span{
/* 進行定位，使之通過span元素帶動矢量圖標進行水平垂直到中心位置 */
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
border-radius: 50%;
/* 設置鼠標移入的樣式 */
cursor: pointer;
/* 設置動畫過度事件以及延遲 */
transition: 0.5s;
transition-delay: 0s;
}
.nav ul li span i{
color: #222327;
font-size: 1.5em;
}<body>
<!-- 目前就一個簡單的nav，推薦大家語義化來寫 -->
<div class="nav">
<ul>
<!-- 設置active效果，用于獲取選中效果 用于獲取選中效果 行內(nèi)樣式是一種直接在HTML元素上指定樣式的方法，在這種情況下，你使用 style 屬性將 --clr 變量設為不同色 -->
<li class="active" style="--clr:#f44336"><span><i class="iconfont icon-shouye"></i>首頁</span></li>
<li style="--clr:#0fc70f"> <span><i class="iconfont icon-liuyan"></i>留言</span></li>
<li style="--clr:#2196f3"> <span><i class="iconfont icon-code"></i>代碼</span></li>
<li style="--clr:#b145e9"> <span><i class="iconfont icon-box-empty"></i>盒子</span></li>
<li style="--clr:#ffa111"> <span><i class="iconfont icon-gitee-fill-round"></i>gitee</span></li>
<div class="indicator"></div>
</ul>
</div>
</body>下面設置選中時候的樣式，在這里呢針對span元素設置了選中的時候會向上位移到這個地方，并且在矢量圖標的地方設置了開始選中的時候?qū)⑽淖诸伾臑楹捅尘邦伾粯拥念伾@樣當點擊的那一刻，圖標會出現(xiàn)消失的情況，當超出導航欄到黑色部分的時候，文字就會顯示出來，在后面，設置了一個半圓的背景圖，當背景圖位移到文字的位置的時候，矢量文字就會顯示出來
/* 下面是針對選中效果做的樣式處理 */
.nav ul li.active span {
/* 設置了一開始的背景顏色，后面會被取代，設置了點擊的時候會向上移動 */
background: orange;
transform: translateY(-27px);
transition-delay: 0.25s;
}
.nav ul li.active span i {
/* 設置了點擊時候矢量圖標的文字顏色 */
color: #fff;
}
這里呢加入了一個模糊的效果，配合后面的選中的時候圖標顏色顯示會形成一個類似于色彩過度的效果，并且將i元素上面設置的顏色顯示出來
.nav ul li span::before {
content: '';
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 100%;
background: orange;
border-radius: 50%;
filter: blur(40px);
opacity: 0;
transition: 0.5s;
transition-delay: 0s;
}
.nav ul li span::before {
opacity: 0.5;
transition-delay: 0.25s;
}
/* 這里將i元素設置的顏色顯示出來 這兩個樣式塊中都使用了 background: var(--clr); 屬性，可以將背景顏色設置為clr 變量所表示的值。這種使用自定義變量的方式，可以在代碼中統(tǒng)一定義顏色值，以便在需要時進行統(tǒng)一更改。*/
.nav ul li.active span {
background: var(--clr);
}
.nav ul li span::before {
background: var(--clr);
}
這里呢設置了背后的那個向下突兀的圓，其原理是通過位置的調(diào)整和顏色的與背景顏色的一致加上zindex的圖冊優(yōu)先級的顯示，構(gòu)成了這么一個背景半圓形圖
.indicator {
/* 這里進行了定位，并且設置了背景園的位置，同時將圓的背景顏色與背景顏色設為一致，會形成那種向下突兀的圓形，并且加入了動畫 ps：這個過度的小圓弧我是真設置不好，湊合看吧，大佬們有能力的可以試試設置一下*/
position: absolute;
top: -35px;
width: 70.5px;
height: 70px;
background: #222327;
border-radius: 50%;
z-index: 1;
transition: 0.5s;
}
/* 設置左邊半弧 */
.indicator::before {
content: '';
position: absolute;
top: 16px;
left: -34px;
width: 10px;
height: 5px;
background: transparent;
border-radius: 50%;
box-shadow: 20.5px 19px 0 4px #fff;
}
/* 設置右邊半弧 */
.indicator::after {
content: '';
position: absolute;
top: 16px;
left: 54px;
width: 10px;
height: 5px;
background: transparent;
border-radius: 50%;
box-shadow: 20px 19px 0 4px #fff;
}這里呢使用了nth-child選擇器選中對應的i元素，注意，這里設置的平移效果是由clac函數(shù)計算而來，選中其中一個i元素，并且當且僅當具有active類之后的所有兄弟中的.indicator類元素，有一個指示器元素（.indicator）。指示器的位置會根據(jù)活動項目（具有active類的<li>元素）的位置進行調(diào)整。 根據(jù)活動項目的位置設置指示器的水平平移距離，實現(xiàn)一個在導航菜單中顯示當前選中項目的效果。指示器的位置和平移距離是根據(jù)活動項目的索引和固定的長度單位（70px）進行計算的
/*/* nth-child()選中低某個i元素，然后配合js完成背景圓的移動
在CSS中，calc() 是一個用于執(zhí)行計算的函數(shù)。它允許在CSS屬性值中使用數(shù)學表達式。
這種計算函數(shù)通常用于允許動態(tài)計算和調(diào)整元素的尺寸、間距或位置。在 calc() 函數(shù)中，可以使用不同的運算符（如加號 +、減號 -、乘號 *、除號 /）來結(jié)合數(shù)值和單位進行計算。
它可以包含其他長度單位（如像素 px、百分比 % 等），并且可以與其他CSS屬性值和變量一起使用。
當一個 `<li>` 元素具有 `active` 類時，對應的 `.indicator` 元素會相對于活動項目的位置水平平移一個特定的距離。每個 `.indicator` 元素的平移距離相對于其前面的活動項目索引和一個固定的長度單位（`70px`）計算得出。
*/ */
.nav li:nth-child(1).active~.indicator{
transform: translateX(calc(70px*0));
}
.nav li:nth-child(2).active~.indicator {
transform: translateX(calc(70px*1));
}
.nav li:nth-child(3).active~.indicator {
transform: translateX(calc(70px*2));
}
.nav li:nth-child(4).active~.indicator {
transform: translateX(calc(70px*3));
}
.nav li:nth-child(5).active~.indicator {
transform: translateX(calc(70px*4));
}
這里配合js代碼，通過foreach為點擊的li或者為所有的li進行添加或者移入active樣式
<script>
//通過 `lis.forEach(li => li.addEventListener('click', function () {...}))` 遍歷 `lis` 數(shù)組中的每個元素，并為每個元素都添加一個 ‘click’ 事件監(jiān)聽器。
//在每次點擊事件中，使用 `lis.forEach(item => {...})` 遍歷 `lis` 數(shù)組中的每個元素，將它們的 `active` 類都移除，然后在當前被點擊的元素上添加 `active` 類，
const lis = document.querySelectorAll('.nav li')
lis.forEach(li => li.addEventListener('click', function () {
lis.forEach(item => {
item.classList.remove('active');
this.classList.add('active');
})
}))
</script>這里配合js使用的動畫是值得我學習的，通過js點擊賦予不同的liactive樣式，又根據(jù)active所在的li元素經(jīng)過計算對.indicator元素進行平移，使之完成這個動畫效果
基于css3寫出的底部導航欄效果（詳細注釋
原文鏈接：https://juejin.cn/post/7262334378759405605
隨時科技的進步，現(xiàn)在人們對物質(zhì)的追求越來越高，想當初還是modem撥號上網(wǎng)時，我們會等上1到2分鐘打開一個網(wǎng)站而高興很久，而現(xiàn)在網(wǎng)速越來越快，同時訪問的用戶也越來越多，人們對速度的追求也越來越高， 當搜索一個物件時，一個頁面如果10秒鐘還沒有出現(xiàn)內(nèi)容時，我相信你會毫不猶豫中換另一個網(wǎng)站。
現(xiàn)在的網(wǎng)頁特效越來越豐富，那么所需要調(diào)用和加載的javaScript就是越多。而瀏覽器在解析我們頁面時，是從上到下依次解析，無論是HTML還是CSS，還是我們的Javascript。
如果我們站在用戶及體驗者的角度，我們是希望在打開一個頁面時，能夠在最短的時間內(nèi)看到網(wǎng)頁內(nèi)容，而這一要求就需要我們前端開發(fā)人員在頁面中導入JS時的導入位置有了要求。
理論上來說我們可以在頁面的任意位置導入script標簽，但是對于前端頁面優(yōu)化來講，還是放在底部是最佳的，因為如果JS執(zhí)行出現(xiàn)錯誤了，最起碼頁面中的元素還能加載出來，因為DOM文檔是從上往下的順序執(zhí)行的。
正所謂事有輕重緩急，如果我們將script標簽放到body的前面，當瀏覽器在解析代碼時，會中斷我們頁面內(nèi)容的加載，而先解析script標簽中的內(nèi)容，而后再來加載頁面，從而延緩了頁面內(nèi)容顯示的時間，讓用戶等待的時間延長，降低用戶的體驗度。
像有的飯店經(jīng)營方式不一樣，用戶就餐的體驗也不一樣，當就餐人員很多時，為了避免用戶等待太長時間，可以每桌來上一兩個菜， 讓用戶先慢慢吃，而不是上完一桌，再上一桌，使部分用戶等待太長時間， 從而提高用戶體驗。
那我們繼承來討論，我們的script標簽究竟放哪里合適呢?如上面所說如果我們放到body上而，會影響頁面的優(yōu)先加載，從而影響用戶的體驗。那是不是我們只要把script標簽放到body下面就可以了呢?其時，在HTML 2.0起放在“body標簽閉合之后”就是不合標準的。之所以但是瀏覽器卻不會報錯，是因為如果在“body標簽閉合之后”后再出現(xiàn)script或任何元素的開始標簽，都是parse error，瀏覽器會忽略之前的，即視作仍舊在body內(nèi)。所以實際效果和寫在“body標簽閉合之前”之前是沒有區(qū)別的。
所以，只要是讓瀏覽器做了多余的事都是不好的，雖然差別細微，但是咱們還是按照標準來，放在“body標簽閉合之前”。
我們所做的一切其實只是為方便用戶體驗，所以我們的宗旨，就是提升用戶體驗。讓頁面優(yōu)先加載顯示內(nèi)容。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
