分享最近專案中使用的對icon的圓環形布局的css寫法，使用16個點在圓上均勻分布的原理，使用absolute定位，計算相應的top,left。css採用scss語法。
先來一波效果圖
使用react框架進行相關布局
import react from
'react'
;import
const index: react.fc=
()=>
>
"icons/01.png" classname=
"img1" alt=""/
>
"icons/02.png" classname=
"img2" alt=""/
>
"icons/03.png" classname=
"img3" alt=""/
>
"icons/04.png" classname=
"img4" alt=""/
>
"icons/05.png" classname=
"img5" alt=""/
>
"icons/06.png" classname=
"img6" alt=""/
>
"icons/07.png" classname=
"img7" alt=""/
>
"icons/08.png" classname=
"img8" alt=""/
>
"icons/09.png" classname=
"img9" alt=""/
>
"icons/10.png" classname=
"img10" alt=""/
>
"icons/11.png" classname=
"img11" alt=""/
>
"icons/12.png" classname=
"img12" alt=""/
>
"icons/13.png" classname=
"img13" alt=""/
>
"icons/14.png" classname=
"img14" alt=""/
>
"icons/15.png" classname=
"img15" alt=""/
>
"icons/16.png" classname=
"img16" alt=""/
>
<
/div>
<
/div>);
};export
default index;
html,
body
} // sin22.5°=(2-2^0.5)^0.5/2=0.383
// cos22.5°=(2+2^0.5)^0.5/2=0.924
// r=418px;
// 418/sqrt2=295.5px;
$r:418px;
$rr: 295.5px;
.img1
.img2
.img3
.img4
.img5
.img6
.img7
.img8
.img9
.img10
.img11
.img12
.img13
.img14
.img15
.img16
img:hover
}
)。
實現帶Icon的Input登入框布局
實現 基本思路 注意position relative脫離文件流，但是其本身的位置是在文件中佔據空間的 如 運用position relative調整位置後，達到效果，卻有著視覺 空行 的效果 是因為文件流中，仍然為div icon預留了它本身應有的位置，非手動新增的margin padding等 ...
關於css3的icon翻轉
效果比較簡單，這裡總結一下.1.基本結構 實現方法可能有很多種,我這裡用的是transform rotatey 方法.首先結構如下 反轉的實現是準備兩層面,一層是hover前的,另一層是翻轉後的展現,這裡是普通的文字.由於是反轉的兩層,因此兩層都需要設定position absolute 讓它脫離文...
CSS 常見的css布局
1 單列布局 主要使用max width屬性樣式實現，使用max width是為了當螢幕小於2000px時不出現滾動條 2 兩列自適應布局 兩列自適應布局是指一列由內容撐開，另一列撐滿剩餘寬度的布局方式，為了觸發ie瀏覽器的haslayout屬性，需設定zoom 1 2.1 使用float over...