---
# System prepended metadata

title: 3. 切版任務二攻略-chatbot
tags: [公益程式體驗營]

---

---
tags: 公益程式體驗營
---
# 3. 切版任務二攻略-chatbot
<!--ok-->
container寬度通常會在960~1440px
新框架twilwindcss

## 美好用戶體驗
* 表尾分footer、footer-plan兩個區塊來寫
<!--footerplan-->
    <div class="footer-plan">
        <div class="container">           
            <h2>\ 美好用戶體驗，從對話開始 /</h2>
            <a href="#">方案費用</a>           
        </div>
    </div>
    
<!--footer-->
    <div class="footer">
        <div class="container">
            <p class="text">© 2022 chatTalker. All Rights Reserved.</p>
        </div>
    </div>  

* footer-plan範例用display:flex來排版，高度可寫死或用pt pb推開 (附圖和上面範例不同人寫的，所以命名不同，都是在講美好用戶體驗這區塊)
![](https://i.imgur.com/0mLhboR.png)


## 任何角色我都能給-四欄並排方式
### [Dora助教寫法](https://dorahlc.github.io/ChatTalkerAI/index)

![](https://i.imgur.com/hf3syqw.png) 

![](https://i.imgur.com/EnQMzX1.png)
```
<div class="creat">
    <h3>任何的角色，我都能給</h3>
    <p class="creat-txt">量身打造您想要的專屬服務，幫助您迅速判斷成效、並加快決策</p>
    <ul class="creat-list">
          <li class="creat-item"></li>
          <li class="creat-item"></li>
          <li class="creat-item"></li>
          <li class="creat-item"></li>
    </ul>
</div> 
``` 
```
.creat-list {
    display: flex;
    gap: 16px;  /*或用justify-content:space-around;*/
    flex-wrap: wrap;
}

.creat-item{
    width:260px        
}

/*手機版改用flex-direction: column*/
@media(max-width:768px){
    .creat-list{
        flex-direction: column; 
        align-item:center;
    }
}
```

* 若使用wrap也可不用改軸向方式，用%即可
```
.creat-list {
    display: flex;
    justify-content:space-around;    
    flex-wrap: wrap;
}
.creat-item{
width:25%;
}
@media(max-width:992px){
    .creat-item{
    width:50%;
    }
}
@media(max-width:768px){
    .creat-item{
    width:100%;
    }
}
```



### 穎旻老師寫法
外層寫
display:flex;
flex-wrap:wrap;

li用width:calc(25%-16px)
手機版再變成100%

![](https://i.imgur.com/kpvBBGl.png)

![](https://i.imgur.com/lpt2dNa.png)




## 好評如潮
#### 穎旻老師寫法
img定位並用transform位移 ( 也可以只用top、left推 )
![](https://i.imgur.com/ttFkzbU.png)

![](https://i.imgur.com/xMHzUTP.png)

#### [Dora助教寫法](https://dorahlc.github.io/ChatTalkerAI/index)
img外層不在包div 直接用top推-56px
![](https://i.imgur.com/ufVbCd2.png)



## 快速了解客戶輪廓

![](https://i.imgur.com/XNcgepG.png)

* 手機版左右區塊排版相反用flex-direction: column-reverse;
* 右側整個區塊上下居中用align-items: center;
* [Dora助教寫法](https://dorahlc.github.io/ChatTalkerAI/index)、[範例擷取](https://codepen.io/tinchen/pen/zYReybQ)

## 第二頁方案按鈕
#### 穎旻老師寫法
手機版方案的地方可以左右滾動
![](https://i.imgur.com/Reoi2Uv.png)
#### [Dora助教寫法](https://dorahlc.github.io/ChatTalkerAI/index)
手機版可以看到全部方案
![](https://i.imgur.com/NadjZFG.png)

![](https://i.imgur.com/FlPobsm.png)

 



