CSS

一. 地址

網(wǎng)頁上引入或鏈接到外部文件，需要定義文件的地址负溪，常見引入或鏈接外部文件包括以下幾種：

<!-- 引入外部圖片   -->
<img src="images/001.jpg" alt="圖片" />

<!-- 添加一個(gè)圖片 -->
<img src="C:\course5\03day\images\001.jpg" alt="圖片" />


<!-- 鏈接到另外一個(gè)網(wǎng)頁   -->
<a href="002.html">鏈接到網(wǎng)頁2</a>

<!-- 鏈接到另外一個(gè)網(wǎng)頁   -->
<a href="C:\source2\002.html">鏈接到網(wǎng)頁2</a>


<!-- 外鏈一個(gè)css文件   -->
<link rel="stylesheet" type="text/css" href="css/main.css" />

<!-- 外鏈一個(gè)js文件   -->
<script type="text/javascript" src="js/jquery.js"></script>

這些地址分為相對(duì)地址和絕對(duì)地址:

1. 相對(duì)地址

相對(duì)于引用文件本身去定位被引用的文件地址逃沿，相對(duì)地址的定義技巧：

“ ./ ” 表示當(dāng)前文件所在目錄下码荔，比如：“./pic.jpg” 表示當(dāng)前目錄下的pic.jpg的圖片，這個(gè)使用時(shí)可以省略感挥。
“ ../ ” 表示當(dāng)前文件所在目錄下的上一級(jí)目錄缩搅，比如：“../images/pic.jpg” 表示當(dāng)前目錄下的上一級(jí)目錄下的images文件夾中的pic.jpg的圖片。

?

2. 絕對(duì)地址

相對(duì)于磁盤的位置去定位文件的地址:

例如:<img src="C:\course5\03day\images\001.jpg" alt="圖片" />

絕對(duì)地址在整體文件遷移時(shí)會(huì)因?yàn)榇疟P和頂層目錄的改變而找不到文件触幼，相對(duì)地址就沒有這個(gè)問題硼瓣。

二. CSS盒子模型

盒子模型解釋

元素在頁面中顯示成一個(gè)方塊，類似一個(gè)盒子置谦，CSS盒子模型就是使用現(xiàn)實(shí)中盒子來做比喻堂鲤，幫助我們?cè)O(shè)置元素對(duì)應(yīng)的樣式。盒子模型示意圖如下：

這里寫圖片描述

把元素叫做盒子媒峡，設(shè)置對(duì)應(yīng)的樣式分別為：盒子的寬度(width)瘟栖、盒子的高度(height)、盒子的邊框(border)谅阿、盒子內(nèi)的內(nèi)容和邊框之間的間距(padding)半哟、盒子與盒子之間的間距(margin)酬滤。

設(shè)置寬高 width height

width:200px;  /* 設(shè)置盒子的寬度，此寬度是指盒子內(nèi)容的寬度寓涨，不是盒子整體寬度(難點(diǎn)) */ 
height:200px; /* 設(shè)置盒子的高度盯串，此高度是指盒子內(nèi)容的高度，不是盒子整體高度(難點(diǎn)) */

設(shè)置邊框 border

設(shè)置一邊的邊框戒良，比如頂部邊框体捏，可以按如下設(shè)置：

border-top:10px solid red;

其中10px表示線框的粗細(xì)；solid表示線性糯崎。

設(shè)置其它三個(gè)邊的方法和上面一樣几缭，把上面的'top'換成'left'就是設(shè)置左邊，換成'right'就是設(shè)置右邊沃呢，換成'bottom'就是設(shè)置底邊奏司。

四個(gè)邊如果設(shè)置一樣，可以將四個(gè)邊的設(shè)置合并成一句：

border:10px solid red;

設(shè)置內(nèi)間距 padding

設(shè)置盒子四邊的內(nèi)間距樟插，可設(shè)置如下：

