                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /Grid布局基礎(chǔ)

請教grid-template-areas，用stylus怎么寫??？出不來應(yīng)有的效果

用stylus來寫網(wǎng)格區(qū)域，引用的時(shí)候，出不來效果，正常的css沒問題，特請教。

蘭亭一夢

2019-04-07

源自：Grid布局基礎(chǔ) 5-4

關(guān)注問題我要回答

2043

操作

收起

2 回答

蘭亭一夢提問者
2019-04-07

寫成一行程序沒問題，程序正常執(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"

但是格式很難看，失去了所見既布局的意思，多行的話，代碼沒有執(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"

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

WindBelll

源碼看下

2019-04-08 回復(fù) 有任何疑惑可以回復(fù)我~

#2

愛米

您好，方便把您寫的源碼發(fā)出來看一下嗎？

2019-04-11 回復(fù) 有任何疑惑可以回復(fù)我~

#3

SuperHulk

1111111

2019-04-19 回復(fù) 有任何疑惑可以回復(fù)我~

查看1條回復(fù)

WindBelll
2019-04-07

給你個例子看看，歡迎采納
<!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);
????????/*第一行與第二行之間用空格隔開即可，需要用雙引號包裹起來*/
????????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ū)域的取同一個名字即可*/
?.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>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

蘭亭一夢提問者

兄弟你好，寫成一行沒問題，多行不行

2019-04-07 回復(fù) 有任何疑惑可以回復(fù)我~