請(qǐng)教grid-template-areas，用stylus怎么寫(xiě)啊？出不來(lái)應(yīng)有的效果
用stylus來(lái)寫(xiě)網(wǎng)格區(qū)域，引用的時(shí)候，出不來(lái)效果，正常的css沒(méi)問(wèn)題，特請(qǐng)教。
蘭亭一夢(mèng)
2019-04-07
2 回答
舉報(bào)
0/150
提交
取消
2019-04-07
寫(xiě)成一行程序沒(méi)問(wèn)題，程序正常執(zhí)行
? ? grid-template-areas "title title header header" "time time swiper swiper" "block1 block2 swiper swiper" "block3 block4 swiper swiper" "block5 block6 swiper swiper" "block7 block7 video info"
但是格式很難看，失去了所見(jiàn)既布局的意思，多行的話，代碼沒(méi)有執(zhí)行? ?
?grid-template-areas "title title header header"
? ? ? ? ? ? ? ? ? ? ? ? ???????????"time time swiper swiper"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"block1 block2 swiper swiper"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"block3 block4 swiper swiper"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"block5 block6 swiper swiper"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"block7 block7 video info"
2019-04-07
給你個(gè)例子看看，歡迎采納 <!DOCTYPE?html> <html> <head> ?<meta?charset="UTF-8"> ?<title>grid-template-areas</title> ?<style> ?*{ ??margin:0; ??padding:0; ??list-style:none; ?} ?.container{ ??border:1px?solid?#000; ????????width:600px; ????????height:200px; ????????margin:50px?auto; ????????display:grid; ????????/*repeat(repeat,value)函數(shù)，只試用于下面兩者*/ ????????grid-template-columns:100px?repeat(2,200px)?100px; ????????grid-template-rows:repeat(2,100px); ????????/*第一行與第二行之間用空格隔開(kāi)即可，需要用雙引號(hào)包裹起來(lái)*/ ????????grid-template-areas:"one?area?area?two" ?????????????"three?area?area?four"; ????????/*align-items:center;*/ ????????/*justify-items:center;*/ ????????text-align:center; ????????line-height:100px; ????????/*place-items:center;*/ ?} ?/*相同區(qū)域的取同一個(gè)名字即可*/ ?.container>div:nth-child(1){ ??background:blue; ??grid-area:one; ?} ?.container>div:nth-child(2){ ??background:#fff; ??grid-area:area; ?} ?.container>div:nth-child(3){ ??background:#fff; ??grid-area:area; ?} ?.container>div:nth-child(4){ ??background:red; ??grid-area:two; ?} ?.container>div:nth-child(5){ ??background:yellow; ??grid-area:three; ?} ?.container>div:nth-child(6){ ??background:#fff; ??grid-area:area; ?} ?.container>div:nth-child(7){ ??background:#fff; ??grid-area:area; ?} ?.container>div:nth-child(8){ ??background:orange; ??grid-area:four; ?} ?</style> </head> <body> ?<div?class="container"> ??<div>1</div> ??<div></div> ??<div></div> ??<div>2</div> ??<div>3</div> ??<div></div> ??<div></div> ??<div>4</div> ?</div> </body> </html>