HTML&CSS

從零開始寫自己的靜態網頁

講師介紹

  • 莊貴淳，可以叫我烏龜
  • 高二升高三
  • 明德數資班第二屆 資訊組
  • 會考 32.8
  • 成功高中電子計算機研習社 35 屆公關兼教學
  • 曾擔任 Figma、Notion、網頁 教學
  • IZCC 2022 暑訓執秘
  • Macbook 人
  • HTML、TailwindCSS、Figma、基礎 C++、Flask、Notion

網頁設計簡介

了解 HTML、CSS、JS 是什麼

以及他們各自的作用

通水、通瓦斯、通電

HTML

ＣＳＳ

明德國中校網

document.querySelectorAll('style,link[rel="stylesheet"]').forEach(item => item.remove())

明德國中校網

按下 F12 ，打開開發人員工具

Disable JavaScript

Disable CSS

1

網頁簡介


與建置環境

2

介紹 HTML 語法

實作幾個 HTML 標籤

介紹 HTML 學習資源

3

介紹 CSS 語法

將 CSS 套到 HTML 中

介紹 CSS 學習資源

5

實作個人網頁

 

疑難排解

4

發想並建構

「個人網頁」所需元素

在網上找到喜歡的設計

6

未來學習路程

未來可以走的職業

學長諮詢小時間（？）

建置環境

下載 VScode

寫出第一個網頁

寫程式的地方

文字編輯器

Word

整合不同的開發工具

整合開發環境（IDE）

Visual

Studio

Code

V

S

Code

在桌面新增資料夾

打開 VS code

下載協助開發的工具

HTML 文件結構

教你房間怎麼蓋！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<head>

</head>

<body>

</body>

<html>

</html>

<title>

</title>

<head>

</head>

<body>

</body>

<html>

</html>

<title>

</title>

opening tag

closing tag

開始標籤

結束標籤

opening tag

closing tag

開始標籤

結束標籤

</p>

paragraph

<p

>

opening tag

closing tag

開始標籤

結束標籤

</p>

paragraph

內容

content

CKCSC

<p

>

opening tag

closing tag

開始標籤

結束標籤

</p>

paragraph

內容

content

CKCSC

<p

>

</a>

超連結

RickRoll

<a

>

opening tag

closing tag

開始標籤

結束標籤

</p>

內容

content

CKCSC

</a>

RickRoll

<p

>

<a

>

屬性

attribute

href="連結"

<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley">RickRoll</a>

class="plain"

id="clubName"

opening tag

closing tag

開始標籤

結束標籤

</p>

內容

content

CKCSC

</a>

RickRoll

<p

>

<a

>

屬性

attribute

href="連結"

<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley">RickRoll</a>

class="plain"

id="clubName"

title="成功電研"

opening tag

closing tag

開始標籤

結束標籤

</p>

內容

content

CKCSC

</a>

RickRoll

<p

>

<a

>

屬性

attribute

href="連結"

<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley">RickRoll</a>

id="clubName"

title="成功電研"

style="color:red;"

opening tag

closing tag

開始標籤

結束標籤

</p>

內容

content

CKCSC

</a>

RickRoll

<p

>

<a

>

屬性

attribute

href="連結"

<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley">RickRoll</a>

id="clubName"

title="成功電研"

style="color:red;"

opening tag

closing tag

開始標籤

結束標籤

內容

content

屬性

attribute

元素

element

元素

element

元素

element

opening tag

closing tag

開始標籤

結束標籤

內容

content

屬性

attribute

元素

element

<a>

</a>

恐龍扛狼

href="連結"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

HTML 基本標籤

教你有哪些房間可以蓋！

段落標籤

<p>paragragh</p>

超連結

<a href="https://google.com">超連結</a>

段落標籤

<p>風怒號，浪滔滔
   世路險巇，雲霾籠罩</p>

換行怎麼變成一個空白？

換行標籤

<p>風怒號，浪滔滔<br>
   世路險巇，雲霾籠罩</p>

沒有結束標籤

沒有內容

空元素

空白字元

<p>超大&nbsp;&nbsp;&nbsp;空白</p>

圖片與表格

<img

>

空元素

<img

>

src="圖片位址"

影音多媒體

嵌入影片、聲音、物件、其他網頁等

表單

輸入類型、按鈕、標籤

CSS 基本語法

色彩、自行、文字與清單

Box Model 與定位方式

Box Model、Display、Position

先來複習一下

「區塊層級」

「行內層級」

資源

<h1>區塊層級(block level)</h1>
<div class="bg-y">div</div>
<p class="bg-y">p</p>
<h1 class="bg-y">h1</h1>
<hr>
<h1>行內層級(inline level)</h1>
<span class="bg-y">span</span>
<i class="bg-y">i斜體</i>
<b class="bg-y">b粗體</b>
<img src="" alt="" class="bg-y">
<a href="" class="bg-y">a超連結</a>
<sub class="bg-y">sub下標</sub>
<sup class="bg-y">sup上標</sup>

<!--CSS只有.bg-y{background-color:yellow;}-->

區塊層級與行內層級

Block Box

Inline Box

區塊層級與行內層級

Block Box

Inline Box

從上到下排

從左到右排

以上下邊界來計算彼此的距離

以左右 padding, border, margin來計算

Display（HTML元素的顯示層級）