padding-top：20px;     /* 設(shè)置頂部?jī)?nèi)間距20px */ 
padding-left:30px;     /* 設(shè)置左邊內(nèi)間距30px */ 
padding-right:40px;    /* 設(shè)置右邊內(nèi)間距40px */ 
padding-bottom:50px;   /* 設(shè)置底部?jī)?nèi)間距50px */

上面的設(shè)置可以簡(jiǎn)寫如下：

/* 四個(gè)值按照順時(shí)針方向韵洋，分別設(shè)置的是 上 右 下 左  四個(gè)方向的內(nèi)邊距值。 */
padding：20px 40px 50px 30px;

padding后面還可以跟3個(gè)值黄锤，2個(gè)值和1個(gè)值搪缨，它們分別設(shè)置的項(xiàng)目如下：

padding：20px 40px 50px; /* 設(shè)置頂部?jī)?nèi)邊距為20px，左右內(nèi)邊距為40px鸵熟，底部?jī)?nèi)邊距為50px */ 
padding：20px 40px; /* 設(shè)置上下內(nèi)邊距為20px副编，左右內(nèi)邊距為40px*/ 
padding：20px; /* 設(shè)置四邊內(nèi)邊距為20px */

設(shè)置外間距margin
外邊距的設(shè)置方法和padding的設(shè)置方法相同，將上面設(shè)置項(xiàng)中的'padding'換成'margin'就是外邊距設(shè)置方法流强。

外間距居中技巧
如果子元素是塊元素痹届，且它的寬度小于父元素，可以將子元素左右設(shè)置auto來水平居中子元素

/* 子元素上下外邊距設(shè)為0打月，左右設(shè)置為auto */
margin:0px auto;

盒子的真實(shí)尺寸
盒子的width和height值固定時(shí)队腐，如果盒子增加border和padding，盒子整體的尺寸會(huì)變大奏篙，所以盒子的真實(shí)尺寸為：

盒子寬度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

三. 列表標(biāo)簽

前端中列表分為兩種:

有序列表

無序列表

1. 無序列表

無序列表一般應(yīng)用在布局中的新聞標(biāo)題列表和文章標(biāo)題列表以及菜單萝勤，它是含有語義的蛔外，標(biāo)簽結(jié)構(gòu)如下：

使用方式:         ul>li{列表標(biāo)題}*3


<ul>
    <li>列表標(biāo)題</li>
    <li>列表標(biāo)題</li>
    <li>列表標(biāo)題</li>
</ul>

列表的內(nèi)容一般是可以鏈接的览效，點(diǎn)擊鏈接到新聞或者文章的具體內(nèi)容痢畜，所以具體結(jié)構(gòu)一般是這樣的：

