0%

Amos金魚都能懂的切版教學影片- csscoke NO013

My page

HTML架構

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>

<div class="side-menu">
<form action="">
<input type="search">
<button><i class="fa fa-search"></i></button>

</form>
<nav>

<a href="#" id=""><i class="fa fa-users" aria-hidden="true"></i>鐵人賽</a>
<a href="#" id=""><i class="fa fa-gavel" aria-hidden="true"></i>暴力班</a>
<a href="#" id=""><i class="fa fa-object-group" aria-hidden="true"></i>RWD 醬子</a>
<a href="#" id=""><i class="fa fa-globe" aria-hidden="true"></i>金魚網頁</a>
<a href="#" id=""><i class="fa fa-cutlery" aria-hidden="true"></i>金魚切版</a>
</nav>


</div>

</body>

.side-menu

  • 設定寬度、背景色彩
  • 利用flex排列,並設定直向
    1
    2
    3
    4
    5
    6
    7
    .side-menu {
    width: 300px;
    height: 100%;
    background-image: linear-gradient(0deg, #13547a, #80d0c7);
    display: flex;
    flex-direction: column;

側邊選單裡的選項(nav)

1
2
3
4
5
6
7
8
9
10
11
12


nav a {
/* 讓a可以一行一行排列 */
display: block;
padding: 10px;
text-decoration: none;
color: #fff;
position: relative;
}


  • 設定底線,利用+篩選器

1
2
3
4
nav a+a {
border-top: 1px solid #fff;
}

  • 使用此方式,會讓線滿版,無法單獨調整間距
1
2
3
4
5
6
7
8
nav a+a::before {
content: '';
position: absolute;
border-top: 1px solid rgba(255, 255, 255, .4);
left: 10px;
right: 10px;
top: 0;
}

form 搜尋表

  • 讓inpt與button可以緊密並排
1
2
3
.side-menu form {
display: flex;
margin: 0 10px 50px;}

1
2
3
4
5
.side-menu form input,
.side-menu form button {
border: none;
padding: 5px 10px;
}

  • 讓form增加框線
    1
    2
    3
    4
    5
    6
    .side-menu form {

    /* 設定表單外框形狀有圓弧形 */
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, .4);
    }

  • 調整寬度
  • 但要注意的是,如此調整後就蓋住了form的框線
1
2
3
4
5
6
7
8
9
10
/* 寬度300,左右2邊有10px,剩下280,希望左邊選單大一點點 */


.side-menu form input {
width: 230px;
}

.side-menu form button {
width: 50px;
}

  • 設背景顏色為透明
1
2
3
4
5
6
7
8
9
10
.side-menu form input,
.side-menu form button {
border: none;
padding: 5px 10px;

/* 設定透明才會讓,form表單的框顯示清楚 */
background-color: transparent;
color: #fff;
}

  • 取消focus的外框
1
2
3
4
.side-menu form input:focus,
.side-menu form button:focus {
outline: none;
}

動畫

1
2
3
4
5
6
7
8
9
10
11
/* 動畫:讓icon消失,文字左縮 */
nav a .fa {
margin-right: -1.1em;
transform: scale(0);
transition: .3s;
}

nav a:hover .fa {
margin-right: 0em;
transform: scale(1);
}`