display:           |           |          |                     ;

none

block

inline

inline-block

不顯示也不佔用位置（預設值）

設為區塊層級

設為行內層級

令區塊元素像行內元素一樣不換行

實作！

實作！

請排出這樣的三個盒子

小提示：可以先建置好盒子後再想想剛剛教的 display

Position（Box的定位方式）

position:                    |                    |                    |                    ;

static

relative

absolute

fixed

正常順序（預設值）

相對定位

絕對定位

固定位置，不會跟著捲動

Position（Box的定位方式）

「正常順序 (normal flow) 」

Position（Box的定位方式）

「正常順序 (normal flow) 」

改為相對定位，再加上位移量

Position（Box的定位方式）

#box2 {
    position: relative;
    top: 50px;
    left: 100px;
}

位移量

top|right|bottom|left :                    |                   |                      ;

長度

百分比

auto

Position（Box的定位方式）

「正常順序 (normal flow) 」

相對定位

=

+

位移量

相對於

而且可以看到 Box3 他並沒有無視 Box2 直接搶他的位子

可以想成是排隊排到一半伸一隻腳出去跟朋友聊天

Position（Box的定位方式）

#box2 {
    position: relative;
    top: 50px;
    left: 100px;
}

如果我們把 relative 改成 absolute 呢？

Position（Box的定位方式）

#box2 {
    position: absolute;
    top: 50px;
    left: 100px;
}

Position（Box的定位方式）

Position（Box的定位方式）

從「正常順序 (normal flow) 」被抽離出來

顯示在指定的位子

「相對於包含該元素之區塊來做定位」

正常順序中的其他元素會當他不存在

Position（Box的定位方式）

<div class="container">
    <div class="box" id="box1">Box 1</div>
    <div class="box" id="box2">Box 2</div>
    <div class="box" id="box3">Box 3</div>
</div>

「包含該元素之區塊」就是外面的 div 元素

Position（Box的定位方式）

#box2 {
    position: fixed;
    top: 50px;
    left: 100px;
}

固定在你視窗上，永遠在那裡

哀居底下的狀態欄一直都固定在手機底部

float、clear（文繞圖、解除文繞圖）

容器中的其他元素環繞在該元素周圍

float、clear（文繞圖、解除文繞圖）

float : none | left | right ;

不做文繞圖（預設值）

左側

右側

float、clear（文繞圖、解除文繞圖）

clear : none | left | right | both ;

不做文繞圖（預設值）

左側

右側

兩側

實作！

實作！

去網上找一張圖片，嘗試製作出文繞圖

再用 clear 避免文繞圖

 

請在 <img>元素外多用兩個元素

一個有文繞圖、一個沒有

背景、漸層與表格

CSS

變形

transform

transform-origin

transform-box

transform-style

perspective-origin

perspective

backface-visibility

transform

transform-origin

transform

位移

縮放

旋轉

傾斜

div {
    width: 200px;
    height: 50px;
    background-color: rgb(165, 61, 255);
}
div {
    width: 200px;
    height: 50px;
    background-color: rgb(165, 61, 255);
    transform:
}
div {
    width: 200px;
    height: 50px;
    background-color: rgb(165, 61, 255);
    transform: translate(100px, 50px);
}
div {
    width: 200px;
    height: 50px;
    background-color: rgb(165, 61, 255);
    transform: scale(0.5, 0.5);
}
div {
    width: 200px;
    height: 50px;
    background-color: rgb(165, 61, 255);
    transform: skew(200deg, 0);
}
div {
    width: 200px;
    height: 50px;
    background-color: rgb(165, 61, 255);
    transform: rotate(5deg);
}

transform-origin

把上述的變形處理原點從中心改為指定的點

div {
    width: 200px;
    height: 50px;
    background-color: rgb(165, 61, 255);
    transform-origin: left bottom;
    transform: rotate(30deg);
}

CSS

轉場

轉場

先看一下按鈕的變色跟圖片的放大

背景顏色轉場

字體顏色轉場

轉場持續時間

轉場延遲時間

轉場的變化方式

button {
    background-color: rgb(110, 143, 252);
    width: 80px;
    height: 40px;
    border-radius: 25px;
    border: none;
    color: white;
}
button:hover {
    background-color:rgb(120, 93, 255);
    color: white;
    transition-property: background-color, color;
    transition-duration: .3s;
}

偽類

虛擬類

要轉場的屬性

轉場的變化方式

完成轉場所需時間

開始轉場的延遲時間

要轉場的屬性

transition-property: none | all | 屬性

轉場的變化方式

transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear

完成轉場所需時間

transition-duration: 時間(s,ms)

開始轉場的延遲時間

trasition-delay: 時間(s,ms)

要轉場的屬性

transition-property: none | all | 屬性

轉場的變化方式

transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear

完成轉場所需時間

transition-duration: 時間(s,ms)
trasition-delay: 時間(s,ms)

開始轉場的延遲時間

要轉場的屬性

transition-property: none | all | 屬性

轉場的變化方式

transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear

完成轉場所需時間

transition-duration: 時間(s,ms)
trasition-delay: 時間(s,ms)

開始轉場的延遲時間

transition

CSS

媒體查詢

響應式網頁

媒體類型

媒體類型

screen

螢幕

print

列印

speech

語音

screen

螢幕

@media

