Copyright © 2019 金魚都能懂得這個網頁怎麼切
```
```css
/* style.css */
/******************** Main Starts ********************/
* {
margin: 0;
padding: 0;
list-style: none;
font-family: "Noto Sans TC", sans-serif;
}
body {
background-color: #000;
}
.main-footer {
padding: 150px 0 0;
background: linear-gradient(-20deg, #3f5494, #08c7a5);
}
.main-footer .container {
display: flex;
width: 1200px;
margin: auto;
}
.footer-item {
/* 組合技：讓子元素自動按容器等分空間 */
width: 0;
flex-grow: 1;
/* item 之間拉開距離 */
margin: 0 20px;
}
.footer-item h4 {
font-size: 24px;
color: #fff;
/* 和 nav 拉開距離 */
padding-bottom: 0.5em;
border-bottom: 1px dotted #fff;
margin-bottom: 0.5em;
}
.footer-item nav {
display: flex;
flex-direction: column;
}
.footer-item nav a {
color: #fff;
line-height: 1.4;
text-decoration: none;
padding: 5px 0;
}
.footer-item nav a:hover {
color: #fa0;
}
.footer-subs {
display: flex;
flex-direction: column;
}
.footer-subs form {
display: flex; /* 確保在 row 上排列 */
width: 100%; /* 單純確保 form 拉滿 100%*/
margin: auto 0; /* 上下填滿 (垂直置中) */
}
.footer-subs input[type="text"],
.footer-subs input[type="submit"] {
border: none; /* browser 預設他們有 border (把 border 拿掉) */
padding: 5px 10px; /* 拉寬高 */
}
.footer-subs input[type="text"] {
/* 組合技：也可以讓某個子元素拉到最滿 */
width: 0;
flex-grow: 1;
}
.footer-subs input[type="submit"] {
color: #70f6df;
background-color: #3e5293;
cursor: pointer; /* Rogelio */
}
.fa-angle-right { /* inline CSS SVG (速度比較快，不用 request) */
display: inline-block;
vertical-align: text-top;
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m9 6l6 6l-6 6'/%3E%3C/svg%3E");
}
.copyright {
width: 100%;
margin-top: 100px;
text-align: center;
padding: 10px 0px;
background-color: #3e5293;
color: #70f6df;
}
/******************** Main Ends ********************/
```
### My Practice