# 【Day6】project 1 --- 名片網頁製作

## CSS重點補充
- 網頁開發順序建議
大小、內外距--->套顏色、框線--->字體調整--->細修
- *{ }：選擇全部元素
- html：選擇整份文件(最外圍);body:包住所有元素的大框
- 顏色兩種表示方式範例
1. #0e8f94
2. rgba(0,0,0,0.5)，第四個參數為透明度
- font-weight兩種表示方式範例
1. bold
2. 500 (100-900擇一)
- overflow：控制卷軸或顯示狀態(針對超出某元素的範圍)
- 陰影
box-shadow: 0px(x偏移) 0px(y偏移) 15px(模糊程度) -20px(外擴或內縮程度)
- 框線佔有體積，因此若不想讓畫面多出外框線而是往內縮的話，可立用屬性---box-sizing: border-box(使框線體積包含在本體內)
- 文字對齊方式
text-align:left(置左)/center(置中)/right(置右)

## 實作練習
- 程式碼
- HTML

  <div class="mark">NAMECARD</div>
  <div class="namecard">
    <h2>蔡依琪 <span>(CAI-YI-QI)</span></h2>
    
    <h5>中原大學-電機工程學系</h5>
    
    <hr>
    <p>內文介紹</p>
    <div class="circle circle1"></div>
    <div class="circle circle2"></div>
  </div>
  <h3 class="page_title">網頁名片</h3>

- CSS

  *{
  /*   border: solid 1px; */
    font-family: 微軟正黑體;
    position: relative;
  }
  html,body{
    width: 100%; height: 100%;
    padding: 0px; margin: 0px;
  }
  body{
    background-color: #d2cbbc;
    border-top: solid 20px #099ca2;
    border-bottom: solid 20px #099ca2;
    
    box-sizing: border-box;
    overflow: hidden;
  }
  .namecard{
    width: 350px; height: 200px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    background-color: #efe7d9;
    
    letter-spacing: 1px;
    font-weight: 100;
    color: rgba(0,0,0,0.7);
    
    overflow: hidden;
    border: solid 1px rgba(0,0,0,0.15);
    border-radius: 6px;
    
    box-shadow: 10px 10px 15px rgba(0,0,0,0.2)
  }
  .namecard h2{
    font-size: 25px;
    font-weight: 600;
  }
  .namecard h2 span{
    font-size: 12px;
  }
  .namecard h5{
    color: #0e8f94;
    font-weight: 600;
  }
  .namecard p{
    font-size: 12px;
    line-height: 22px;
  }
  .circle{
    width: 100px; height: 100px;
    border-radius: 100%;
    position: absolute;
  }
  .circle1{
    right: 90px;
    bottom: -50px;
    background-color: #099ca2;
  }
  .circle2{
    width: 60px; height: 60px;
    right: -30px;
    top: -30px;
    border: solid 3px #099ca2;
  }
  .page_title{
    text-align: center;
    color: #555;
    font-weight: 500;
  }
  .mark{
    position: absolute;
    font-size: 250px;
    bottom: 40px;
    font-weight: 100;
    color: rgba(0,0,0,0.1)
  }

- 呈現

:::warning
內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d
:::