百度前端學院學習Day2
阿新 • • 發佈：2018-12-10
前言
昨天，瞭解了Web開發的基本原理，使用html製作了簡易的簡歷，以及編寫css為文字和字型新增屬性。
4.背景、邊框、列表、連結和選擇器
目標
掌握CSS稍複雜的選擇器，還有背景、邊框等樣式屬性。
閱讀
編碼
#head{ heigth: 100px; background-color: #66cc99; background-repeat: no-repeat; background-position: center; } td, th{ border-color: #ff0000; border-style: solid; border-width: 1px; } ul{ list-style-type: square; list-style-image: url(/i/arrow.gif); } a:link, a:visited{ color: blue; } a:hover, a:active{ color: yellow; }
小結
CSS在背景效果方面上比較實用，盒模型讓元素擁有邊框等屬性，能更好的顯示元素。列表的標誌有不同的裝飾效果，也可以使用圖片。超連結有多種不同的狀態，使用偽類來為不同的狀態新增不同的樣式。
5、6：三種簡歷
目標
通過閱讀以及練習，掌握CSS盒模型和通過Float進行簡單的佈局。
閱讀
接下來我們瞭解一下浮動
編碼
HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style_2.css" type="text/css"> <title>resume</title> </head> <body> <h1>簡歷</h1> <div class="text"> <div class="info"> <h2>基本資訊</h2> <p><b>姓名</b> 張三     <b>性別</b>     男      <b>應聘職位</b>     web前端工程師</p> </div> <div class="contact"> <h2>聯絡方式</h2> <p><b>手機</b> 12312341234      <b>Email</b> <a href="">[email protected]</a>     <b>個人主頁</b> <a href="">Github</a></p> </div> <div class="skill"> <h2>能力描述</h2> <p><b>技術能力</b><br>熟練掌握HTML,CSS,JavaScript <br><br><b>綜合能力</b><br>良好的溝通，主動積極，努力勤奮</p> </div> <div class="education"> <h2>教育經歷</h2> <p><b>本科</b><br>百度前端技術學院小薇學院<br><br><b>研究生</b><br>百度前端技術學院大斌學院</p> </div> <div class="project"> <h2>專案經歷</h2> <p><b>小度小度</b><br>作為前端工程師角色參與了ABC元件的開發<br><br><b>SAN Doc</b><br>作為文件工程師參與了SAN Doc的編寫</p> </div> </div> </body> </html>
第一個CSS樣式
body {
padding: 0px;
margin: 0px auto;
}
h1 {
float: left;
width: 20%;
height: 680px;
margin: 0;
padding-top: 50px;
text-align: center;
background: yellow;
background-clip: padding-box;
color: black;
}
.text {
float: left;
padding: 0 0 0 10px;
}第二個CSS樣式
*{
margin: 0;
padding: 0;
}
h1 {
width:100%;
height: 64px;
padding-top: 20px;
padding-left: 40px;
font-size: 40px;
display: inline-block;
color: black;
background-color: #858585;
text-align: left;
}
h2 {
float: left;
width: 160px;
height: 120px;
padding-top: 50px;
text-align: center;
background-color: #d6d6d6;
border-bottom:#e6e6e6 solid 1px;
}
p {
display: inline-block;
height: 140px;
padding-left: 20px;
padding-top: 30px;
border-bottom:#E6E6E6 solid 1px;
}
驗證
請反覆確認你是否掌握了以下概念
- 盒模型的概念
- inline、block和inline-block的概念
- 內外邊距，寬度，高度，box-sizing等屬性
- 浮動，清除浮動
- 如何使用浮動進行佈局
小結
此次練習，關鍵在於設定相鄰的框的屬性來達到理想的佈局。首先，需要掌握盒模型和浮動佈局，然後依據情況設定元素的寬度和高度，還可以使用display、box-sizing、clear等屬性來完成佈局。