html頁面形狀圓角實現示例 元素定位小知識點

2021-06-23 02:45:07 字數 764 閱讀 2405

position屬性分析:

relative---->相對定位

相對定位:相對於元素原來(不設position屬性時,元素與其他頁面元素在頁面中依次排列時的位置)的位置進行移動,

元素原來的空間位置會保留下來。------->當前設定relative屬性的元素與頁面其他元素不在同一平面上。

如果top值是正值,元素的位置就向下移動,如果是負值,元素的位置就向上移動。

如果left值是正值,元素的位置就向右移動,如果是負值,元素的位置就向左移動。

absolute----->絕對定位

絕對定位:相對於離此元素最近的,並且有定位屬性(有position屬性,且值不是static)的 父級元素進行定位。而此元素原來的空間位置(不設position屬性時,

元素與其他頁面元素在頁面中依次排列時的位置)不會保留。

絕對定位有四個值可以控制方向:top、right、bottom、left

在有固定大小的區域內,對元素進行定位,最好用絕對定位。

如果當前元素的所有父級元素都沒有定位屬性時,則元素就相對於當前瀏覽器進行絕對定位。

z-index屬性(層級屬性):

-------->針對有position屬性的元素設定的屬性

元素層級值越大的,元素的位置越在上面。----->應用例項:許願牆

HTML實現頁面計時

在網上看到有些 頁尾部分有顯示 存活時間,如下 這是我自己寫完後的截圖,它會從 部署之後開始計時,直至重啟伺服器後才會重置 需要使用ajax去後端讀取寫死的當前時間,不然每次重新整理頁面就會重置時間 charset utf 8 insert title heretitle head 本站已存活 ye...

HTML頁面中新增Canvas標籤示例

在html頁面的 中,可以用像下面的 來新增標籤 複製 如下 your browser does not support html5 canvas.譯註 對於canvas,以下寫法是不允許的 複製 如下 讓我們來看一下上述 到底做了些什麼。標籤有3個主要的屬性,包括 1.id。我們可以在j ascr...

html頁面js實現頁面彈框

1 按鈕 新增二級分類2 彈框內容 關閉 二級分類名稱 3 js部分 彈框js部分 start by songfayuan 彈出隱藏層 function showdiv show div,bg div 關閉彈出層 function closediv show div,bg div 關閉彈出層 fun...