金魚都能懂的網頁切版:6、7
https://codepen.io/mikeyam/pen/KKzOgNQ?editors=1100
外層 container 一樣用1200px 並且置中
.footer{
padding: 150px 0 0;
background: linear-gradient(-20deg,#3F5494,#08c7a5);
}
.container{
display: flex;
max-width: 1200px;
margin: auto;
}
原本: flex-grow:0; 預設值爲 0。依照設定比例分配剩餘空間。
現在因為每個 footer-item 都有設定 flex-grow:1;,所以大家平均分配剩餘比例。
參考:
https://ithelp.ithome.com.tw/articles/10208741
.footer-item{
width: 0;
flex-grow: 1;
margin: 0 20px;
}
nav 都設定flex特性,並改變主軸線,預設為row,改為column
.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-item h4{
font-size: 24px;
color: #fff;
border-bottom: 1px dotted #fff;
margin-bottom: .5em;
padding-bottom: .5em;
}
.footer-sub input[type="text"] :可以修改input標籤裡的css樣式
使用
.footer-sub{
display: flex;
flex-direction: column;
}
.footer-sub form{
display: flex;
width: 100%;
margin: auto 0px;
}
.footer-sub input[type="text"],
.footer-sub input[type="submit"]{
border: none;
padding: 5px 10px;
}
.footer-sub input[type="text"]{
width: 0;
flex-grow: 1;
}
.footer-sub input[type="submit"]{
color: #70f6df;
background-color: #3e5293;
}
https://codepen.io/mikeyam/pen/PoNMGgJ
外層同上面頁尾區塊的設定一樣
.header{
background: linear-gradient(-20deg,burlywood,#fe70d8);
}
.container{
display: flex;
padding: 20px;
max-width: 1200px;
margin: auto;
}
這裡作用是要觸碰時,可以使文字上升,並在下方顯示border
使文字上升:
在main-nav外層加入display:flex;,改變inline不能升高原因,或在.main-nav a 把 a 連結設定為display: inline-block;使其可設定高度。
.logo{
width: 100px;
}
.logo img{
width: 100%;
vertical-align: middle;
}
.main-nav{
display:flex;
margin: auto;
}
.main-nav a{
text-decoration: none;
color: #fff;
padding: 5px 1em;
position: relative;
transform: translateY(0px);
transition: 1s;
}
.main-nav a:hover{
transform: translateY(-5px);
}
.main-nav a::after{
content: '';
position: absolute;
left: 50%;
right: 50%;
height: 0;
bottom: -5px;
border-bottom: 1px solid #fff;
transition: .3s;
}
.main-nav a:hover::after{
left: 0;
right: 0;
}
.main-search button:focus, .main-search input:focus
使用到偽類的:focus,可以去除掉點擊時,會有預設的內邊框
.main-search{
display: flex;
}
.main-search button, .main-search input{
border: none;
background-color: #fff;
padding: 5px 10px;
}
.main-search button:focus, .main-search input:focus{
outline: none;
}
.main-search button{
border-radius: 0 200px 200px 0;
}
.main-search input{
border-radius: 200px 0 0 200px;
}