@media screen {
  p {
    color:green;
  }
}
@media print {
  p {
    color:red;
  }
}
@media screen and (max-width:768px) { 
  p{
    background-color: pink;    
  }
}
@media screen and (min-width: 400px) and (max-width: 700px){ 
  p{
    background-color: limegreen;
  }
}
  • max-width，表示這個數字以下（包含） 的都適用。(<=)
  • min-width，表示這個數字以上（包含） 的都適用。(>=)

先打先讀

@media screen and (min-width: 993px) and (max-width: 1200px){ 
  p{
    background-color: limegreen;    
  }
}
@media screen and (min-width: 769px) and (max-width: 992px){ 
  p{
    background-color: aliceblue;
  }
}
@media screen and (min-width: 481px) and (max-width: 768px){ 
  p{
    background-color: indianred;
  }
}
@media screen and (max-width: 480px){ 
  p{
    background-color: navajowhite;
  }
}
@media (min-width: 576px) { ... }

@media (min-width: 768px) { ... }

@media (min-width: 992px) { ... }

@media (min-width: 1200px) { ... }

FLEX

先在 HTML 裡放十個盒子

background-color 背景顏色

height 高度

width 寬度

text-align 文字對齊

padding 留白

趕進度就先示範

margin 邊界

先在 HTML 裡放十個盒子

<div class="container">
  <div class="box" id="box1">Box 1</div>
  <div class="box" id="box2">Box 2</div>
  <div class="box" id="box3">Box 3</div>
</div>
.box {
  background-color: rgba(77, 181, 229, 0.6);
  height: 100px;
  width: 200px;
  text-align: center;
  padding: 20px;
}

HTML

CSS

<!--EMMET語法-->
div.container>div.box#box${box$}*3

先在 HTML 裡放十個盒子

可以看到 flex 很神奇的把他排好了

但我的 box 都被擠在同一列，導致寬度跑掉了

flex-wrap（換行）

但我的 box 都被擠在同一列，導致寬度跑掉了

因為 flex 預設是不能換行的

flex wrap 的作用就是告訴 flex「能不能換行」

flex-wrap（換行）

.container {
  display: flex;
  flex-wrap: nowarp | wrap | wrap-reverse;
}

不換行（預設值）

換行

換行 + 反轉順序

flex-direction（方向）

主軸
row

交錯軸

column

flex-direction（方向）

.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

先從左到右

再從上到下

先從上到下

再從左到右

flex-flow（綜合方向跟換行）

可以寫成：

.container {
  display: flex;
  flex-flow: column wrap;
}

實作！

去試試看 flex 吧

wrap 跟 direction 都很重要

記得設定 display！

justify-content（水平對齊）

或者可以說是在主軸中的「位置分佈」

justify-content（水平對齊）

或者可以說是在主軸中的「位置分佈」

.container {
  display: flex;
  justify-content: flex-start | flex-end | center | space-around | space-between | space-evenly
}

跟左右距離較小

頭尾貼齊左右

元素距離跟兩側距離相同

主軸起點（預設值）

主軸終點

中間

平均分配元素位置

justify-content（水平對齊）

align-item（垂直對齊）

或者可以說是在主軸中的「位置分佈」

.container {
  display: flex;
  align-items:stretch | flex-start | flex-end | center | baseline;
}

根據字體下方對齊

交錯軸起點

預設值，會往交錯軸方向將內元素填滿

（但不能設置height）

交錯軸終點

中間

交錯軸中的「位置分佈」

.container {
  display: flex;
  
}

align-item（垂直對齊）

.container {
  display: flex;
  align-items:stretch | flex-start | flex-end | center | baseline;
}

根據字體下方對齊

交錯軸起點

預設值，會往交錯軸方向將內元素填滿

（但不能設置height）

交錯軸終點

中間

交錯軸中的「位置分佈」

align-self

.container {
  display: flex;
  align-self:stretch | flex-start | flex-end | center | baseline;
}

根據字體下方對齊

交錯軸起點

每行拉伸填滿剩餘空間

交錯軸終點

中間

其實跟 align-item 一樣，只是他針對單一個體

使用選擇器要注意，是放在 container 中的物件（像這邊就是 box）

align-content（行的對齊）

.container {
  display: flex;
  flex-wrap:wrap;　
  align-content:stretch | flex-start | flex-end | center | space-around | space-between | space-evenly;
}

交錯軸起點

每行拉伸填滿剩餘空間

交錯軸終點

中間

設定wrap後，行的對齊位置（一定要有多行才會觸發）

跟兩側距離較小

頭尾貼齊上下

元素距離跟兩側距離相同

order（更改順序）

順序依照大小排列，越小越前面，可以是 1, 2, 3，也可以是 -100, 0, 999

要放在 box 下面，而不是 container

#box5 #box9 {
  order: 0;
}
#box4 #box10 {
  order: -1;
}

flex（空間分配）

flex 是 flex-grow, flex-shrink, flex-basis 的縮寫

flex（空間分配）

flex-grow 是根據我們設的值，分配剩餘的空間

#box2 {
  flex-grow: 1;
}

flex（空間分配）

flex（空間分配）

#box2 {
  flex-grow: 1;
}
#box1, #box3 {
  flex-grow: 2;
}

flex（空間分配）

flex-shrink: 0 | 1（預設值）;

flex-basis: n px;

層級比 width 高