ul>(li>a[href=#]{列表標(biāo)題 $})*3

<ul>
    <li><a href="#">列表標(biāo)題 1</a></li>
    <li><a href="#">列表標(biāo)題 2</a></li>
    <li><a href="#">列表標(biāo)題 3</a></li>
</ul>

顯示效果:

這里寫圖片描述

2. 有序列表

使用方式:         ol>li{列表標(biāo)題}*3

<ol>
    <li>列表標(biāo)題</li>
    <li>列表標(biāo)題</li>
    <li>列表標(biāo)題</li>
</ol>

顯示效果:

這里寫圖片描述

請(qǐng)進(jìn)行如下的 emmet 語法練習(xí):

.box>.box1+.box2

#page>div.logo+ul#navigation>li*5>a{Item $}

div#header+div.page+div#footer.class1.class2.class3

總結(jié):

我們?cè)趯戫撁娴臅r(shí)候經(jīng)常會(huì)使用列表標(biāo)簽

寫列表標(biāo)簽的時(shí)候, 我們可以去掉前面的點(diǎn)或者是序號(hào):

<style>
    li {
        list-style:none; /* 取消列表前面的序號(hào)或者是點(diǎn) */
    }
</style>

寫所有 html 頁面的時(shí)候, 都可以使用 emmet 語法

四. HTML表單

表單用于搜集不同類型的用戶輸入，表單由不同類型的標(biāo)簽組成肺稀，相關(guān)標(biāo)簽及屬性用法如下：

1第股、<form>標(biāo)簽定義整體的表單區(qū)域

action屬性定義表單數(shù)據(jù)提交地址

method屬性定義表單提交的方式，一般有“get”方式和“post”方式

使用方式:

<form action="" method="">
    
</form>

2话原、<label>標(biāo)簽為表單元素定義文字標(biāo)注

label 的 for 屬性值可以和 input 的 id 名書寫一致, 使 label 的點(diǎn)擊也能夠觸發(fā) input 的聚焦

label的使用方式:
<label for="">Male</label>
<label for="">Female</label>

label的for屬性設(shè)置: 
<label for="male">用戶名:
<input type="text" id="male">

3夕吻、<input>標(biāo)簽定義通用的表單元素

type屬性
- type="text" 定義單行文本輸入框
- type="password" 定義密碼輸入框
- type="radio" 定義單選框
- type="checkbox" 定義復(fù)選框
- type="file" 定義上傳文件
- type="submit" 定義提交按鈕
- type="reset" 定義重置按鈕
- type="button" 定義一個(gè)普通按鈕
value屬性定義表單元素的值
name屬性定義表單元素的名稱诲锹，此名稱是提交數(shù)據(jù)時(shí)的鍵名

使用方法:

<input type="text" name="username" placeholder="請(qǐng)您輸入姓名">

<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>標(biāo)簽定義多行文本輸入框

使用方法:
<textarea name="" placeholder="提示信息..." id="" cols="30" rows="10">
    textarea的使用
</textarea>

5梭冠、<select>標(biāo)簽定義下拉表單元素

6、<option>標(biāo)簽與<select>標(biāo)簽配合改备，定義下拉表單元素中的選項(xiàng)

使用方法: 

創(chuàng)建帶有 4 個(gè)選項(xiàng)的選擇列表：
<select name="province" id="">
    <option value="1">北京</option>
    <option value="2">河北</option>
    <option value="3">河南</option>
    <option value="4">湖北</option>
</select>

練習(xí):

這里寫圖片描述

注冊(cè)表單實(shí)例：

<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>個(gè)人描述：</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 設(shè)置input輸入框的默認(rèn)提示文字控漠。

總結(jié):

在前端頁面中, 我們往往用表單來制作用戶的注冊(cè), 登錄等功能.
表單包含很多內(nèi)容, 例如:
- 單選: radio
- 多選: checkbox
- 密碼: password
- 文本: text
- 按鈕: reset, submit, file
- 多行文本輸入: textarea
- 下拉菜單: select option
表單( form )可以直接提交: 提交方法包含 get post
- action: 提交的服務(wù)器地址
- method: 提交的方法

五. 表格元素及相關(guān)樣式

1、<table>標(biāo)簽

聲明一個(gè)表格

2悬钳、<tr>標(biāo)簽

定義表格中的行

3盐捷、<td>和<th>標(biāo)簽

定義列以及列中的標(biāo)題

td代表列，th表示列中的標(biāo)題部分(加粗)

它們的常用屬性如下：

colspan 設(shè)置單元格水平合并默勾，設(shè)置值是數(shù)值
rowspan 設(shè)置單元格垂直合并碉渡，設(shè)置值是數(shù)值

表格相關(guān)樣式屬性

border-collapse 設(shè)置表格的邊線合并，如：border-collapse:collapse;
border='1' 可以設(shè)置table的邊框大小
text-align 可以設(shè)置對(duì)齊方式: left right center

總結(jié):

在網(wǎng)頁中, 表格用一般用 table 標(biāo)簽來做
表格中分為行和列
表格中的行為 tr 標(biāo)簽
表格中的列為 td 標(biāo)簽
- 其中每一列都可以有一個(gè)標(biāo)題, 我們可以使用 th 標(biāo)簽

<table>
    <tr>
        <th>標(biāo)題一</th>
        <th>標(biāo)題二</th>
        <th>標(biāo)題三</th>
        <th>標(biāo)題四</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

顯示效果:

這里寫圖片描述

六. CSS屬性進(jìn)階

1.文本常用樣式屬性進(jìn)階：

text-align 設(shè)置文字水平對(duì)齊方式母剥，如text-align:center 設(shè)置文字水平居中
text-indent 設(shè)置文字首行縮進(jìn)滞诺，如：text-indent:32px; 設(shè)置文字首行縮進(jìn)32px

CSS部分: 
<style>
    .box {
        width:80px;
        height:30px;
        background: pink;
        text-align: center;
    }
    .pbox {
        /* css里面默認(rèn)的字體大小是16px */
        font-size: 20px;
        text-indent: 32px;
    }
</style>

HTML部分:
<div class="box">
    <p>
        你好世界
    </p>
</div>
<p class="pbox">
    大頭兒子小頭爸爸
    一對(duì)好朋友 快樂父子倆
    兒子的頭大手兒小
    爸爸的頭小手兒很大
    大手牽小手
    走路不怕滑
    走呀走呀走 走 走
    轉(zhuǎn)眼兒子就長(zhǎng)大
    轉(zhuǎn)眼兒子就長(zhǎng)大
</p>

2. display屬性

作用: 第一個(gè)決定了當(dāng)前元素是否應(yīng)該顯示, 第二個(gè)決定了當(dāng)前元素應(yīng)該以什么類型顯示

display 屬性規(guī)定元素應(yīng)該生成的框的類型。

display 的默認(rèn)屬性值是 inline, 此元素會(huì)被顯示為內(nèi)聯(lián)元素

display屬性是用來設(shè)置元素的類型及隱藏的环疼，常用的屬性有：

none 元素隱藏且不占位置

block 此元素會(huì)被顯示為塊元素

inline 此元素會(huì)被顯示為內(nèi)聯(lián)元素

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="#">這是第一個(gè)鏈接</a>
    <a href="#">這是第二個(gè)鏈接</a>
    
    <p class="pbox" style="display:block">
        葫蘆娃 葫蘆娃 一根藤上七朵花 小小樹藤是我家 啦啦啦啦 叮當(dāng)當(dāng)咚咚當(dāng)當(dāng)　澆不大 叮當(dāng)當(dāng)咚咚當(dāng)當(dāng) 是我家 啦啦啦啦
    </p>
</div>

3. CSS元素溢出

這里寫圖片描述

當(dāng)子元素的尺寸超過父元素的尺寸時(shí)习霹，需要設(shè)置父元素顯示溢出的子元素的方式，設(shè)置的方法是通過overflow屬性來設(shè)置炫隶。

overflow的設(shè)置項(xiàng)：

1淋叶、visible 默認(rèn)值。內(nèi)容不會(huì)被修剪伪阶，會(huì)呈現(xiàn)在元素框之外煞檩。

2、hidden 內(nèi)容會(huì)被修剪栅贴，并且其余內(nèi)容是不可見的斟湃。

3、scroll 內(nèi)容會(huì)被修剪檐薯，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容桐早。

4、auto 如果內(nèi)容被修剪厨剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容哄酝。

CSS部分: 
<style>
    div {
        width:100px;
        height:100px;
        overflow: auto;
    }
</style>

HTML部分:
<div>
    格嘰格嘰~
    <br><br>
    格嘰格嘰~~
    <br><br>
    格嘰~格嘰~~
    <br><br>
</div>

七. 定位

這里寫圖片描述

把某一個(gè)標(biāo)簽, 安置到某一個(gè)位置去, 這個(gè)過程稱為定位.

1. 文檔流概念( 了解 )

文檔流，是指盒子按照 HTML 標(biāo)簽編寫的順序依次從上到下祷膳，從左到右排列陶衅，塊元素占一行，行內(nèi)元素在一行之內(nèi)從左到右排列直晨，先寫的先排列搀军，后寫的排在后面膨俐，每個(gè)盒子都占據(jù)自己的位置。

2. 定位分類:

我們可以使用 CSS 的 position 屬性來設(shè)置元素的定位類型罩句，position 的設(shè)置項(xiàng)如下：

static 默認(rèn)值. 沒有定位: 元素出現(xiàn)在正常的流中(忽略top, bottom, left, right 或者 z-index 聲明)

relative 生成相對(duì)定位元素焚刺，一般是將父級(jí)設(shè)置相對(duì)定位，子級(jí)設(shè)置絕對(duì)定位门烂，子級(jí)就以父級(jí)作為參照來定位乳愉，否則子級(jí)相對(duì)于body來定位。
absolute: 生成絕對(duì)定位元素屯远，元素脫離文檔流蔓姚，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方慨丐，相對(duì)于上一個(gè)設(shè)置了定位的父級(jí)元素來進(jìn)行定位坡脐，如果找不到，則相對(duì)于body元素進(jìn)行定位房揭。
fixed: 生成固定定位的元素备闲，相對(duì)于瀏覽器窗口進(jìn)行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定捅暴。

定位元素的偏移

定位的元素還需要用left浅役、right、top或者bottom來設(shè)置相對(duì)于參照元素的偏移值伶唯。

1. 相對(duì)定位:

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;
        /* 設(shè)置相對(duì)定位 */
        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. 絕對(duì)定位:

<style>
    .con{
        width:300px;
        height:300px;
        border:1px solid black;
        margin:0px auto;
        /* 父級(jí)設(shè)置為相對(duì)定位觉既，不設(shè)置偏移，子級(jí)就可以以它為參照做絕對(duì)定位 */
        position: relative;
        /* 設(shè)置父級(jí)的溢出隱藏 */
        overflow: hidden;
    }

    .con div{
        width:200px;
        height:70px;
        margin:10px;
    }

    .box01{
        background:lightgreen;
        /* 設(shè)置絕對(duì)定位 */
        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;
        /* 設(shè)置固定定位 */
        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. 元素層級(jí)

絕對(duì)定位元素是浮動(dòng)在正常的文檔流之上的乳幸，可以用 z-index 屬性來設(shè)置元素的層級(jí)

例如:

這里寫圖片描述

偽代碼如下:

.box01{
    ......
    position:absolute;  /* 設(shè)置了絕對(duì)定位 */
    left:200px;         /* 相對(duì)于參照元素左邊向右偏移200px */
    top:100px;          /* 相對(duì)于參照元素頂部向下偏移100px */
    z-index:10          /* 將元素層級(jí)設(shè)置為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;

        /* 設(shè)置定位元素的層級(jí) */
        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">
    <!-- 如果不設(shè)置z-index屬性瞪讼，定位元素的層級(jí)安裝代碼書寫的順序，先寫的排列在下面粹断，后寫的排列在上面 -->
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>

4 . 練習(xí): 用固定定位創(chuàng)建彈窗

這里寫圖片描述

<style>
    .pop{
        width:500px;
        height:300px;
        border:1px solid black;
        background:white;
        position: fixed;

        /* 彈框水平垂直居中的寫法： */
        left:50%;
        top:50%;
        margin-left:-251px;
        margin-top:-151px;
        /* 設(shè)置彈框的層級(jí),設(shè)置比較大的值符欠，蓋住其他所有的元素*/
        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;

        /* 設(shè)置背景的透明度 */
        opacity:0.3;
        /* 透明度兼容寫法，兼容IE */
        filter:alpha(opacity=30);

    }

    /* 設(shè)置pop_con的隱藏瓶埋，可以同時(shí)將彈框和背景隱藏起來 */
    .pop_con{
        display:none;
    }  
</style>

HTML部分:
<h1>網(wǎng)頁內(nèi)容</h1>
    <div class="pop_con" style="display:block">
        <div class="pop">
            <h3>彈框標(biāo)題</h3>
            <p>彈框的文字內(nèi)容</p>
    </div>
    <div class="mask"></div>
</div>

八. 頁面嵌套

這里寫圖片描述

在一個(gè)頁面中可以開一個(gè)局部的窗口希柿，嵌入另外一個(gè)頁面

制作這樣的功能我們一般使用: iframe 標(biāo)簽來實(shí)現(xiàn)

使用方法: 

<iframe src="" frameborder="">

</iframe>

src: 設(shè)置另一個(gè)網(wǎng)頁的地址

frameborder: 設(shè)置這個(gè)局部窗口邊框的粗細(xì)

**提升: **

iframe 可以和 a 標(biāo)簽搭配使用, 呈現(xiàn)切換的效果:

我們知道 a 標(biāo)簽有 target 屬性:

target="_blank" : 新開一個(gè)瀏覽器窗口顯示鏈接的頁面

如果 target 的值和 iframe 的 name 值保持相同, 則 a 標(biāo)簽切換后的 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. 居中顯示:

這里寫圖片描述

想要使某個(gè)元素能夠居中顯示, 需要設(shè)置其 margin 屬性為: 0px auto:

CSS部分:
<style>
.box{
    width: 300px; 
    height: 300px;
    background: gold;
    margin:0px auto;
}
</style>

HTML部分: 
<div class="box"></div>

總結(jié):

如果想要某個(gè)元素居中, 則需要設(shè)置他的 margin : 0px auto;
多個(gè)元素想要居中, 則每個(gè)單獨(dú)的元素都需要設(shè)置該屬性.
margin: 0px auto; =====> margin: 0px auto 0px auto; (上, 右, 下, 左)

十. CSS權(quán)重值計(jì)算 ( 簡(jiǎn)單了解 )

什么是權(quán)重值:

例子: 根據(jù)分?jǐn)?shù), 決定排名

小明的分?jǐn)?shù): 總分( 550 )

