使用 CSS 浮動制作網頁
下面是一個使用 CSS 浮動制作網頁的示例:
HTML 代碼:
CSS 代碼:
.浮動 {
position: relative;
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
width: 80%;
height: 20%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display: inline-block;
在上面的示例中,`
` 元素被定義為寬度為 300 像素、高度為 200 像素的容器,并使用 CSS 浮動將其向上浮動 50%。`
` 元素被定義為絕對定位,并將其位置設置為 50% 重疊在 `.浮動` 元素上,使其占據整個頁面的頂部。`
` 元素被定義為絕對定位,并將其位置設置為 50% 重疊在 `.浮動` 元素上,使其占據整個頁面的下方。`` 元素被定義為絕對定位,并將其位置設置為 0 重疊在 `.浮動` 元素上,使其位于頁面的頂部。
通過使用 CSS 浮動,可以創(chuàng)建靈活、美觀的網頁布局,使網頁更加易于維護。