學 flex 的小遊戲

資源

登入系統頁面實作

<div class="container">
  <h2>Login</h2>
  <form action="" method="post">
    <div class="user-box">  
      <input type="text">
      <label>Username</label>
    </div>
    <div class="user-box">
      <input type="password" name="pwd">
      <label>Password</label>
    </div>
    <button type="submit">Submit</button>
  </form>
</div>

背景圖片資源

Cool Background

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    color: #fff;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(/login/cool-background\ \(1\).png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
}
.container {
    background-color: rgba(73, 73, 73, 0.4);
    border: 1px solid rgba(134, 134, 134, 0.5);
    backdrop-filter: blur(3px);
    width: 500px;
    padding: 60px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    box-shadow:0 0 1em rgba(51, 51, 51, 0.341);
}
h2 {
    text-align: center;
}
button {
    background-color: rgb(74, 182, 235);
    border: none;
    padding: 10px;
    border-radius: 10px;
}
input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
}
.user-box {
  position: relative;
}
form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    transition: .5s;
}
input:focus ~ label {
    top: -20px;
    left: 0;
    color: rgb(215, 250, 249);
    font-size: 12px;
}

button {
    cursor: pointer;
    text-transform: uppercase;
}
button:focus {
    outline: 0;
}
button:active {
    transform: scale(0.9);
}
button:hover {
    color: rgb(215, 250, 249);
    background-color: rgb(65, 58, 58, 0.5);
    transition: .4s;
}

full code of html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="login.css">
</head>
<body>
    <div class="container">
        <h2>Login</h2>
        <form action="" method="post">
            <div class="user-box">  
                <input type="text">
                <label>Username</label>
            </div>
            <div class="user-box">
                <input type="password" name="pwd" id="">
                <label>Password</label>
            </div>
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

full code of css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: sans-serif;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(/login/cool-background\ \(1\).png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
}

full code of css

.container {
    background-color: rgba(73, 73, 73, 0.4);
    border: 1px solid rgba(134, 134, 134, 0.5);
    backdrop-filter: blur(3px);
    width: 500px;
    padding: 60px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    box-shadow:0 0 1em rgba(51, 51, 51, 0.341);
}
h2 {
    text-align: center;
}
button {
    background-color: rgb(74, 182, 235);
    border: none;
    padding: 10px;
    border-radius: 10px;
}

full code of css

.user-box {
    position: relative;
}
form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

full code of css

input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
}
.container form .user-box label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    pointer-events: none;
    transition: .5s;
}
.container form .user-box input:focus ~ label {
    top: -20px;
    left: 0;
    color: rgb(215, 250, 249);
    font-size: 12px;
}

full code of css

button {
    cursor: pointer;
    text-transform: uppercase;
}
button:focus {
    outline: 0;
}
button:active {
    transform: scale(0.9);
}
button:hover {
    color: rgb(215, 250, 249);
    background-color: rgb(65, 58, 58, 0.5);
    transition: .4s;
}

導覽列實作

成功高中官網

navbar

navbar

響應式網頁（ＲＷＤ）

漢堡選單（Hamburger Menu）

flex

position

要如何實現導覽列？

flex

position

要如何實現導覽列？

但如果加上漢堡選單...

<nav>
  <input type="checkbox" id="show-menu" role="button"/>
  <label for="show-menu" class="show-menu">
    <div class="toggle"><span></span></div>
    Menu
  </label>
  <ul class="menu">
    <li><a href="#">關於</a></li>
    <li><a href="#">菜單</a></li>
    <li><a href="#">點餐</a></li>
    <li><a href="#">帳號</a></li>
  </ul>
</nav>
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  background-color: #666;
  padding: 10px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}
a{ color: #fff; }
nav {
  background-color: #2f2f31;
  color: #fff;
}

nav ul {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}
<nav>
  <ul>
    <li></li>
    <li></li>
  </ul>
</nav>
<ul>
  <li></li>
  <li></li>
</ul>

nav {
  background-color: #2f2f31;
  color: #fff;
}

nav ul {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}
nav ul li {
  background-image: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(47, 47, 49, 1) 50%,
    rgba(47, 47, 49, 1) 95%
  );
  background-size: 100% 200%;
  background-position: top center;
  color: #fff;
  display: block;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

惡補 background-image

nav ul li:hover {
  background-position: bottom center;
  color: rgba(0, 0, 0, 0.75);
}
nav ul li a {
  color: #fff;
  display: block;
  padding: 1rem 0;
  transition: all 0.25s ease-in-out;
  text-decoration: none;
}
.show-menu {
  display: block;
  text-decoration: none;
  color: #fff;
  background: #2f2f31;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
}
.toggle span,
.toggle span:before,
.toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 25px;
  background: white;
  position: absolute;
  display: block;
  content: "";
}
.toggle span:before {
  top: -7px;
}

.toggle span:after {
  bottom: -7px;
}
.toggle span:before,
.toggle span:after {
  transition: all 250ms ease-in-out;
}

.toggle {
  position: relative;
  left: 38%;
  top: 7px;
  padding: 0;
  margin-right: 10px;
  cursor: pointer;
}
input[type="checkbox"]:checked ~ label .toggle span {
  background-color: transparent;
}