英語: 100

數(shù)學(xué): 130

語文: 90

理綜: 230

小紅的分?jǐn)?shù): 總分 ( 530 )

英語: 110

數(shù)學(xué): 120

語文: 100

理綜: 200

因?yàn)?小明的分?jǐn)?shù) > 小紅的分?jǐn)?shù) , 所以小明的排名高于小紅的排名

我們上面說的各個(gè)學(xué)科, 其實(shí)就相當(dāng)于各個(gè)選擇器, 各學(xué)科有分?jǐn)?shù), 各選擇器也有分?jǐn)?shù), 分?jǐn)?shù)相加最高的顯示在最上面, 覆蓋掉分?jǐn)?shù)低的. 各個(gè)選擇器的分?jǐn)?shù)就是權(quán)重.

1.權(quán)重了解

內(nèi)聯(lián)樣式的權(quán)重值最高: 1000 (內(nèi)聯(lián): 寫在標(biāo)簽上的樣式)
標(biāo)簽選擇器的權(quán)重值為最低: 1
類選擇器的權(quán)重值為: 10 ( 了解 )
偽類選擇器權(quán)重值為: 10 ( 了解 )
id 選擇器的權(quán)重值為: 100

CSS部分:
<style>
    /* 權(quán)重值：1 */
    div{
        color:red;
    }

    /* 權(quán)重值：1+10+10+1=22 */
    body .con .box h3{
        color:#8e6758;
    }

    /* 權(quán)重值：10+10+1=21 */
    .con .box h3{
        color:red;
    }
