在codecademy 和慕課網(wǎng)上學了HTML和CSS以后，在網(wǎng)易買了微專業(yè)，4月份開課，在此之前，自學部分做一些筆記。
這個課程的前4課介紹基礎，不做筆記。
第五課時 .CSS控制div顯示
作業(yè)：1.CSS有幾種引入方式 。
有四種引入方式，①直接在HTML標簽中添加STYLE屬性，例如<table style ="border:1px solid blue; ">X</table>
②將樣式代碼寫在頁面 <style> X </style>中，在這對標簽之間使用CSS語言。
③使用Link標簽，引入外部CSS文件，文本中<link rel="stylesheet" href="stylesheet.css">，另寫名字為“stylesheet”的CSS文件。
④使用@import 引入文件，有兩種方式，一種是放在頁面中的<style>……</style>,另一種是放在CSS文件中使用，用法：@import“sub.css"【這個不太懂】
import 在計算機術語里面含義是 “引入，導入” 理解這個就比較容易理解這個語法的意思了
style 標簽對里面使用
for example:
有一個 html 文件，名稱是 index.html，內(nèi)容如下：
<html>
<head>
<meta charset="utf-8">
<title>首頁</title>
<style>
@import "css/reset.css";
/* 這里的 import 就是說，把 css 文件夾下的 reset.css 樣式內(nèi)容導入到這里 */
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>在 css 文件里面使用
for example:
有 css 文件夾，下面有 reset.css 與 index.css 2 個 css 文件，文件目錄結構如下：
- css
- reset.css
- index.css
reset.css 文件內(nèi)容如下：
- {
margin: 0;
padding: 0;
}
index.css 文件內(nèi)容如下：
@import "reset.css";
.header {
padding: 10px;
}
2.div除了可以聲明id控制，還可以聲明什么控制？
div除了可以聲明id來控制，還可以用class（類）來賦予它一個名稱，或者直接用style來設定它的樣式。
3.如何讓兩個DIV并排顯示
使用float屬性，兩個塊級元素都設置float:left;
第六課時，浮動布局
<style>
#Lside{float:left; /*在頁面上面盡量往左漂浮*/
}
#Rside{float:left; /*在頁面上面盡量往左漂浮，這時如果上一個Lside ，漂到了最左,Rside會漂在Lside的右邊，這是頁面中除了L最左的位置，如果div 的元素不寫浮動元素，則這個元素會成為背景，被蓋住*/
}
</style>
<body>
<div id ="Lside">我是左</div>
<div id ="Rside">我是右</div>
</body>
作業(yè)：完成田字格的布局。（秘訣：使用 clear：both； ）
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#Lup {
width: 50px;
height: 50px;
float: left;
background-color:gray;
}
#Rup {
width: 50px;
height: 50px;
float: left;
background-color:#FFB6C1;
}
#Ldown{
width: 50px;
height: 50px;
background-color: #CD9B1D;
float: left;
clear: both;
}
#Rdown{
width: 50px;
height: 50px;
background-color: #EEE9BF;
float: left; /clear: both;/
}
</style>
<title>田字格</title>
</head>
<body>
<div id="Lup">左上角</div>
<div id="Rup">右上角</div>
<div id="Ldown">左下角</div>
<div id="Rdown">右下角</div>
</body>
</html>
效果：
今天還學到了markdown中在每行前面空四個空格，可以將文字轉(zhuǎn)換為代碼模式，不知其他有沒有簡便一點的方式引入代碼。