input[type="checkbox"]:checked ~ label .toggle span:before {
  top: 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:checked ~ label .toggle span:after {
  top: 0;
  transform: rotate(-45deg);
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] ~ .menu {
  display: block;
  height: 0;
  background-color: transparent;
  visibility: hidden;
  opacity: 0;
}
input[type="checkbox"]:checked ~ .menu {
  display: block;
  height: auto;
  background-color: #3a3a3c;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s linear;
}
@media screen and (min-width: 768px) {
  input[type="checkbox"] ~ .menu {
    display: flex;
    height: auto;
    background-color: transparent;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s 0.2s, opacity 0.2s ease-out;
  }
  .show-menu {
    display: none;
  }
  nav ul {
    display: flex;
    width: 100%;
  }
  nav ul li {
    flex: 1 1 100%;
    padding-right: 2px;
  }
}
@media screen and (min-width: 768px) {
  input[type="checkbox"] ~ .menu {
    display: flex;
    height: auto;
    background-color: transparent;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s 0.2s, opacity 0.2s ease-out;
  }
  .show-menu {
    display: none;
  }
  nav ul {
    display: flex;
    width: 100%;
  }
  nav ul li {
    flex: 1 1 100%;
  }
}

full code of html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="login.css">
</head>
<body>
    <div class="container">
        <h2>Login</h2>
        <form action="" method="post">
            <div class="user-box">  
                <input type="text">
                <label>Username</label>
            </div>
            <div class="user-box">
                <input type="password" name="pwd" id="">
                <label>Password</label>
            </div>
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

full code of css

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #666;
  padding: 10px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

nav {
  background-color: #2f2f31;
  color: #fff;
}

a{ color: #fff; }

nav ul {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}

nav ul li {
  background-image: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(47, 47, 49, 1) 50%,
    rgba(47, 47, 49, 1) 95%
  );
  background-size: 100% 200%;
  background-position: top center;
  color: #fff;
  display: block;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}
nav ul li:hover {
  background-position: bottom center;
  color: rgba(0, 0, 0, 0.75);
}
nav ul li a {
  color: #fff;
  display: block;
  padding: 1rem 0;
  transition: all 0.25s ease-in-out;
  text-decoration: none;
}
.show-menu {
  display: block;
  text-decoration: none;
  color: #fff;
  background: #2f2f31;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
}
.toggle span,
.toggle span:before,
.toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 25px;
  background: white;
  position: absolute;
  display: block;
  content: "";
}

.toggle span:before {
  top: -7px;
}

.toggle span:after {
  bottom: -7px;
}
.toggle span:before,
.toggle span:after {
  transition: all 250ms ease-in-out;
}
.toggle {
  position: relative;
  left: 38%;
  top: 7px;
  padding: 0;
  margin-right: 10px;
  cursor: pointer;
}
input[type="checkbox"]:checked ~ label .toggle span {
  background-color: transparent;
}

input[type="checkbox"]:checked ~ label .toggle span:before {
  top: 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:checked ~ label .toggle span:after {
  top: 0;
  transform: rotate(-45deg);
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] ~ .menu {
  display: block;
  height: 0;
  background-color: transparent;
  visibility: hidden;
  opacity: 0;
}
input[type="checkbox"]:checked ~ .menu {
  display: block;
  height: auto;
  background-color: #3a3a3c;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s linear;
}
@media only screen and (min-width: 768px) {
  input[type="checkbox"] ~ .menu {
    display: flex;
    height: auto;
    background-color: transparent;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s 0.2s, opacity 0.2s ease-out;
  }
  .show-menu {
    display: none;
  }
  nav ul {
    display: flex;
    width: 100%;
  }
  nav ul li {
    flex: 1 1 100%;
    padding-right: 2px;
  }
} */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #666;
  padding: 10px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

nav {
  background-color: #2f2f31;
  color: #fff;
}

a{ color: #fff; }

nav ul {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}

nav ul li {
  background-image: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(47, 47, 49, 1) 50%,
    rgba(47, 47, 49, 1) 95%
  );
  background-size: 100% 200%;
  background-position: top center;
  color: #fff;
  display: block;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}
nav ul li:hover {
  background-position: bottom center;
  color: rgba(0, 0, 0, 0.75);
}
nav ul li a {
  color: #fff;
  display: block;
  padding: 1rem 0;
  transition: all 0.25s ease-in-out;
  text-decoration: none;
}
.show-menu {
  display: block;
  text-decoration: none;
  color: #fff;
  background: #2f2f31;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
}
.toggle span,
.toggle span:before,
.toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 25px;
  background: white;
  position: absolute;
  display: block;
  content: "";
}

.toggle span:before {
  top: -7px;
}

.toggle span:after {
  bottom: -7px;
}
.toggle span:before,
.toggle span:after {
  transition: all 250ms ease-in-out;
}
.toggle {
  position: relative;
  left: 38%;
  top: 7px;
  padding: 0;
  margin-right: 10px;
  cursor: pointer;
}
input[type="checkbox"]:checked ~ label .toggle span {
  background-color: transparent;
}

