金魚都能懂的網頁切版:16、17
通常我們在電商網站最後準備要結帳時,會看到進度條,因此這個主題是我們必須要熟悉的小單元。
https://codepen.io/mikeyam/pen/pobzpeW
外層flex排列
html, body{
height: 100%;
}
body{
display: flex;
align-items: center;
background-color: #546377;
}
.list{
width: 100%;
display: flex;
justify-content: center;
}
內層一樣用flex做到水平垂直居中
.list li{
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
width: 200px;
height: 200px;
background: linear-gradient(20deg,#185a9d,#43cea2 );
box-shadow: 0px 0px 0px 4px #fff;
border-radius: 50%;
position: relative;
color: #fff;
font-size: 30px;
}
.list li .icon{
font-size: 50px;
margin-bottom: 6px;
}
+ 選取器除了第一個li,其他都有作用
.list li + li{
margin-left: 100px;
}
.list li + li::before{
content: '';
position: absolute;
width: 100px;
/* 因為中間距離是100px */
height: 5px;
background-color: #43cea2;
top: 0;
bottom: 0;
margin: auto;
left: -100px;
z-index: -1;
box-shadow: 0px 0px 0px 3px #fff;
}
~ 選取器,只要在li.active之後的,都會有作用
.list li.active ~ li{
background: linear-gradient(20deg,#999,#ccc);
}
.list li.active ~ li::before{
background-color: #999;
}
登入列表是連接前後台必備的頁面,因此也是常常會切到的版
https://codepen.io/mikeyam/pen/pobzVNr
HTML部分,用form表單做外層,裡面又分三小塊,帳號、密碼、按鈕
<div class="login">
<form class="form">
<h2>會員登入</h2>
<div class="group">
<label for="user_id">帳號</label>
<input type="text" name="" id="user_id">
</div>
<div class="group">
<label for="user_password">密碼</label>
<input type="text" name="" id="user_password">
</div>
<div class="btn-group">
<button class="btn">登入</button>
<button class="btn">取消</button>
</div>
</form>
</div>
外層,把登入資料做垂直水平居中
html, body{
height: 100%;
}
body{
background: url('https://images.unsplash.com/photo-1601933563307-c2cd93e9a0f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60')
no-repeat center center / cover;
display: flex;
justify-content: center;
align-items: center;
}
內部的背景,使用 backdrop-filter: blur(2px); 模糊效果
.login{
width: 600px;
height: 500px;
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
color: #fff;
border: 10px solid #fff;
box-shadow: 0 0 60px #000;
backdrop-filter: blur(2px);
/* 好效能 */
display: flex;
justify-content: center;
align-items: center;
}
以下沒使用到什麼特殊css,大小結構可以依每個網頁做配置
.form{
width: 400px;
color: #fff;
}
.form h2{
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #fff;
}
.form .group{
margin-bottom: 20px;
}
.form label{
line-height: 2;
}
.form input{
width: 100%;
border: 1px solid #aaa;
border-radius: 5px;
line-height: 3;
}
.form input:focus, .btn:focus{
outline: none;
}
.form .btn-group{
font-size: 0px;
margin-top: 50px;
}
.form .btn{
font-size: 20px;
border-radius: 5px;
background-color: #6ab4fe;
width: 190px;
padding: 10px 0;
}
.form .btn + .btn{
margin-left: 20px;
}