</style>

HTML部分:
<!-- style的權(quán)重值：1000 -->
<div style="color:blue">這是一個(gè)div</div>
    <div class="con">
        <div class="box">
            <h3>這是一個(gè)h3標(biāo)簽</h3>
        </div>
    </div>

十一. Photoshop

1. photoshop的使用:

1) 什么是 photoshop ?

Adobe Photoshop，簡(jiǎn)稱 “PS”养筒，是由 Adobe Systems 開發(fā)和發(fā)行的圖像處理軟件曾撤。

Photoshop 主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具晕粪，可以有效地進(jìn)行圖片編輯工作挤悉。PS 有很多功能，在圖像巫湘、圖形装悲、文字昏鹃、視頻、出版等各方面都有涉及诀诊。

2) 我們這里使用 PS 來輔助測(cè)量和取色

圖片預(yù)覽的方法:

圖片縮放
圖片平移

尺寸測(cè)量方法:

設(shè)置單位
矩形框測(cè)量, 調(diào)整矩形框
文字大小的測(cè)量

取色方法:

取色工具
前景色按鈕

CSS 顏色表示法:

CSS 顏色值主要有三種表示法:

顏色名表示, 比如 : red 紅色, pink 金色;
16 進(jìn)制數(shù)值表示, 比如: #ff0000 表示紅色

