2017年7月26日 星期三

內小創作園地的二次修改

這次主要修改如下

1.橫向的按鈕編排,改成縱向
按鈕採用了漸層的方式

以阿壢的顏色為主體,往深色方向漸變
方法是: 如紅色的那三列
.mybtn {
    width:158px;
    padding:10px;
    color: #ffffff;
    background-color: #97e9ff;
    background-image: linear-gradient(to bottom, #97e9ff, #2f96b4);
    background-repeat: repeat-x;
    text-decoration: none;
    text-align:center;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    font-size:16px;
  }

2.作品列表改用展開的模式
這個使用 data-toggle='collapse' data-target='#semelist' 可以很容易就表現出來,但是要讓選擇list時自動展開,就發生困難了。
自動展開可以用
<script>
  $( document ).ready(function() {
      $('#semelist').addClass('in');
    });
</script>

但是一定要在 bootstrap.js之後,這個問題花了好多時間才發現。

3. 作品統計時依照年級會有漸層色彩,這部分尚未完成。

4.輸入框的模式改成如下的樣式
這個和game的有所不同,但是比較簡單

<style>
.my {
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    background: #93E9FF;
    padding: 20px;
    width: 200px;
    height: 50px;
    border-collapse: separate;
}

.my2 {
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border: 2px solid #93E9FF;
    padding: 10px;
    width: 200px;
    height: 30px;
    text-align:center;
    border-collapse: separate;
}
</style>

5. ICON

沒有留言:

張貼留言