---
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推開 (附圖和上面範例不同人寫的，所以命名不同，都是在講美好用戶體驗這區塊)

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



<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%



## 好評如潮
#### 穎旻老師寫法
img定位並用transform位移 ( 也可以只用top、left推 )


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

## 快速了解客戶輪廓


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

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