input[type="checkbox"]:checked ~ label .toggle span:before {
  top: 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:checked ~ label .toggle span:after {
  top: 0;
  transform: rotate(-45deg);
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] ~ .menu {
  display: block;
  height: 0;
  background-color: transparent;
  visibility: hidden;
  opacity: 0;
}
input[type="checkbox"]:checked ~ .menu {
  display: block;
  height: auto;
  background-color: #3a3a3c;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s linear;
}
@media only screen and (min-width: 768px) {
  input[type="checkbox"] ~ .menu {
    display: flex;
    height: auto;
    background-color: transparent;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s 0.2s, opacity 0.2s ease-out;
  }
  .show-menu {
    display: none;
  }
  nav ul {
    display: flex;
    width: 100%;
  }
  nav ul li {
    flex: 1 1 100%;
    padding-right: 2px;
  }
} */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #666;
  padding: 10px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

nav {
  background-color: #2f2f31;
  color: #fff;
}

a{ color: #fff; }

nav ul {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}

nav ul li {
  background-image: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(47, 47, 49, 1) 50%,
    rgba(47, 47, 49, 1) 95%
  );
  background-size: 100% 200%;
  background-position: top center;
  color: #fff;
  display: block;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}
nav ul li:hover {
  background-position: bottom center;
  color: rgba(0, 0, 0, 0.75);
}
nav ul li a {
  color: #fff;
  display: block;
  padding: 1rem 0;
  transition: all 0.25s ease-in-out;
  text-decoration: none;
}
.show-menu {
  display: block;
  text-decoration: none;
  color: #fff;
  background: #2f2f31;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
}
.toggle span,
.toggle span:before,
.toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 25px;
  background: white;
  position: absolute;
  display: block;
  content: "";
}

.toggle span:before {
  top: -7px;
}

.toggle span:after {
  bottom: -7px;
}
.toggle span:before,
.toggle span:after {
  transition: all 250ms ease-in-out;
}
.toggle {
  position: relative;
  left: 38%;
  top: 7px;
  padding: 0;
  margin-right: 10px;
  cursor: pointer;
}
input[type="checkbox"]:checked ~ label .toggle span {
  background-color: transparent;
}

input[type="checkbox"]:checked ~ label .toggle span:before {
  top: 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:checked ~ label .toggle span:after {
  top: 0;
  transform: rotate(-45deg);
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] ~ .menu {
  display: block;
  height: 0;
  background-color: transparent;
  visibility: hidden;
  opacity: 0;
}
input[type="checkbox"]:checked ~ .menu {
  display: block;
  height: auto;
  background-color: #3a3a3c;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s linear;
}
@media only screen and (min-width: 768px) {
  input[type="checkbox"] ~ .menu {
    display: flex;
    height: auto;
    background-color: transparent;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s 0.2s, opacity 0.2s ease-out;
  }
  .show-menu {
    display: none;
  }
  nav ul {
    display: flex;
    width: 100%;
  }
  nav ul li {
    flex: 1 1 100%;
    padding-right: 2px;
  }
} */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #666;
  padding: 10px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

nav {
  background-color: #2f2f31;
  color: #fff;
}

a{ color: #fff; }

nav ul {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}

nav ul li {
  background-image: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(47, 47, 49, 1) 50%,
    rgba(47, 47, 49, 1) 95%
  );
  background-size: 100% 200%;
  background-position: top center;
  color: #fff;
  display: block;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}
nav ul li:hover {
  background-position: bottom center;
  color: rgba(0, 0, 0, 0.75);
}
nav ul li a {
  color: #fff;
  display: block;
  padding: 1rem 0;
  transition: all 0.25s ease-in-out;
  text-decoration: none;
}
.show-menu {
  display: block;
  text-decoration: none;
  color: #fff;
  background: #2f2f31;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
}
.toggle span,
.toggle span:before,
.toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 25px;
  background: white;
  position: absolute;
  display: block;
  content: "";
}

.toggle span:before {
  top: -7px;
}

.toggle span:after {
  bottom: -7px;
}
.toggle span:before,
.toggle span:after {
  transition: all 250ms ease-in-out;
}
.toggle {
  position: relative;
  left: 38%;
  top: 7px;
  padding: 0;
  margin-right: 10px;
  cursor: pointer;
}
input[type="checkbox"]:checked ~ label .toggle span {
  background-color: transparent;
}

input[type="checkbox"]:checked ~ label .toggle span:before {
  top: 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:checked ~ label .toggle span:after {
  top: 0;
  transform: rotate(-45deg);
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] ~ .menu {
  display: block;
  height: 0;
  background-color: transparent;
  visibility: hidden;
  opacity: 0;
}
input[type="checkbox"]:checked ~ .menu {
  display: block;
  height: auto;
  background-color: #3a3a3c;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s linear;
}
@media only screen and (min-width: 768px) {
  input[type="checkbox"] ~ .menu {
    display: flex;
    height: auto;
    background-color: transparent;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s 0.2s, opacity 0.2s ease-out;
  }
  .show-menu {
    display: none;
  }
  nav ul {
    display: flex;
    width: 100%;
  }
  nav ul li {
    flex: 1 1 100%;
    padding-right: 2px;
  }
} */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #666;
  padding: 10px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

nav {
  background-color: #2f2f31;
  color: #fff;
}

a{ color: #fff; }

nav ul {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}

nav ul li {
  background-image: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(47, 47, 49, 1) 50%,
    rgba(47, 47, 49, 1) 95%
  );
  background-size: 100% 200%;
  background-position: top center;
  color: #fff;
  display: block;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}
nav ul li:hover {
  background-position: bottom center;
  color: rgba(0, 0, 0, 0.75);
}
nav ul li a {
  color: #fff;
  display: block;
  padding: 1rem 0;
  transition: all 0.25s ease-in-out;
  text-decoration: none;
}
.show-menu {
  display: block;
  text-decoration: none;
  color: #fff;
  background: #2f2f31;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
}
.toggle span,
.toggle span:before,
.toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 25px;
  background: white;
  position: absolute;
  display: block;
  content: "";
}

