一. 地址
網頁上引入或鏈接到外部文件，需要定義文件的地址，常見引入或鏈接外部文件包括以下幾種：
<!-- 引入外部圖片 -->
<img src="images/001.jpg" alt="圖片" />
<!-- 添加一個圖片 -->
<img src="C:\course5\03day\images\001.jpg" alt="圖片" />
<!-- 鏈接到另外一個網頁 -->
<a href="002.html">鏈接到網頁2</a>
<!-- 鏈接到另外一個網頁 -->
<a href="C:\source2\002.html">鏈接到網頁2</a>
<!-- 外鏈一個css文件 -->
<link rel="stylesheet" type="text/css" href="css/main.css" />
<!-- 外鏈一個js文件 -->
<script type="text/javascript" src="js/jquery.js"></script>
這些地址分為相對地址和絕對地址:
1. 相對地址
相對于引用文件本身去定位被引用的文件地址，相對地址的定義技巧：
“ ./ ” 表示當前文件所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
-
“ ../ ” 表示當前文件所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。
?
2. 絕對地址
相對于磁盤的位置去定位文件的地址:
例如:<img src="C:\course5\03day\images\001.jpg" alt="圖片" />
絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件，相對地址就沒有這個問題。
二. CSS盒子模型
盒子模型解釋
元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設置元素對應的樣式。盒子模型示意圖如下：
把元素叫做盒子，設置對應的樣式分別為：盒子的寬度(width)、盒子的高度(height)、盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
設置寬高 width height
width:200px; /* 設置盒子的寬度，此寬度是指盒子內容的寬度，不是盒子整體寬度(難點) */
height:200px; /* 設置盒子的高度，此高度是指盒子內容的高度，不是盒子整體高度(難點) */
設置邊框 border
設置一邊的邊框，比如頂部邊框，可以按如下設置：
border-top:10px solid red;
其中10px表示線框的粗細；solid表示線性。
設置其它三個邊的方法和上面一樣，把上面的'top'換成'left'就是設置左邊，換成'right'就是設置右邊，換成'bottom'就是設置底邊。
四個邊如果設置一樣，可以將四個邊的設置合并成一句：
border:10px solid red;
設置內間距 padding
設置盒子四邊的內間距，可設置如下：
padding-top：20px; /* 設置頂部內間距20px */
padding-left:30px; /* 設置左邊內間距30px */
padding-right:40px; /* 設置右邊內間距40px */
padding-bottom:50px; /* 設置底部內間距50px */
上面的設置可以簡寫如下：
/* 四個值按照順時針方向，分別設置的是 上 右 下 左 四個方向的內邊距值。 */
padding：20px 40px 50px 30px;
padding后面還可以跟3個值，2個值和1個值，它們分別設置的項目如下：
padding：20px 40px 50px; /* 設置頂部內邊距為20px，左右內邊距為40px，底部內邊距為50px */
padding：20px 40px; /* 設置上下內邊距為20px，左右內邊距為40px*/
padding：20px; /* 設置四邊內邊距為20px */
設置外間距margin
外邊距的設置方法和padding的設置方法相同，將上面設置項中的'padding'換成'margin'就是外邊距設置方法。
外間距居中技巧
如果子元素是塊元素，且它的寬度小于父元素，可以將子元素左右設置auto來水平居中子元素
/* 子元素上下外邊距設為0，左右設置為auto */
margin:0px auto;
盒子的真實尺寸
盒子的width和height值固定時，如果盒子增加border和padding，盒子整體的尺寸會變大，所以盒子的真實尺寸為：
- 盒子寬度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
三. 列表 標簽
前端中列表分為兩種:
- 有序列表
- 無序列表
1. 無序列表
無序列表一般應用在布局中的新聞標題列表和文章標題列表以及菜單，它是含有語義的，標簽結構如下：
使用方式: ul>li{列表標題}*3
<ul>
<li>列表標題</li>
<li>列表標題</li>
<li>列表標題</li>
</ul>
列表的內容一般是可以鏈接的，點擊鏈接到新聞或者文章的具體內容，所以具體結構一般是這樣的：
ul>(li>a[href=#]{列表標題 $})*3
<ul>
<li><a href="#">列表標題 1</a></li>
<li><a href="#">列表標題 2</a></li>
<li><a href="#">列表標題 3</a></li>
</ul>
顯示效果:
2. 有序列表
使用方式: ol>li{列表標題}*3
<ol>
<li>列表標題</li>
<li>列表標題</li>
<li>列表標題</li>
</ol>
顯示效果:
請進行如下的 emmet 語法練習:
.box>.box1+.box2
#page>div.logo+ul#navigation>li*5>a{Item $}
div#header+div.page+div#footer.class1.class2.class3
總結:
我們在寫頁面的時候經常會使用列表標簽
-
寫列表標簽的時候, 我們可以去掉前面的點或者是序號:
<style> li { list-style:none; /* 取消列表前面的序號或者是點 */ } </style>
寫所有 html 頁面的時候, 都可以使用 emmet 語法
四. HTML表單
表單用于搜集不同類型的用戶輸入，表單由不同類型的標簽組成，相關標簽及屬性用法如下：
1、<form>標簽 定義整體的表單區域
action屬性 定義表單數據提交地址
method屬性 定義表單提交的方式，一般有“get”方式和“post”方式
使用方式:
<form action="" method="">
</form>
2、<label>標簽 為表單元素定義文字標注
label 的 for 屬性值可以和 input 的 id 名書寫一致, 使 label 的點擊也能夠觸發 input 的聚焦
label的使用方式:
<label for="">Male</label>
<label for="">Female</label>
label的for屬性設置:
<label for="male">用戶名:
<input type="text" id="male">
3、<input>標簽 定義通用的表單元素
- type屬性
- type="text" 定義單行文本輸入框
- type="password" 定義密碼輸入框
- type="radio" 定義單選框
- type="checkbox" 定義復選框
- type="file" 定義上傳文件
- type="submit" 定義提交按鈕
- type="reset" 定義重置按鈕
- type="button" 定義一個普通按鈕
- value屬性 定義表單元素的值
- name屬性 定義表單元素的名稱，此名稱是提交數據時的鍵名
使用方法:
<input type="text" name="username" placeholder="請您輸入姓名">
<input type="password" name="password">
<input type="radio" name="gender" value="1"> 男
<input type="radio" name="gender" value="0"> 女
<input type="checkbox" name="hobby" value="1"> 唱歌
<input type="file" name="file">
<input type="submit">
<input type="reset">
<input type="button" value="按鈕1">
4、<textarea>標簽 定義多行文本輸入框
使用方法:
<textarea name="" placeholder="提示信息..." id="" cols="30" rows="10">
textarea的使用
</textarea>
5、<select>標簽 定義下拉表單元素
6、<option>標簽 與<select>標簽配合，定義下拉表單元素中的選項
使用方法:
創建帶有 4 個選項的選擇列表：
<select name="province" id="">
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">河南</option>
<option value="4">湖北</option>
</select>
練習:
注冊表單實例：
<form action="http://www..." method="get">
<p>
<label>姓名：</label>
<input type="text" name="username" />
</p>
<p>
<label>密碼：</label>
<input type="password" name="password" />
</p>
<p>
<label>性別：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>愛好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>個人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍貫：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">廣州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>
單行文本框文字提示
- placeholder 設置input輸入框的默認提示文字。
總結:
- 在前端頁面中, 我們往往用表單來制作用戶的注冊, 登錄等功能.
- 表單包含很多內容, 例如:
- 單選: radio
- 多選: checkbox
- 密碼: password
- 文本: text
- 按鈕: reset, submit, file
- 多行文本輸入: textarea
- 下拉菜單: select option
- 表單( form )可以直接提交: 提交方法包含 get post
- action: 提交的服務器地址
- method: 提交的方法
五. 表格元素及相關樣式
1、<table>標簽
聲明一個表格
2、<tr>標簽
定義表格中的行
3、<td>和<th>標簽
定義列以及列中的標題
td代表列，th表示列中的標題部分(加粗)
它們的常用屬性如下：
- colspan 設置單元格水平合并，設置值是數值
- rowspan 設置單元格垂直合并，設置值是數值
表格相關樣式屬性
- border-collapse 設置表格的邊線合并，如：border-collapse:collapse;
- border='1' 可以設置table的邊框大小
- text-align 可以設置對齊方式: left right center
總結:
- 在網頁中, 表格用一般用 table 標簽來做
- 表格中分為 行 和 列
- 表格中的行為 tr 標簽
- 表格中的列為 td 標簽
- 其中每一列都可以有一個標題, 我們可以使用 th 標簽
<table>
<tr>
<th>標題一</th>
<th>標題二</th>
<th>標題三</th>
<th>標題四</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
顯示效果:
六. CSS屬性進階
1.文本常用樣式屬性進階：
- text-align 設置文字水平對齊方式，如text-align:center 設置文字水平居中
- text-indent 設置文字首行縮進，如：text-indent:32px; 設置文字首行縮進32px
CSS部分:
<style>
.box {
width:80px;
height:30px;
background: pink;
text-align: center;
}
.pbox {
/* css里面默認的字體大小是16px */
font-size: 20px;
text-indent: 32px;
}
</style>
HTML部分:
<div class="box">
<p>
你好世界
</p>
</div>
<p class="pbox">
大頭兒子小頭爸爸
一對好朋友 快樂父子倆
兒子的頭大手兒小
爸爸的頭小手兒很大
大手牽小手
走路不怕滑
走呀走呀走 走 走
轉眼兒子就長大
轉眼兒子就長大
</p>
2. display屬性
作用: 第一個決定了當前元素是否應該顯示, 第二個決定了當前元素應該以什么類型顯示
display 屬性規定元素應該生成的框的類型。
display 的默認屬性值是 inline, 此元素會被顯示為內聯元素
display屬性是用來設置元素的類型及隱藏的，常用的屬性有：
- none 元素隱藏且不占位置
- block 此元素會被顯示為塊元素
- inline 此元素會被顯示為內聯元素
CSS部分:
<style>
div {
display: inline;
}
a {
display: block;
}
.pbox {
width: 200px;
height: 200px;
background: pink;
display: none;
}
</style>
HTML部分:
<div>
<div>我是要成為海賊王的男人</div>
<div>海賊王下面的div</div>
<a href="#">這是第一個鏈接</a>
<a href="#">這是第二個鏈接</a>
<p class="pbox" style="display:block">
葫蘆娃 葫蘆娃 一根藤上七朵花 小小樹藤是我家 啦啦啦啦 叮當當咚咚當當 澆不大 叮當當咚咚當當 是我家 啦啦啦啦
</p>
</div>
3. CSS元素溢出
當子元素的尺寸超過父元素的尺寸時，需要設置父元素顯示溢出的子元素的方式，設置的方法是通過overflow屬性來設置。
overflow的設置項：
1、visible 默認值。內容不會被修剪，會呈現在元素框之外。
2、hidden 內容會被修剪，并且其余內容是不可見的。
3、scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
4、auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
CSS部分:
<style>
div {
width:100px;
height:100px;
overflow: auto;
}
</style>
HTML部分:
<div>
格嘰格嘰~
<br><br>
格嘰格嘰~~
<br><br>
格嘰~格嘰~~
<br><br>
</div>
七. 定位
把某一個標簽, 安置到某一個位置去, 這個過程稱為定位.
1. 文檔流概念( 了解 )
文檔流，是指盒子按照 HTML 標簽編寫的順序依次從上到下，從左到右排列，塊元素占一行，行內元素在一行之內從左到右排列，先寫的先排列，后寫的排在后面，每個盒子都占據自己的位置。
2. 定位分類:
我們可以使用 CSS 的 position 屬性來設置元素的定位類型，position 的設置項如下：
- static 默認值. 沒有定位: 元素出現在正常的流中(忽略top, bottom, left, right 或者 z-index 聲明)
relative 生成相對定位元素，一般是將父級設置相對定位，子級設置絕對定位，子級就以父級作為參照來定位，否則子級相對于body來定位。
absolute: 生成絕對定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對于上一個設置了定位的父級元素來進行定位，如果找不到，則相對于body元素進行定位。
-
fixed: 生成固定定位的元素，相對于瀏覽器窗口進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
定位元素的偏移
定位的元素還需要用left、right、top或者bottom來設置相對于參照元素的偏移值。
1. 相對定位:
CSS部分:
<style>
.con {
width:300px;
height:300px;
border:1px solid black;
margin:0px auto;
}
.con div {
width:200px;
height:70px;
margin:10px;
}
.box01 {
background:lightgreen;
/* 設置相對定位 */
position:relative;
left:50px;
top:50px;
}
.box02 {
background: lightskyblue
}
.box03 {
background: lightpink;
}
</style>
HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
2. 絕對定位:
<style>
.con{
width:300px;
height:300px;
border:1px solid black;
margin:0px auto;
/* 父級設置為相對定位，不設置偏移，子級就可以以它為參照做絕對定位 */
position: relative;
/* 設置父級的溢出隱藏 */
overflow: hidden;
}
.con div{
width:200px;
height:70px;
margin:10px;
}
.box01{
background:lightgreen;
/* 設置絕對定位 */
position:absolute;
left:131px;
top:50px;
}
.box02{
background: lightskyblue
}
.box03{
background: lightpink;
}
</style>
HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
3. 固定定位
<style>
.con{
width:300px;
height:300px;
border:1px solid black;
margin:0px auto;
}
.con div{
width:200px;
height:70px;
margin:10px;
}
.box01{
background:lightgreen;
/* 設置固定定位 */
position:fixed;
right:131px;
bottom:50px;
}
.box02{
background: lightskyblue
}
.box03{
background: lightpink;
}
</style>
HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
3. 元素層級
絕對定位元素是浮動在正常的文檔流之上的，可以用 z-index 屬性來設置元素的層級
例如:
偽代碼如下:
.box01{
......
position:absolute; /* 設置了絕對定位 */
left:200px; /* 相對于參照元素左邊向右偏移200px */
top:100px; /* 相對于參照元素頂部向下偏移100px */
z-index:10 /* 將元素層級設置為10 */
}
CSS部分:
<style>
.con{
width:300px;
height:300px;
border:1px solid black;
margin:0px auto;
position: relative;
}
.con div{
width:200px;
height:70px;
margin:10px;
position:absolute;
}
.box01{
background:lightgreen;
left:0px;
top:0px;
/* 設置定位元素的層級 */
z-index:6;
}
.box02{
background: lightskyblue;
left:30px;
top:30px;
z-index:7;
}
.box03{
background: lightpink;
left:60px;
top:60px;
z-index:8;
}
</style>
HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
<!-- 如果不設置z-index屬性，定位元素的層級安裝代碼書寫的順序，先寫的排列在下面，后寫的排列在上面 -->
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
4 . 練習: 用固定定位創建彈窗
<style>
.pop{
width:500px;
height:300px;
border:1px solid black;
background:white;
position: fixed;
/* 彈框水平垂直居中的寫法： */
left:50%;
top:50%;
margin-left:-251px;
margin-top:-151px;
/* 設置彈框的層級,設置比較大的值，蓋住其他所有的元素*/
z-index:9999;
}
.pop h3{
margin:5px;
background: lightskyblue;
line-height:40px;
}
.mask{
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:black;
z-index:9998;
/* 設置背景的透明度 */
opacity:0.3;
/* 透明度兼容寫法，兼容IE */
filter:alpha(opacity=30);
}
/* 設置pop_con的隱藏，可以同時將彈框和背景隱藏起來 */
.pop_con{
display:none;
}
</style>
HTML部分:
<h1>網頁內容</h1>
<div class="pop_con" style="display:block">
<div class="pop">
<h3>彈框標題</h3>
<p>彈框的文字內容</p>
</div>
<div class="mask"></div>
</div>
八. 頁面嵌套
在一個頁面中可以開一個局部的窗口，嵌入另外一個頁面
制作這樣的功能我們一般使用: iframe 標簽來實現
使用方法:
<iframe src="" frameborder="">
</iframe>
- src: 設置另一個網頁的地址
- frameborder: 設置這個局部窗口邊框的粗細
**提升: **
iframe 可以和 a 標簽搭配使用, 呈現切換的效果:
我們知道
a標簽有 target 屬性:target="_blank" : 新開一個瀏覽器窗口顯示鏈接的頁面
如果 target 的值和 iframe 的 name 值保持相同, 則 a 標簽切換后的 href 將作用到 iframe 的 src 上:
<a href="001.html" target="name">001頁面</a>
<a href="002.html" target="name">002頁面</a>
<a href="003.html" target="name">003頁面</a>
<iframe src="001.html" frameborder="0" name="name"></iframe>
九. 元素居中顯示技巧
1. 居中顯示:
想要使某個元素能夠居中顯示, 需要設置其 margin 屬性為: 0px auto:
CSS部分:
<style>
.box{
width: 300px;
height: 300px;
background: gold;
margin:0px auto;
}
</style>
HTML部分:
<div class="box"></div>
總結:
- 如果想要某個元素居中, 則需要設置他的 margin : 0px auto;
- 多個元素想要居中, 則每個單獨的元素都需要設置該屬性.
- margin: 0px auto; =====> margin: 0px auto 0px auto; (上, 右, 下, 左)
十. CSS權重值計算 ( 簡單了解 )
什么是權重值:
例子: 根據分數, 決定排名
小明的分數: 總分( 550 )
- 英語: 100
- 數學: 130
- 語文: 90
- 理綜: 230
小紅的分數: 總分 ( 530 )
- 英語: 110
- 數學: 120
- 語文: 100
- 理綜: 200
因為 小明的分數 > 小紅的分數 , 所以 小明的排名高于小紅的排名
我們上面說的各個學科, 其實就相當于各個選擇器, 各學科有分數, 各選擇器也有分數, 分數相加最高的 顯示在最上面, 覆蓋掉分數低的. 各個選擇器的分數就是權重.
1.權重了解
- 內聯樣式的權重值最高: 1000 (內聯: 寫在標簽上的樣式)
- 標簽選擇器的權重值為最低: 1
- 類選擇器的權重值為: 10 ( 了解 )
- 偽類選擇器權重值為: 10 ( 了解 )
- id 選擇器的權重值為: 100
CSS部分:
<style>
/* 權重值：1 */
div{
color:red;
}
/* 權重值：1+10+10+1=22 */
body .con .box h3{
color:#8e6758;
}
/* 權重值：10+10+1=21 */
.con .box h3{
color:red;
}
</style>
HTML部分:
<!-- style的權重值：1000 -->
<div style="color:blue">這是一個div</div>
<div class="con">
<div class="box">
<h3>這是一個h3標簽</h3>
</div>
</div>
十一. Photoshop
1. photoshop的使用:
1) 什么是 photoshop ?
Adobe Photoshop，簡稱 “PS”，是由 Adobe Systems 開發和發行的圖像處理軟件。
Photoshop 主要處理以像素所構成的數字圖像。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。PS 有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。
2) 我們這里使用 PS 來輔助測量和取色
圖片預覽的方法:
- 圖片縮放
- 圖片平移
尺寸測量方法:
- 設置單位
- 矩形框測量, 調整矩形框
- 文字大小的測量
取色方法:
- 取色工具
- 前景色按鈕
CSS 顏色表示法:
CSS 顏色值主要有三種表示法:
- 顏色名表示, 比如 : red 紅色, pink 金色;
- 16 進制數值表示, 比如: #ff0000 表示紅色