最后編輯于：2018.05.22 11:48:40

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末洞渤，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子属瓣，更是在濱河造成了極大的恐慌载迄，老刑警劉巖，帶你破解...
沈念sama閱讀 218,546評(píng)論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件奠涌，死亡現(xiàn)場(chǎng)離奇詭異宪巨，居然都是意外死亡磷杏，警方通過查閱死者的電腦和手機(jī)溜畅，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,224評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來极祸，“玉大人慈格，你說我怎么就攤上這事∫＝穑” “怎么了浴捆？”我有些...
開封第一講書人閱讀 164,911評(píng)論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)稿械。經(jīng)常有香客問我选泻，道長(zhǎng)，這世上最難降的妖魔是什么美莫？我笑而不...
開封第一講書人閱讀 58,737評(píng)論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任页眯，我火速辦了婚禮，結(jié)果婚禮上厢呵，老公的妹妹穿的比我還像新娘窝撵。我一直安慰自己，他們只是感情好襟铭，可當(dāng)我...
茶點(diǎn)故事閱讀 67,753評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布碌奉。她就那樣靜靜地躺著，像睡著了一般寒砖。火紅的嫁衣襯著肌膚如雪赐劣。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,598評(píng)論 1贊 305
城市分裂傳說
那天哩都，我揣著相機(jī)與錄音隆豹，去河邊找鬼。笑死茅逮，一個(gè)胖子當(dāng)著我的面吹牛璃赡，可吹牛的內(nèi)容都是我干的判哥。我是一名探鬼主播，決...
沈念sama閱讀 40,338評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼碉考，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼塌计！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起侯谁，我...
開封第一講書人閱讀 39,249評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤锌仅，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后墙贱，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體热芹，經(jīng)...
沈念sama閱讀 45,696評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,888評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年惨撇，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了伊脓。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,013評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡魁衙，死狀恐怖报腔，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情剖淀，我是刑警寧澤纯蛾，帶...
沈念sama閱讀 35,731評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站纵隔，受9級(jí)特大地震影響翻诉，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜捌刮，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,348評(píng)論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一碰煌、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧糊啡，春花似錦拄查、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,929評(píng)論 0贊 22
一樁弒父案堕扶，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至梭依，卻和暖如春稍算，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背役拴。一陣腳步聲響...
開封第一講書人閱讀 33,048評(píng)論 1贊 270
情欲美人皮
我被黑心中介騙來泰國(guó)打工糊探，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,203評(píng)論 3贊 370
代替公主和親
正文我出身青樓科平，卻偏偏與公主長(zhǎng)得像褥紫，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子瞪慧，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,960評(píng)論 2贊 355

CSS

一. 地址

1. 相對(duì)地址

2. 絕對(duì)地址

二. CSS盒子模型

三. 列表 標(biāo)簽

1. 無序列表

2. 有序列表

四. HTML表單

五. 表格元素及相關(guān)樣式

六. CSS屬性進(jìn)階

1.文本常用樣式屬性進(jìn)階：

2. display屬性

3. CSS元素溢出

七. 定位

1. 文檔流概念( 了解 )

2. 定位分類:

1. 相對(duì)定位:

2. 絕對(duì)定位:

3. 固定定位

3. 元素層級(jí)

4 . 練習(xí): 用固定定位創(chuàng)建彈窗

八. 頁面嵌套

九. 元素居中顯示技巧

1. 居中顯示:

十. CSS權(quán)重值計(jì)算 ( 簡(jiǎn)單了解 )

1.權(quán)重了解

十一. Photoshop

1. photoshop的使用:

1) 什么是 photoshop ?

2) 我們這里使用 PS 來輔助測(cè)量和取色

三. 列表標(biāo)簽