百度前端學院學習DAY05 and DAY06--三種簡歷
百度前端學院學習DAY05 and DAY06
第五天和第六天 三種簡歷
課程目標
通過閱讀及一個小型練習，掌握 CSS 盒模型及通過Float進行簡單的佈局
課程描述
閱讀
今天我們要學習非常重要的一些知識，這些知識會伴隨著你的前端生涯.
首先我們先學習一下盒模型的概念
接下來我們瞭解一下浮動
編碼
今天的任務，我們將不在codepen上來實現，開啟你電腦本地的程式碼編輯器（如VSCode，Sublime或者其它），建立一個專案目錄，在目錄下建立一個resume.html，再建立一個css目錄，在css目錄下建立一個style_1.css檔案。
然後基於上面的閱讀學習，實現如下設計稿的一份簡歷頁面，HTML內容寫在resume.html中，樣式寫在style_1.css中。
實現過程中，請注意：
- 實現時必須保證佈局的一致
- 字型、寬高、邊距等不需要完全一致
閱讀
在進行今天的第二個練習時，我們希望你首先閱讀一些來自企業的HTML及CSS規範，比如下方的百度規範，你也可以自行搜尋其他公司的編碼規範
然後學習規範後，我們繼續下一個編碼任務
編碼
依然還是使用resume.html，在css目錄下建立style_2.css，然後在resume.html的CSS檔案引用改為style_2.css。
參照下方設計稿進行頁面實現。HTML程式碼請在上一個任務的基礎上，根據樣式需要進行調整。並在style_2.css中寫入新樣式。
編碼
最後一個任務，我們把這個挑戰極端一些。在css目錄中建立style_3.css。把resume.html中引用的css改為style_3.css。
參照下方設計稿進行頁面實現。HTML程式碼請在上一個任務的基礎上，根據樣式需要進行調整。並在style_3.css中寫入新樣式
編碼
接下來，請你把resume.html中引用的css檔案從style_3.css改回style_1.css或者style_2.css，看一下樣式是否還健在？
如果沒有，請對HTML或CSS程式碼進行相應調整，保證，無論是用 style_1.css 還是 style_2.css 或是 style_3.css，都可以保證頁面按照設計稿的要求呈現。也就是說同一份HTML，可以在改變CSS程式碼的情況下，實現不同樣式，達到HTML結構內容和CSS樣式的解耦。
提交
把你的程式碼提交到 Github，把 Github 地址提交到作業裡，如果有餘力的同學，可以學習如何在Github中預覽你的HTML程式碼，並提交預覽地址。
驗證
這兩天的內容稍多，請反覆確認你是否掌握了以下概念
- 盒模型的概念
- inline、block和inline-block的概念
- 內外邊距，寬度，高度，box-sizing等屬性
- 浮動，清除浮動
- 如何使用浮動進行佈局
總結
學習用時：3h
收穫：盒模型、float浮動、響應式佈局（媒體查詢）、怎樣預覽GitHub倉庫裡專案的demo。
今日的任務還是比較充實的，仔細閱讀了CSS裡的float以及清楚浮動的方法，填了很多之前不太明白的坑。我覺得學習大綱裡貼的連結都很棒，很有針對性。
今日任務程式碼
HTML程式碼
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Resume</title>
<link rel="stylesheet" href="../RESUME03/style_03.css">
</head>
<body>
<div class="tittle">
<h1>簡歷</h1>
</div>
<div class="mian">
<div class="basic">
<div class="left">
<h2>基本資訊</h2>
</div>
<div class="right">
<p><strong>姓名</strong> 張三 <strong>性別</strong> 男 <strong>應聘職位</strong> Web前端工程師</p>
</div>
</div>
<div class="contact">
<div class="left">
<h2>聯絡方式</h2>
</div>
<div class="right">
<p><strong>手機</strong> 12312312312 <strong>Email</strong> <a href="[email protected]">[email protected]</a> <strong>個人主頁</strong> <a href="[email protected]"">GitHub</a></p>
</div>
</div>
<div class="ability">
<div class="left">
<h2>能力描述</h2>
</div>
<div class="right">
<h4>技術能力</h4>
<p>熟練掌握HTML、CSS、JavaScript</p>
<h4>綜合能力</h4>
<p>良好的溝通，主動積極，努力勤奮</p>
</div>
</div>
<div class="edu">
<div class="left">
<h2>教育經歷</h2>
</div>
<div class="right">
<h4>本科</h4>
<p>百度前端技術學院小薇學院</p>
<h4>研究生</h4>
<p>百度前端技術學院大斌學院</p>
</div>
</div>
<div class="exp">
<div class="left">
<h2>專案經歷</h2>
</div>
<div class="right">
<h4>小度小度</h4>
<p>作為前端工程師的角色參與ABC元件的開發</p>
<h4>SAN Doc</h4>
<p>作為文件工程師參與了SAN Doc編寫</p>
</div>
</div>
</div>
</body>
</html>CSS程式碼
Resume01
* {
margin: 0;
padding: 0;
font-family: "微軟雅黑";
margin-left: 2px;
}
h1,h2 {
margin-top: 20px;
margin-bottom: 20px;
}
h4 {
margin-bottom: 2px;
}
h4,p {
font-size: 18px;
}Resume02
* {
margin: 0;
padding: 0;
font-family: "微軟雅黑";
}
.tittle {
float: left;
margin: 5px;
width: 200px;
height: 750px;
background-color: #00CCFF;
}
.tittle h1 {
margin-top: 60px;
margin-left: 80px;
color: #fff;
}
.main {
float: left;
margin-top: 20px;
margin-left: 20px;
}
h2 {
margin-top: 20px;
margin-bottom: 20px;
}
h4 {
margin-bottom: 2px;
}
h4,p {
font-size: 18px;
}Resume03
* {
margin: 0;
padding: 0;
font-family: "微軟雅黑";
}
.tittle {
margin-top: 5px;
margin-left: 2px;
width: 100%;
height: 80px;
background-color: #777777;
}
.tittle h1 {
margin-left: 20px;
height: 80px;
font-size: 24px;
line-height: 80px;
color: #fff;
}
.basic,
.contact,
.ability,
.edu,
.exp {
margin-left: 2px;
width: 100%;
height: 151px;
border-bottom: 1px solid #AAAAAA;
}
.left {
float: left;
width: 150px;
height: 150px;
border-bottom: 1px solid #fff;
text-align: center;
background-color: #AAAAAA;
}
.right {
float: left;
margin-left: 20px;
}
h2 {
height: 150px;
font-size: 20px;
line-height: 150px;
color: #000;
}
h4,p {
font-size: 18px;
}
h4 {
margin-top: 18px;
}
.basic p,
.contact p {
height: 150px;
line-height: 150px;
font-size: 18px;
}Demo預覽地址
以上。