---
tags: 互動程式設計,2-8,CodePen，學生版,動畫互動網頁特效入門（JS/CANVAS）
---
# 2-8 - [Project 1] 使用html/css撰寫一份自己的網頁履歷_學生版
---
---
```
吳哲宇
動畫互動網頁特效入門 | 墨雨設計
動畫互動網頁程式入門講師、墨雨設計 Monoame Design 負責人、設計與網頁全端雙棲的工程師，為了有趣的想法赴湯蹈火。
作品集 Github
Skills
專業技能
前端網頁開發(html/css/js)
後端網頁 (laravel)
平面設計
插畫
品牌視覺規劃 (CIS)
介面/網頁設計 (UI/UX)
AutoCAD製圖/程式開發(Lisp)
3D建模彩現
設計企劃/專案管理
Programming Skill
程式技能
C++
VB.net
AutoLisp
Verilog
Python
Html/Css/Js
Pug/Sass
Experience / Works
經歷與作品
2014
康師傅 活動用體感切醬料包遊戲 程式開發
交大電機 高中生專區 網頁設計 / 開發
長庚醫院 聲熱石墨希 腦瘤治療新契機3D 動畫
2015
RemyMartin & Selinko 智慧酒瓶認證 UI/UX
Dyverse Studio 歧響音樂 互動官網 設計 / 開發
2016
Complex Festival 複雜生活節互動官網 設計 / 開發
花旗聯合勸募官網 設計 / 開發
世界健康大會官網 設計 / 開發
雜學校展覽 網頁開發
開設動畫互動網頁程式入門線上課程
2017
台北聲音地景計畫官網 設計 / 開發
工研院綠能所 節電官網 設計/開發
睿軒 / 睿田生技公司官網開發
D-school 台大創新設計學院網站 設計 / 開發
開設動畫互動網頁特效入門線上課程
Contests
比賽經歷
宏碁數位創作獎第五屆首獎
宏碁數位創作獎第六屆首獎
宏碁數位創作獎第七屆首獎暨評審團大獎
宏碁數位創作獎第八屆優勝
宏碁數位創作獎第九屆首獎暨評審團大獎
智慧鐵人競賽高職組首獎
梅竹黑客松 微軟組首獎
經濟部智慧城市黒客松 實踐組首獎
```
---
## 初步建立HTML內容
---
.resume>.left+.right
按下tab按鍵，可以變成
```html
<div class="resume">
<div class="left"></div>
<div class="right"></div>
</div>
```
```Emmet=
.bar>.value
```
按下tab按鍵，可以產生
```htmlembedded=
<div class="bar">
<div class="value"></div>
</div>
```
```Emmet=
.bar>.value
```
按下tab按鍵，可以產生
```htmlembedded=
<div class="bar">
<div class="value"></div>
</div>
```
---
```Emmet=
.block>h4{Contests}+h2{比賽經歷}
```
```htmlembedded=
<div class="block">
<h4>Contests</h4>
<h2>比賽經歷</h2>
<div>
```
---
```htmlembedded=
```
---
## css內容
```css=
*{
border:solid 1px black;
}
body{
padding:50px;
}
.resume{
display:flex;
}
.left{
flex:5 /*左邊有5等分*/
}
.right{
flex:7 /*右邊有7等分*/
}
```
---
## 步驟二:設定格式
設定整個置中
並且整個表格最大為950px
內距中間線也拉大
```css=
```
---
### 步驟三 針對整個ul樣式
---
```css=
```
---
### 步驟四:超連結設定
```css=
```
---
### 步驟五設定背景顏色與各種文字顏色
```css=
```
---
### 步驟六 畫大方框並做漸層顯示
---
```css=
background: linear-gradient(180deg, #ff5f5f, #ffffae);
```
與
```css=
background: linear-gradient( #ff5f5f, #ffffae);
```
一樣功能
---
0度(0deg，to right)
---
90度(90deg，to top)
---
不寫deg，可用以下方是撰寫
* to top (下方漸層到上方)
* to right (左方漸層到右方)
* to bottom (上方漸層到下方)
* to left (右方漸層到左方)
* to top left (右下漸層到左上)
* to top right (左下漸層到右上)
* to bottom right (左上漸層到右下)
* to bottom left (右上漸層到左下)
```css=
background: linear-gradient(180deg, #ff5f5f, #ffffae);
```
與
```css=
background: linear-gradient( to bottom,#ff5f5f, #ffffae);
```
一樣功能
---
CSS的內容
```css=
```
---
### 步驟七 中間線條加上顏色
---
```css=
```
### 步驟八 經歷與作品旁間的方框線條
---
```css=
```
---
### 步驟九 圓環的設計
---
```css=
```
#### 使用類似遮罩的方法，就是超過圓圈的範圍都變成hidden
```css=
```
---
#### 加上一個中心圓，並設定最大圓的顏色與透明度
```htmlmixed=
<li>
<div class="circle">
<div class="p90"></div>
<div class="p180"></div>
<div class="p270"></div>
<div class="p360"></div>
</div>
前端網頁開發(html/css/js)
</li>
<li>
<div class="circle">
<div class="p90"></div>
<div class="p180"></div>
<div class="p270"></div>
</div>
後端網頁 (laravel)
</li>
```
```css=
.circle::after {
content: "";
display: block;
background-color: #02005b;
width:calc(100% - 20px);
height:calc(100% - 20px);
border-radius: 50%; /*四個角都為50%圓弧*/
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
```
---
### 步驟十一 圓環與文字要在同一行中，每個項目佔25%
---
```css=
.listskill {
display: flex;
flex-wrap: wrap;
}
.listskill li {
width: 25%;
padding: 5px;
box-sizing: border-box; /*包含內距5px的距離值*/
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
```
---
### 步驟十二 產生橫條
```htmlembedded=
<li>C++
<div class="bar">
<div class="value p40"></div>
</div>
</li>
<li>VB.net
<div class="bar">
<div class="value p50"></div>
</div>
</li>
```
---
```css=
```
---
### 步驟十三 橫條位置設定
```css=
```
---
### 步驟十四 針對標題二底下線條做顏色設定
```css=
```
---
### 步驟十五 針對線條的顏色
```css=
```
---
### 步驟十六 針對按鈕做設定
```htmlembedded=
<div class="buttons">
<a class="btn fill" href="http://www.monoame.com" target="_blank">作品集</a>
<a class="btn" href="https://github.com/frank890417" target="_blank">Github</a>
</div>
```
```css=
```
---
### 步驟十七 其中一個按鈕充滿顏色
```css=
```
---
### 最後完成碼
HTML
```htmlembedded=
```
---
CSS
```css=
```
---
---
### padding的特性
---
### Margin的特性
---
## 測試內容
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
```
---
---
### 整個寬度
---
---
---
2-8 - [Project 1] 使用html/css撰寫一份自己的網頁履歷_學生版.md
目前顯示的是「2-8 - [Project 1] 使用html/css撰寫一份自己的網頁履歷_學生版.md」。
Sign in with Wallet
Connect another wallet