這次主要修改如下
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
沒有留言:
張貼留言