欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

前端制作開發(fā)之CSS網(wǎng)格線制作

2023-02-18    分類: 網(wǎng)站建設(shè)

最近在工作中,遇到需要繪制網(wǎng)格線的效果,如下圖:
我嘗試用了三種方式去做,第一種方式是用linear-gradient()做的,首先,
Html:

網(wǎng)格線效果的Css:
background: -webkit-linear-gradient(top, transparent 180px, #c3c3c3 0), -webkit-linear-gradient(left, transparent 306px, #c3c3c3 0);
background-size: 307px 181px;
考慮兼容性,可以加上一些前綴:
-moz-linear-gradient、-ms-linear-gradient、-webkit-linear-gradient

瀏覽器支持如下:
-webkit-linear-gradient(top, transparent 180px, #c3c3c3 0)和-webkit-linear-gradient(left, transparent 306px, #c3c3c3 0);用意是是上面180px設(shè)置了透明的,左邊開始306px設(shè)置了透明的,然后水平方向限制只顯示307px,在垂直方向設(shè)置限制只顯示181px的范圍,加上background默認了repeat的,那么就能到想要的網(wǎng)格線了,不過此次我需要做的效果不能用這個,因為這里設(shè)置了固定的值,意味了網(wǎng)格的大小固定了,下面兩種方式可以得到根據(jù)屏幕大小變化,網(wǎng)格數(shù)不變而自適應的網(wǎng)格。

第二種方式需要在div. grid里面添加多個span,一個span代表一個網(wǎng)格,用grid布局做,grid-gap是設(shè)置網(wǎng)格布局中列和行之間的間距大小,grid-template-columns是設(shè)置網(wǎng)格布局中的列寬,grid-template-rows是設(shè)置網(wǎng)格布局中的行高,用網(wǎng)格布局做這個網(wǎng)格線,需要在div.grid的子級設(shè)置邊框。
Css:
.grid{
width: 100vw;
height: 100vh;
grid-template-columns: auto auto auto auto auto;
grid-template-rows: auto auto auto auto;
display: grid;
grid-gap: 0;
}
.grid span{
opacity: 0.25;
border: #FFFFFF solid 1px;
margin-left: -1px;
margin-top: -1px;
}
不過整個容器最外邊我不需要有邊框,于是我選擇了用第三種方式做。第三種也是需要在div. grid里面添加多個span,一個span代表一條線,然后,布滿屏幕的網(wǎng)格就是由一條一條線組成,例如:上面需要做的效果,就是四行五列,需要7條線,那么設(shè)置7個span,前面四個span的代表的是四條豎線,后三個是三條橫線,然后設(shè)置如下的樣式就能得到想要的效果。
Css:
.grid{
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 1;
pointer-events: none;
}
grid span{
display: block;
position: absolute;
background: rgba(255,255,255,0.25);
}
.grid span:nth-child(1), .grid span:nth-child(2), .grid span:nth-child(3), .grid span:nth-child(4){
bottom: 0;
width: 1px;
height: 100%;
}
.grid span:nth-child(1){
left: calc(20% - .5px);
}
.grid span:nth-child(2){
left: calc(40% - .5px);
}
.grid span:nth-child(3){
left: calc(60% - .5px);
}
.grid span:nth-child(4){
left: calc(80% - .5px);
}
.grid span:nth-child(n+5) {
left: 0;
height: 1px;
width: 100%;
}
.grid span:nth-child(5) {
top: calc(1 * 25vh - .5px);
}
.grid span:nth-child(6) {
top: calc(2 * 25vh - .5px);
}
.grid span:nth-child(7) {
top: calc(3 * 25vh - .5px);

分享題目:前端制作開發(fā)之CSS網(wǎng)格線制作
瀏覽地址:http://www.aaarwkj.com/news/237892.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、搜索引擎優(yōu)化、電子商務、網(wǎng)站設(shè)計公司、App設(shè)計、企業(yè)建站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護公司
国产精品久久电影观看| 91九色国产在线播放| 一区二区三区四区在线视频观看 | 男人午夜激情免费网站| 国产午夜激情在线播放| 亚洲欧美国产另类精品| 国产手机在线91精品观看| 91久久亚洲综合精品日本 | 国产精品成人大片在线播放| 亚洲一区二区视频在线播放| 亚洲欧美成人自偷自拍一区| 久久精品国产免费夜夜嗨| 欧美日韩国产一区二区三区在线观看| 亚洲成在人天堂一区二区| 欧美日韩免费爱爱视频| 麻豆人妻少妇精品毛片| 成人性生交大片免费看中文| 日本经典三级在线视频| 精品av一区二区在线| 亚洲熟女少妇视频自拍| 日韩人成理论午夜福利| 中文字幕精品一区二区三区精品 | 日本毛茸茸的丰满熟妇| 视频久久这里只有精品| 丰满少妇一区二区三区专区| 国产精品一区二区三区乱色| 美女被男人操国产精品| 亚洲青青草原自拍偷拍| 少妇互射视频免费视频| 色在线观看综合亚洲欧洲| 亚洲国产日韩欧美在线| 亚洲精品日韩一区二区| 欧美日韩国产一区二区的| 性生活真实视频免费看| 91久久高清国语自产拍| 黑人巨大精品欧美黑寡妇| 日韩高清不卡免费视频| 国内精品人妻久久毛片| 国产精品女同久久久久久| 岛国少妇av之中文字幕| 丁香六月色婷婷亚洲激情|