search

Lichen5221 / Report-Daily

記錄每日上課內容與作業。
0 stars 0 forks source link

2021-06-01 #43

Open Lichen5221 opened 3 years ago

Lichen5221 commented 3 years ago

網頁頁尾切版

html 檔：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Test</title>
    <link rel="stylesheet" href="./test.css" />
  </head>
  <body>
    <div class="main-footer">
      <div class="container">
        <div class="footer-item">
          <h4>關於作者</h4>
          <nav>
            <a href="#">> 寫作目標</a>
          </nav>
        </div>
        <div class="footer-item">
          <h4>作品列表</h4>
          <nav>
            <a href="#">> 愛情系列</a>
            <a href="#">> 物語系列</a>
          </nav>
        </div>
        <div class="footer-item">
          <h4>角色介紹</h4>
          <nav>
            <a href="#">> 莫札特</a>
            <a href="#">> 貝多芬</a>
          </nav>
        </div>
        <div class="footer-item footer-subs">
          <h4>訂閱社群</h4>
          <form>
            <input type="text" name="">
            <input type="submit" value="訂閱">
          </form>
        </div>
      </div>
      <div class="copyright">
        Copyright &copy; 2021 金魚
      </div>
    </div>
  </body>
</html>

CSS 檔：

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-footer{
    padding: 150px 0 0;
    background: linear-gradient(-20deg, #3f5494, #08c7a5);
}

body{
    background-color: #000;
}

.main-footer .container{
    display: flex;
    width: 1200px;
    margin: auto;
}

.footer-item{
    width: 0;
    flex-grow: 1;
    margin: 0 20px;
}

.footer-item nav{
    display: flex;
    flex-direction: column;
}

.footer-item h4{
    font-size: 24px;
    color: #fff;
    border-bottom: 1px dotted #fff;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
}

.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;
    width: 100%;
    margin: auto 0px;
}

.footer-subs input[type="text"],
.footer-subs input[type="submit"]{
    border: none;
    padding: 5px 10px;
}

.footer-subs input[type="text"]{
    width: 0;
    flex-grow: 1;
}

.footer-subs input[type="submit"]{
    color: #fff;
    background-color: #3e5293;
}

.copyright{
    width: 100%;
    text-align: center;
    margin: 150px 0 0;
    padding: 10px 0px;
    background-color: #3e5293;
    color: #70f6df;
}
Lichen5221 commented 3 years ago

閱讀相關文獻

輕鬆理解 Ajax 與跨來源請求

建置 PHP 環境

XAMPP