整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
Lookup函數(shù)條件查詢。
在Excel表格中，利用和HLOOKUP實(shí)現(xiàn)指定條件。在指定區(qū)域橫方向查找，例如我們需要在好再來(lái)家居生活館員工表里，根據(jù)員工編號(hào)進(jìn)行查找姓名應(yīng)該怎么操作？首先我們看到這個(gè)列表表頭是橫橫向查找，這種情況就使用HLOOKUP函數(shù)。
·首先找到目標(biāo)單元格，在編輯欄中輸入等于HLOOKUP函數(shù)括號(hào)。
·第一個(gè)參數(shù)選擇查找對(duì)象，這里我們點(diǎn)擊編號(hào)A06013這個(gè)單元格。
·第二個(gè)參數(shù)查找區(qū)域，我們就框選查找區(qū)域。
·第三個(gè)參數(shù)行數(shù)姓名，在框選區(qū)域的第二行就輸入數(shù)字2。
·第四個(gè)參數(shù)匹配類型，我們可以直接選擇精確匹配也可輸入0，0代表精確匹配。輸入括號(hào)敲回車確定后即可完成。我調(diào)整編號(hào)姓名也可以自動(dòng)更新。
你學(xué)會(huì)了嗎？
天總結(jié)的是CSS3的學(xué)習(xí)內(nèi)容
CSS3是CSS技術(shù)的升級(jí)版本，CSS即層疊樣式表(Cascading StyleSheet)。CSS3語(yǔ)言是朝著模塊化發(fā)展的，把它分解成小的模塊，并且加入 更多新的模塊進(jìn)來(lái)：
盒子模型
文字特效
邊框圓角
動(dòng)畫(huà)
多列布局
用戶界面
旋轉(zhuǎn)
漸變
...CSS選擇器：使用CSS對(duì)html頁(yè)面中的元素實(shí)現(xiàn)一對(duì)一，一對(duì)多或者多對(duì)一的控制：
選擇器
{
樣式
}1.屬性選擇器
在CSS3中追加了三個(gè)選擇器:[att*=val];[att^=val];[att$=val]–>att表示為屬性，val表示為屬性的屬性值。
[att*=val]:如果元素用att表示的屬性的值中包含val指定的字符，那么該元素使用這個(gè)樣式。
[att$=val]:如果元素用att表示的屬性的屬性值的結(jié)尾字符用val指定的字符，那么該元素使用這個(gè)樣式。
[att^=val]:如果元素用att表示的屬性的屬性值的開(kāi)頭字符為用val指定的字符，那么該元素使用這個(gè)樣式。
注意： /如果純用數(shù)字的時(shí)候該樣式不會(huì)顯示成功，需要用\連接與數(shù)字最近的符號(hào) 注意！只有’-‘的字符需要加’\’/
<head>
<meta charset="UTF-8">
<title>css3中的屬性選擇器</title>
<style>
/*1.[att*=val] 此時(shí)只有id=section1A的div會(huì)擁有該樣式*/
[id*=section1]{
background-color: blueviolet;
}
/*2.[att^=val] 此時(shí)只有id=footer的div會(huì)擁有該樣式*/
[id^=f]{
background-color: blue;
}
/*3.[att$=val] 此時(shí)只有id=sectionB的div會(huì)擁有該樣式*/
[id$=B]{
background-color: chartreuse;
}
/*注意！*/
[id$=\-1]{
background-color: crimson;
}
</style>
</head>
<body>
<h1>CSS3中的屬性選擇器</h1>
<div id="section1A">section1A</div>
<div id="sectionB">sectionB</div>
<div id="section2-1">section2-1</div>
<div id="footer">footer</div>
</body>2.結(jié)構(gòu)性偽類選擇器
(1)類選擇器
使用類選擇器把相同的元素定義成不同的樣式，偽類選擇器是已經(jīng)定義好的不可以隨便起名。
p.right{
color:red;
}
p.left{
colot:blue;
}(2)偽類選擇器—-最常見(jiàn)的偽類選擇器：a（使用順序?yàn)椋何矗眩瑧遥＃?/p>
a:link{
color: #ff6600;
}
a:visited{
color: blueviolet;
}
a:hover{
color: aqua;
}
/*鼠標(biāo)點(diǎn)擊時(shí)*/
a:active{
color: darkblue;
}(3)偽元素選擇器
針對(duì)于CSS中已經(jīng)定義好的偽元素使用的選擇器(first-line;first-letter;before;after)。
選擇器:偽元素{
屬性:值;
}
選擇器.類名:偽元素{
屬性:值;
}我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取
first-line偽元素選擇器：向某個(gè)元素中的第一行文字使用樣式。
first-letter偽類選擇器：向某個(gè)元素中的文字的首字母或者第一個(gè)文字使用樣式。
before：在某個(gè)元素之前插入一些內(nèi)容。
after：在某個(gè)元素之后插入一些內(nèi)容。
可以使用before和after偽元素在頁(yè)面中插入文字，圖像，項(xiàng)目編號(hào)等。
插入文字：E:before/after
排除一些不需要插入內(nèi)容的元素：E:none：before/after
插入圖像
插入項(xiàng)目編號(hào)
a.在多個(gè)標(biāo)題前加上編號(hào)：counter屬性對(duì)項(xiàng)目追加編號(hào)
元素:before{
content:counter(計(jì)數(shù)器);
}
元素{
counter-increment:content屬性值中所指定的計(jì)數(shù)器名稱；
} b.對(duì)編號(hào)中添加文字
c.指定編號(hào)的樣式
d.指定編號(hào)的種類：list-style-type
e.編號(hào)嵌套，重置編號(hào)
要對(duì)哪一個(gè)元素進(jìn)行重置，那么就在該元素的父元素上進(jìn)行設(shè)置reset。
f.中編號(hào)中嵌入大編號(hào) h2:before{
content:counter(大編號(hào)計(jì)數(shù)器)'-'conter(中編號(hào)計(jì)數(shù)器); g.在字符串兩邊嵌套文字符號(hào):open-quoter&close-quoter<head>
<meta charset="UTF-8">
<title>偽元素選擇器</title>
<style>
p:first-line{
color: blueviolet;
}
p:first-letter{
color: aqua;
}
li:before{
content: "~~~";
color: #000;
}
li:after{
content: "~~~";
color: darkred;
}
</style>
</head>
<body>
<h1>CSS中主要有四個(gè)偽類選擇器</h1>
<p>
CSS中主要有四個(gè)偽類選擇器<br />
first-line偽元素選擇器：向某個(gè)元素中的第一行文字使用樣式
</p>
<p>
first-letter偽類選擇器：向某個(gè)元素中的文字的首字母或者第一個(gè)文字使用樣式
</p>
<h4>befor&after</h4>
<ul>
<li><a href="first.html">balabala</a></li>
</ul>
</body>(4)結(jié)構(gòu)性偽類選擇器
<head>
<style>
/*empty選擇器*/
:empty{
background-color: darkviolet;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td></td>
</tr>
</table>
</body><head>
<style>
/*target選擇器*/
:target{
background-color: blanchedalmond;
color: brown;
}
</style>
</head>
<body>
<h2>target選擇器</h2>
<a href="#A">A</a>
<a href="#B">B</a>
<div id="A">
<h2>A標(biāo)題</h2>
<p>內(nèi)容</p>
</div>
<div id="B">
<h2>B標(biāo)題</h2>
<p>內(nèi)容</p>
</div>
</body>first-child：?jiǎn)为?dú)指定第一個(gè)子元素的樣式。
last-child：?jiǎn)为?dú)指定最后一個(gè)子元素的樣式。
nth-child：選擇器匹配正數(shù)下來(lái)的第N個(gè)子元素，nth-child(odd)為第奇數(shù)個(gè)子元素，nth-child(even)為第偶數(shù)個(gè)子元素。
nth-last-child(n)：匹配倒數(shù)數(shù)下來(lái)第n個(gè)子元素。
nth-of-type：正數(shù)，當(dāng)指定元素為標(biāo)題加內(nèi)容的時(shí)候，如果使用上面的方法會(huì)導(dǎo)致真正的指定元素不被成功指定，因此需要使用nth-first-type方法進(jìn)行指定。
nth-last-type：倒數(shù)，同nth-first-type。
循環(huán)使用樣式：nth-child(An+B)–A 表示每次循環(huán)中共包括幾種樣式，B表示指定的樣式在循環(huán)中所處的位置。
only-child：只對(duì)一個(gè)元素起作用。
<head>
<meta charset="UTF-8">
<title>結(jié)構(gòu)性偽類選擇器</title>
<style>
/* 選擇器first-child；last-child；nth-child;nth-last-child*/
li:first-child{
background-color: darkviolet;
}
li:last-child{
background-color: chartreuse;
}
li:nth-child(3){
background-color: cadetblue;
}
li:nth-child(odd){
background-color: aquamarine;
}
li:nth-child(even){
background-color: cornflowerblue;
}
li:nth-last-child(3){
background-color: darkgrey;
}
/*循環(huán)*/
li:nth-child(4n+1){
background-color: aquamarine;
}
li:nth-child(4n+2){
background-color: indianred;
}
/*唯一的*/
li:only-child{
background-color: hotpink;
}
/*存在的問(wèn)題*/
h2:nth-child(2){
background-color: darkgoldenrod;
}
h2:nth-child(odd){
background-color: darkgoldenrod;
}
h2:nth-child(even){
background-color: darkgoldenrod;
}
h2:nth-of-type(odd){
background-color: chartreuse;
}
h2:nth-of-type(even){
background-color: aquamarine;
}
</style>
</head>
<body>
<h1>選擇器first-child；last-child；nth-child;nth-last-child</h1>
<ul>
<li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li>
<li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li>
<li>No.9</li><li>No.10</li>
<li>No.11</li><li>No.12</li>
</ul>
<h1>唯一的</h1>
<ul>
<li>唯一,多加一個(gè)就沒(méi)有啦</li>
</ul>
<div id="A">
<h2>A標(biāo)題</h2><p>內(nèi)容</p>
<h2>B標(biāo)題</h2><p>內(nèi)容</p>
</div>
</body>3.UI元素狀態(tài)偽類選擇器
指定的樣式只有在元素處于某種狀態(tài)下才起作用，在默認(rèn)狀態(tài)下不起作用！
選擇器:偽元素{
屬性:值;
}
選擇器.類名:偽元素{
屬性:值;
}first-line偽元素選擇器：向某個(gè)元素中的第一行文字使用樣式。
first-letter偽類選擇器：向某個(gè)元素中的文字的首字母或者第一個(gè)文字使用樣式。
before：在某個(gè)元素之前插入一些內(nèi)容。
after：在某個(gè)元素之后插入一些內(nèi)容。
可以使用before和after偽元素在頁(yè)面中插入文字，圖像，項(xiàng)目編號(hào)等。
插入文字：E:before/after
排除一些不需要插入內(nèi)容的元素：E:none：before/after
插入圖像
插入項(xiàng)目編號(hào)
a.在多個(gè)標(biāo)題前加上編號(hào)：counter屬性對(duì)項(xiàng)目追加編號(hào)
元素:before{
content:counter(計(jì)數(shù)器);
}
元素{
counter-increment:content屬性值中所指定的計(jì)數(shù)器名稱；
} b.對(duì)編號(hào)中添加文字
c.指定編號(hào)的樣式
d.指定編號(hào)的種類：list-style-type
e.編號(hào)嵌套，重置編號(hào)
要對(duì)哪一個(gè)元素進(jìn)行重置，那么就在該元素的父元素上進(jìn)行設(shè)置reset。
f.中編號(hào)中嵌入大編號(hào) h2:before{
content:counter(大編號(hào)計(jì)數(shù)器)'-'conter(中編號(hào)計(jì)數(shù)器); g.在字符串兩邊嵌套文字符號(hào):open-quoter&close-quoter <head>
<meta charset="UTF-8">
<title>偽元素選擇器</title>
<style>
p:first-line{
color: blueviolet;
}
p:first-letter{
color: aqua;
}
li:before{
content: "~~~";
color: #000;
}
li:after{
content: "~~~";
color: darkred;
}
</style>
</head>
<body>
<h1>CSS中主要有四個(gè)偽類選擇器</h1>
<p>
CSS中主要有四個(gè)偽類選擇器<br />
first-line偽元素選擇器：向某個(gè)元素中的第一行文字使用樣式
</p>
<p>
first-letter偽類選擇器：向某個(gè)元素中的文字的首字母或者第一個(gè)文字使用樣式
</p>
<h4>befor&after</h4>
<ul>
<li><a href="first.html">balabala</a></li>
</ul>
</body>(4)結(jié)構(gòu)性偽類選擇器
<head>
<style>
/*empty選擇器*/
:empty{
background-color: darkviolet;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td></td>
</tr>
</table>
</body><head>
<style>
/*target選擇器*/
:target{
background-color: blanchedalmond;
color: brown;
}
</style>
</head>
<body>
<h2>target選擇器</h2>
<a href="#A">A</a>
<a href="#B">B</a>
<div id="A">
<h2>A標(biāo)題</h2>
<p>內(nèi)容</p>
</div>
<div id="B">
<h2>B標(biāo)題</h2>
<p>內(nèi)容</p>
</div>
</body>first-child：?jiǎn)为?dú)指定第一個(gè)子元素的樣式。
last-child：?jiǎn)为?dú)指定最后一個(gè)子元素的樣式。
nth-child：選擇器匹配正數(shù)下來(lái)的第N個(gè)子元素，nth-child(odd)為第奇數(shù)個(gè)子元素，nth-child(even)為第偶數(shù)個(gè)子元素。
nth-last-child(n)：匹配倒數(shù)數(shù)下來(lái)第n個(gè)子元素。
nth-of-type：正數(shù)，當(dāng)指定元素為標(biāo)題加內(nèi)容的時(shí)候，如果使用上面的方法會(huì)導(dǎo)致真正的指定元素不被成功指定，因此需要使用nth-first-type方法進(jìn)行指定。
nth-last-type：倒數(shù)，同nth-first-type。
循環(huán)使用樣式：nth-child(An+B)–A 表示每次循環(huán)中共包括幾種樣式，B表示指定的樣式在循環(huán)中所處的位置。
only-child：只對(duì)一個(gè)元素起作用。
<head>
<meta charset="UTF-8">
<title>結(jié)構(gòu)性偽類選擇器</title>
<style>
/* 選擇器first-child；last-child；nth-child;nth-last-child*/
li:first-child{
background-color: darkviolet;
}
li:last-child{
background-color: chartreuse;
}
li:nth-child(3){
background-color: cadetblue;
}
li:nth-child(odd){
background-color: aquamarine;
}
li:nth-child(even){
background-color: cornflowerblue;
}
li:nth-last-child(3){
background-color: darkgrey;
}
/*循環(huán)*/
li:nth-child(4n+1){
background-color: aquamarine;
}
li:nth-child(4n+2){
background-color: indianred;
}
/*唯一的*/
li:only-child{
background-color: hotpink;
}
/*存在的問(wèn)題*/
h2:nth-child(2){
background-color: darkgoldenrod;
}
h2:nth-child(odd){
background-color: darkgoldenrod;
}
h2:nth-child(even){
background-color: darkgoldenrod;
}
h2:nth-of-type(odd){
background-color: chartreuse;
}
h2:nth-of-type(even){
background-color: aquamarine;
}
</style>
</head>
<body>
<h1>選擇器first-child；last-child；nth-child;nth-last-child</h1>
<ul>
<li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li>
<li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li>
<li>No.9</li><li>No.10</li>
<li>No.11</li><li>No.12</li>
</ul>
<h1>唯一的</h1>
<ul>
<li>唯一,多加一個(gè)就沒(méi)有啦</li>
</ul>
<div id="A">
<h2>A標(biāo)題</h2><p>內(nèi)容</p>
<h2>B標(biāo)題</h2><p>內(nèi)容</p>
</div>
</body>3.UI元素狀態(tài)偽類選擇器
指定的樣式只有在元素處于某種狀態(tài)下才起作用，在默認(rèn)狀態(tài)下不起作用！
4.兄弟元素選擇器
用來(lái)指定位于同一父元素之中的某個(gè)元素之后的所有其他某個(gè)種類的兄弟元素所使用的樣式。一定要是之后的兄弟元素！
<子元素>~<子元素之后的同級(jí)兄弟元素>
{
樣式
}1.text-shadowp{
text-shadow：length(陰影離開(kāi)文字的橫方向距離) length(陰影離開(kāi)文字的縱方向距離) length(陰影模糊半徑) color(陰影顏色)
}位移距離：前兩個(gè)參數(shù)代表的陰影離開(kāi)文字的橫(縱)方向距離，不可省略。
第三個(gè)參數(shù)代表模糊半徑，代表陰影向外模糊時(shí)候的范圍，數(shù)值越大越模糊。
當(dāng)沒(méi)有指定顏色值時(shí)，會(huì)使用默認(rèn)文字的顏色。
指定多個(gè)陰影，并且可以針對(duì)每個(gè)陰影用逗號(hào)分隔。
2.word-break：瀏覽器文本自動(dòng)換行。
3.word-wrap： 長(zhǎng)單詞與URL地址自動(dòng)換行。
4.服務(wù)器端字體和@font-face屬性
定義斜體或粗體：在定義字體的時(shí)候，可以把字體定義成斜體或者粗體，在使用服務(wù)器服務(wù)器端字體的時(shí)候，需要根據(jù)斜體還是粗體使用不同的漢字。
顯示客戶端字體：首先將font-family設(shè)置為本地的字體名，然后將src屬性設(shè)置為local(‘字體’)。
font-variant：設(shè)置文本是否大小寫(xiě)。
font-weight：設(shè)置文本的粗細(xì)。
font-stretch：設(shè)置文本是否橫向的拉伸變形。
2.3.盒模型
1.各種盒模型
inline-block類型
使用inline-block類型來(lái)執(zhí)行分列顯示
<head>
<style>
div.div1{
background-color: #ff6600;
width: 300px;
height: 150px;
float: left;
}
div.div2{
background-color: #21fffc;
width: 200px;
height: 100px;
float: left;
}
div.div3{
background-color: #ef23ff;
width: 500px;
height: 100px;
clear: both;
}
/*inline-block*/
div.div4{
background-color: #ff6600;
display: inline-block;
width: 300px;
}
div.div5{
background-color: #21fffc;
vertical-align: top;
display: inline-block;
width: 200px;
}
div.div6{
background-color: #ef23ff;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<h1>使用inline-block類型來(lái)執(zhí)行分列顯示-1.傳統(tǒng)方式</h1>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<hr color="darkred">
<h1>使用inline-block類型來(lái)執(zhí)行分列顯示-1.inline-block方式</h1>
<div class="div4">
div1div1div1div1div1div1div1
div1div1div1div1div1div1div1div1
div1div1div1div1div1div1div1div1
</div><div class="div5">
div2div2div2div2div2div2div2
div2div2div2div2div2div2div2div2
</div>
<div class="div6">
div3
</div>
</body>使用inline-block類型來(lái)顯示水平菜單<head>
<style>
ul.ul1 li{
float: left;
list-style: none;
padding:5px 20px;
text-align: center;
border-right: 1px solid darkviolet;
width: 200px;
color: wheat;
background-color: mediumvioletred;
}
ul.ul2 li{
list-style: none;
display: inline-block;
padding:5px 20px;
text-align: center;
border-right: 1px solid darkviolet;
width: 200px;
color: wheat;
background-color: mediumvioletred;
}
</style>
</head>
<body>
<h1>使用inline-block類型來(lái)顯示水平菜單-inline-block</h1>
<ul class="ul2">
<li>A</li><li>B</li><li>C</li><li>D</li>
</ul>
</body>
使用inline-block類型來(lái)顯示水平菜單<head>
<style>
ul.ul1 li{
float: left;
list-style: none;
padding:5px 20px;
text-align: center;
border-right: 1px solid darkviolet;
width: 200px;
color: wheat;
background-color: mediumvioletred;
}
ul.ul2 li{
list-style: none;
display: inline-block;
padding:5px 20px;
text-align: center;
border-right: 1px solid darkviolet;
width: 200px;
color: wheat;
background-color: mediumvioletred;
}
</style>
</head>
<body>
<h1>使用inline-block類型來(lái)顯示水平菜單-inline-block</h1>
<ul class="ul2">
<li>A</li><li>B</li><li>C</li><li>D</li>
</ul>
</body>
<head>
<style>
table{
display: inline-table;
vertical-align: bottom;
border: 2px solid blueviolet;
width: 400px;
height: 200px;
color: darkviolet;
}
td{
border: 2px solid violet;
}
</style>
</head>
<body>
<h1>使用inline-table類型-一個(gè)表格前后都有文字將其環(huán)繞</h1>
巴拉巴拉
<table cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
巴拉巴拉
</body>list-item類型
可以將多個(gè)元素作為列表顯示，同時(shí)在元素的開(kāi)頭加上列表的標(biāo)記。
run-in類型和compact類型
none類型
當(dāng)元素被指定none后，該元素不會(huì)顯示
2.顯示不下的內(nèi)容
overflow屬性：指定對(duì)盒子中容納不下的內(nèi)容的顯示辦法
overflow-x屬性與overflow-y屬性
textoverflow：在盒子的末尾顯示代表省略符號(hào)的‘…’，但是該屬性只在內(nèi)容在水平位置上超出時(shí)顯示。
3.盒子陰影
box-shadow:讓盒在顯示的時(shí)候產(chǎn)生陰影的效果
對(duì)盒內(nèi)子元素設(shè)置陰影
對(duì)一個(gè)文字或第一行設(shè)置陰影：通過(guò)first-line或者first-letter
對(duì)表格和對(duì)單元格使用陰影
4.box-sizing寬高計(jì)算
指定針對(duì)元素的寬度和高度的計(jì)算方法
(content)border-box:屬性值表示元素的寬高度(不)包括內(nèi)補(bǔ)白區(qū)域及邊框的寬度高度<head>
<style>
div.a,div.b{
width: 300px;
padding: 30px;
margin: 20px auto;
border: 30px solid darkviolet;
background-color: violet;
}
div.a{
box-sizing: border-box;
}
div.b{
box-sizing: content-box;
}
</style>
</head>
<body>
<h2>box-sizing：content&border-box</h2>
<div class="ab">
<div class="a">
box-sizing：border-box代表寬度和高度包含內(nèi)補(bǔ)白寬度高度，即雖然有padding和border，最終仍然為300px
</div>
<div class="b">
box-sizing：content-box:代表不包含寬高度內(nèi)補(bǔ)白區(qū)域，即最后為300px+30px+30px
</div>
</div>
</body>2.4.邊框和背景樣式
1.新增的背景屬性
background-clip:指定背景的顯示范圍
border-box：從邊框開(kāi)始
padding-box：從內(nèi)邊框開(kāi)始
content-box：從內(nèi)容開(kāi)始
background-orgin:指定繪制背景圖像的起點(diǎn)
可以指定繪制時(shí)的起始位置，默認(rèn)為padding，可以為border或者content左上角開(kāi)始繪制。
background-size:指定背景中圖像的尺寸
auto
length
percentage：以父元素的百分比設(shè)置背景圖像的寬高度。
cover：全覆蓋。
contain ：與cover相反，主要將背景圖片縮小，來(lái)適合布滿整個(gè)容器。
2.顯示多個(gè)背景屬性： 第一個(gè)圖像在最上面
3.圓角邊框：border-radius
指定兩個(gè)半徑：左上右下+左下右上
當(dāng)不顯示邊框的時(shí)候，瀏覽器會(huì)把四個(gè)角繪制成圓角
修改邊框種類。
繪制四個(gè)不同半徑的邊框
4.圖像邊框：border-image
可以讓元素的長(zhǎng)度或?qū)挾忍幱陔S時(shí)變化時(shí)，變化狀態(tài)的邊框統(tǒng)一使用一個(gè)圖像文件來(lái)進(jìn)行繪制。
2.5.CSS3變形功能
1.利用transform實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)，縮放，傾斜移動(dòng)這四種類型的變形處理。
旋轉(zhuǎn)：totate(角度)
縮放：scale(值):0.5即為縮放到50%
傾斜:skew(值),值為角度
移動(dòng)：translate(值)
對(duì)一個(gè)元素使用多個(gè)方法
transform：方法1 方法2 方法 3 方法4
改變?cè)鼗c(diǎn)
transform-origin:
2.6.CSS3的動(dòng)功能
1.transition功能：支持從一個(gè)屬性值平滑到另外一個(gè)屬性值
允許CSS屬性值在一定的時(shí)間內(nèi)平滑的過(guò)度，這種效果可以在單擊，獲得焦點(diǎn)，被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑的以動(dòng)畫(huà)效果改變CSS屬性值。
(1)執(zhí)行變換的屬性：transition-property：過(guò)渡即將開(kāi)始
none：沒(méi)有屬性會(huì)獲得過(guò)渡效果
all:所以屬性會(huì)獲得過(guò)渡效果
property：定義應(yīng)用過(guò)渡效果的CSS屬性名稱列表，以逗號(hào)分隔
(2)變換延續(xù)時(shí)間：transition-duration：規(guī)定完成過(guò)渡需要花費(fèi)的時(shí)間，默認(rèn)值零沒(méi)有效果。
(3)在延續(xù)時(shí)間段，變換速率的變化：transition-timing-function。
(4)變換延遲時(shí)間：transition-delay：指定一個(gè)動(dòng)畫(huà)開(kāi)始執(zhí)行的時(shí)間，也就是當(dāng)改變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)間開(kāi)始執(zhí)行過(guò)渡效果。
<head>
<meta charset="UTF-8">
<title>CSS3中的動(dòng)畫(huà)效果</title>
<style>
div.transition1{
width: 200px;
height: 200px;
background-color: blueviolet;
-webkit-transition:all 1s linear 1s;
}
</style>
</head>
<body>
<h2>transition</h2>
<div class="transition1"></div>
</body>2.Animations功能：支持通過(guò)關(guān)鍵幀的指定來(lái)在頁(yè)面上產(chǎn)生更復(fù)雜的動(dòng)畫(huà)現(xiàn)象。
<head>
<style>
div.animation{
width: 20px;
height: 20px;
background-color: #ef23ff;
}
/*關(guān)鍵幀的封裝*/
@-webkit-keyframes myan{
0%{
background-color: violet;
width: 50px;
}
10%{
background-color: palevioletred;
width: 100px;
}
30%{
background-color: mediumvioletred;
width: 200px;
}
50%{
background-color: blueviolet;
width: 40px;
}
70%{
background-color: darkviolet;
width: 400px;
}
90%{
background-color: #7300a4;
width: 600px;
}
100%{
background-color: #4a0068;
width: 800px;
}
}
</style>
</head>
<body>
<h2>animation</h2>
<div class="animation"></div>
</body>2.7.CSS3的分頁(yè)
1.點(diǎn)擊及鼠標(biāo)懸停分頁(yè)樣式
2.鼠標(biāo)懸停過(guò)渡效果：transition: background-color .9s;
3.圓角樣式：border-radius
4.邊框：border:2px solid darkviolet;
2.8.布局相關(guān)樣式
1.多欄布局
column-count屬性：將一個(gè)元素中的內(nèi)容分成多欄進(jìn)行顯示，要將元素的寬度設(shè)置成多個(gè)欄目的總寬度
column-width屬性：指定欄目的寬度來(lái)生成分欄
column-gap屬性：指定欄目之間的距離
column-rule:欄目之間添加分隔線
2.盒布局： 多欄布局的欄目寬度必須相等，指定欄目的寬度的時(shí)候也只能統(tǒng)一指定，但是欄目的寬度不可能全部都一樣，所以多欄布局比較適合在文字內(nèi)容頁(yè)面顯示，比如新聞。并不適合整個(gè)網(wǎng)頁(yè)編排時(shí)使用。而盒布局就相對(duì)比較隨意一些，可以定義成不同的頁(yè)面。
3.彈性盒子布局
(1)box-flex：使得盒子布局變成彈性布局：可以自適應(yīng)窗口
(2)box-ordinal-group：改變?cè)氐娘@示順序
(3)box-orient：改變?cè)嘏帕蟹较?/p>
horizontal:在水平行中從左向右排列子元素
vertical：從上向下垂直排列子元素
<style>
div.all{
display: -webkit-box;
/*-webkit-box-orient: vertical;窗口垂直現(xiàn)實(shí)與水平顯示*/
}
.left{
width: 300px;
background-color: #ef23ff;
-webkit-box-ordinal-group:3;
}
.right{
width: 300px;
background-color: #ef23ff;
-webkit-box-ordinal-group: 2;
}
.center{
-webkit-box-flex:1;
background-color: #962fff;
-webkit-box-ordinal-group: 1;
}
</style>
(4)元素的高度寬度自適應(yīng)：就是元素的高度和寬度可以根據(jù)排列的方向改變而改變。
(5)使用彈性布局來(lái)消除空白：方法就是給子div中加入一個(gè)box-flex屬性。
<style>
.center1{
display: -webkit-box;/*盒模型顯示*/
border: 5px solid darkviolet;
-webkit-box-orient: horizontal;/*水平顯示*/
width: 600px;
height: 400px;
}
.d1{
background-color: #ff99e1;
-webkit-box-flex: 2;
}
.d2{
background-color: #962fff;
-webkit-box-flex: 3;
}
.d3{
background-color: #ef23ff;
-webkit-box-flex: 4;
}
.d1,.d2,.d3{
-webkit-box-sizing: border-box;
}
</style>(6)對(duì)多個(gè)元素使用box-flex屬性，讓瀏覽器或者容器中的元素的總寬度或者總高度都等于瀏覽器或者容器高度。
(7)box-pack屬性和box-align屬性：指定水平方向與垂直方向的對(duì)齊方式(文字，圖像，以及子元素的水平方向或是垂直方向上的對(duì)齊方式)
2.9.不同瀏覽器加載不同的CSS樣式
Media Queries模塊是CSS3中的一個(gè)和各種媒體相關(guān)的重要模塊
原文鏈接：https://blog.csdn.net/qq_27348951/article/details/53378364
接上代碼，其實(shí)我們只需要按照需求按照尺寸去調(diào)就好！
@media (max-width: 75em) {
html {
font-size: 56.25%;
}
.grid {
column-gap: 4.8rem;
row-gap: 6.4rem;
}
.heading-secondary {
font-size: 3.6rem;
}
.header {
padding: 0 3.2em;
}
.main-nav-list {
gap: 3.2rem;
}
.hero {
gap: 4.8rem
}
.container-testimonials {
padding: 9.6rem 3.2rem;
}
}我們通過(guò)瀏覽器的Devtools來(lái)查看，通過(guò)ipad觀看已經(jīng)非常不錯(cuò)了
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