.toggle span:before {
  top: -7px;
}

.toggle span:after {
  bottom: -7px;
}
.toggle span:before,
.toggle span:after {
  transition: all 250ms ease-in-out;
}
.toggle {
  position: relative;
  left: 38%;
  top: 7px;
  padding: 0;
  margin-right: 10px;
  cursor: pointer;
}
input[type="checkbox"]:checked ~ label .toggle span {
  background-color: transparent;
}

input[type="checkbox"]:checked ~ label .toggle span:before {
  top: 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:checked ~ label .toggle span:after {
  top: 0;
  transform: rotate(-45deg);
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] ~ .menu {
  display: block;
  height: 0;
  background-color: transparent;
  visibility: hidden;
  opacity: 0;
}
input[type="checkbox"]:checked ~ .menu {
  display: block;
  height: auto;
  background-color: #3a3a3c;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s linear;
}
@media only screen and (min-width: 768px) {
  input[type="checkbox"] ~ .menu {
    display: flex;
    height: auto;
    background-color: transparent;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s 0.2s, opacity 0.2s ease-out;
  }
  .show-menu {
    display: none;
  }
  nav ul {
    display: flex;
    width: 100%;
  }
  nav ul li {
    flex: 1 1 100%;
    padding-right: 2px;
  }
} */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #666;
  padding: 10px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

nav {
  background-color: #2f2f31;
  color: #fff;
}

a{ color: #fff; }

nav ul {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}

nav ul li {
  background-image: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(47, 47, 49, 1) 50%,
    rgba(47, 47, 49, 1) 95%
  );
  background-size: 100% 200%;
  background-position: top center;
  color: #fff;
  display: block;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}
nav ul li:hover {
  background-position: bottom center;
  color: rgba(0, 0, 0, 0.75);
}
nav ul li a {
  color: #fff;
  display: block;
  padding: 1rem 0;
  transition: all 0.25s ease-in-out;
  text-decoration: none;
}
.show-menu {
  display: block;
  text-decoration: none;
  color: #fff;
  background: #2f2f31;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
}
.toggle span,
.toggle span:before,
.toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 25px;
  background: white;
  position: absolute;
  display: block;
  content: "";
}

.toggle span:before {
  top: -7px;
}

.toggle span:after {
  bottom: -7px;
}
.toggle span:before,
.toggle span:after {
  transition: all 250ms ease-in-out;
}
.toggle {
  position: relative;
  left: 38%;
  top: 7px;
  padding: 0;
  margin-right: 10px;
  cursor: pointer;
}
input[type="checkbox"]:checked ~ label .toggle span {
  background-color: transparent;
}

input[type="checkbox"]:checked ~ label .toggle span:before {
  top: 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:checked ~ label .toggle span:after {
  top: 0;
  transform: rotate(-45deg);
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] ~ .menu {
  display: block;
  height: 0;
  background-color: transparent;
  visibility: hidden;
  opacity: 0;
}
input[type="checkbox"]:checked ~ .menu {
  display: block;
  height: auto;
  background-color: #3a3a3c;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s linear;
}
@media only screen and (min-width: 768px) {
  input[type="checkbox"] ~ .menu {
    display: flex;
    height: auto;
    background-color: transparent;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s 0.2s, opacity 0.2s ease-out;
  }
  .show-menu {
    display: none;
  }
  nav ul {
    display: flex;
    width: 100%;
  }
  nav ul li {
    flex: 1 1 100%;
    padding-right: 2px;
  }
} */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #666;
  padding: 10px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

nav {
  background-color: #2f2f31;
  color: #fff;
}

a{ color: #fff; }

nav ul {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}

nav ul li {
  background-image: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(47, 47, 49, 1) 50%,
    rgba(47, 47, 49, 1) 95%
  );
  background-size: 100% 200%;
  background-position: top center;
  color: #fff;
  display: block;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}
nav ul li:hover {
  background-position: bottom center;
  color: rgba(0, 0, 0, 0.75);
}
nav ul li a {
  color: #fff;
  display: block;
  padding: 1rem 0;
  transition: all 0.25s ease-in-out;
  text-decoration: none;
}
.show-menu {
  display: block;
  text-decoration: none;
  color: #fff;
  background: #2f2f31;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
}
.toggle span,
.toggle span:before,
.toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 25px;
  background: white;
  position: absolute;
  display: block;
  content: "";
}

.toggle span:before {
  top: -7px;
}

.toggle span:after {
  bottom: -7px;
}
.toggle span:before,
.toggle span:after {
  transition: all 250ms ease-in-out;
}
.toggle {
  position: relative;
  left: 38%;
  top: 7px;
  padding: 0;
  margin-right: 10px;
  cursor: pointer;
}
input[type="checkbox"]:checked ~ label .toggle span {
  background-color: transparent;
}

input[type="checkbox"]:checked ~ label .toggle span:before {
  top: 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:checked ~ label .toggle span:after {
  top: 0;
  transform: rotate(-45deg);
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] ~ .menu {
  display: block;
  height: 0;
  background-color: transparent;
  visibility: hidden;
  opacity: 0;
}
input[type="checkbox"]:checked ~ .menu {
  display: block;
  height: auto;
  background-color: #3a3a3c;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s linear;
}
@media only screen and (min-width: 768px) {
  input[type="checkbox"] ~ .menu {
    display: flex;
    height: auto;
    background-color: transparent;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s 0.2s, opacity 0.2s ease-out;
  }
  .show-menu {
    display: none;
  }
  nav ul {
    display: flex;
    width: 100%;
  }
  nav ul li {
    flex: 1 1 100%;
    padding-right: 2px;
  }
} */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #666;
  padding: 10px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

nav {
  background-color: #2f2f31;
  color: #fff;
}

a{ color: #fff; }

nav ul {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}

nav ul li {
  background-image: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(47, 47, 49, 1) 50%,
    rgba(47, 47, 49, 1) 95%
  );
  background-size: 100% 200%;
  background-position: top center;
  color: #fff;
  display: block;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}
nav ul li:hover {
  background-position: bottom center;
  color: rgba(0, 0, 0, 0.75);
}
nav ul li a {
  color: #fff;
  display: block;
  padding: 1rem 0;
  transition: all 0.25s ease-in-out;
  text-decoration: none;
}
.show-menu {
  display: block;
  text-decoration: none;
  color: #fff;
  background: #2f2f31;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
}
.toggle span,
.toggle span:before,
.toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 25px;
  background: white;
  position: absolute;
  display: block;
  content: "";
}

.toggle span:before {
  top: -7px;
}

.toggle span:after {
  bottom: -7px;
}
.toggle span:before,
.toggle span:after {
  transition: all 250ms ease-in-out;
}
.toggle {
  position: relative;
  left: 38%;
  top: 7px;
  padding: 0;
  margin-right: 10px;
  cursor: pointer;
}
input[type="checkbox"]:checked ~ label .toggle span {
  background-color: transparent;
}

input[type="checkbox"]:checked ~ label .toggle span:before {
  top: 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:checked ~ label .toggle span:after {
  top: 0;
  transform: rotate(-45deg);
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] ~ .menu {
  display: block;
  height: 0;
  background-color: transparent;
  visibility: hidden;
  opacity: 0;
}
input[type="checkbox"]:checked ~ .menu {
  display: block;
  height: auto;
  background-color: #3a3a3c;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s linear;
}
@media only screen and (min-width: 768px) {
  input[type="checkbox"] ~ .menu {
    display: flex;
    height: auto;
    background-color: transparent;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s 0.2s, opacity 0.2s ease-out;
  }
  .show-menu {
    display: none;
  }
  nav ul {
    display: flex;
    width: 100%;
  }
  nav ul li {
    flex: 1 1 100%;
    padding-right: 2px;
  }
} */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #666;
  padding: 10px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

nav {
  background-color: #2f2f31;
  color: #fff;
}

a{ color: #fff; }

nav ul {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}

nav ul li {
  background-image: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(47, 47, 49, 1) 50%,
    rgba(47, 47, 49, 1) 95%
  );
  background-size: 100% 200%;
  background-position: top center;
  color: #fff;
  display: block;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}
nav ul li:hover {
  background-position: bottom center;
  color: rgba(0, 0, 0, 0.75);
}
nav ul li a {
  color: #fff;
  display: block;
  padding: 1rem 0;
  transition: all 0.25s ease-in-out;
  text-decoration: none;
}
.show-menu {
  display: block;
  text-decoration: none;
  color: #fff;
  background: #2f2f31;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
}
.toggle span,
.toggle span:before,
.toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 25px;
  background: white;
  position: absolute;
  display: block;
  content: "";
}

.toggle span:before {
  top: -7px;
}

.toggle span:after {
  bottom: -7px;
}
.toggle span:before,
.toggle span:after {
  transition: all 250ms ease-in-out;
}
.toggle {
  position: relative;
  left: 38%;
  top: 7px;
  padding: 0;
  margin-right: 10px;
  cursor: pointer;
}
input[type="checkbox"]:checked ~ label .toggle span {
  background-color: transparent;
}

input[type="checkbox"]:checked ~ label .toggle span:before {
  top: 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:checked ~ label .toggle span:after {
  top: 0;
  transform: rotate(-45deg);
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] ~ .menu {
  display: block;
  height: 0;
  background-color: transparent;
  visibility: hidden;
  opacity: 0;
}
input[type="checkbox"]:checked ~ .menu {
  display: block;
  height: auto;
  background-color: #3a3a3c;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s linear;
}
@media only screen and (min-width: 768px) {
  input[type="checkbox"] ~ .menu {
    display: flex;
    height: auto;
    background-color: transparent;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s 0.2s, opacity 0.2s ease-out;
  }
  .show-menu {
    display: none;
  }
  nav ul {
    display: flex;
    width: 100%;
  }
  nav ul li {
    flex: 1 1 100%;
    padding-right: 2px;
  }
}

靜態網頁基礎：HTML & CSS

By sbincer32

Made with Slides.com

靜態網頁基礎：HTML & CSS

內含HTML介紹、常用HTML標籤、CSS介紹、CSS常用宣告

  • 147

More from sbincer32