欧美free性护士vide0shd,老熟女,一区二区三区,久久久久夜夜夜精品国产,久久久久久综合网天天,欧美成人护士h版

首頁綜合正文

評(píng)論

柚子快報(bào)邀請(qǐng)碼778899分享：

Ozsale折扣出海站綜合2025-05-14460

柚子快報(bào)邀請(qǐng)碼778899分享：

http://yzkb.51969.com/

網(wǎng)頁概念

網(wǎng)頁是網(wǎng)站的一頁,網(wǎng)頁有很多元素組成,包括視頻圖片文字視頻鏈接等等,以.htm和.html后綴結(jié)尾,俗稱html文件

HTML 超文本標(biāo)記語言,描述網(wǎng)頁語言,不是編程語言,是標(biāo)記語言,有標(biāo)簽組成

超文本指的是不光文本,還有圖片視頻等等標(biāo)簽

常用瀏覽器

firefox google safari opera edge

瀏覽器內(nèi)核: 讀取網(wǎng)頁內(nèi)容, 渲染成網(wǎng)頁

Web標(biāo)準(zhǔn)

W3C 組織制定的標(biāo)準(zhǔn)

瀏覽器不同,頁面排版不同,有一套標(biāo)準(zhǔn)約束他,讓用戶看到的頁面一樣

Web標(biāo)準(zhǔn)有 : 結(jié)構(gòu)html 表現(xiàn)css 行為js , 三部分是分離的

HTML

Html語法規(guī)范

尖括號(hào)包含

雙標(biāo)簽和單標(biāo)簽

便簽關(guān)系 : 包含和并列

html基本結(jié)構(gòu)標(biāo)簽

標(biāo)簽名定義說明HTML標(biāo)簽根標(biāo)簽文檔頭部head標(biāo)簽必須設(shè)置標(biāo)簽title文檔標(biāo)題網(wǎng)頁標(biāo)題文檔主體元素內(nèi)容

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-TWRqaWka-1689863224128)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230703221041822.png)]

骨架標(biāo)簽代碼

Title

文檔類型聲明標(biāo)簽

文檔類型聲明,告訴瀏覽器用HTML5顯示網(wǎng)頁

文檔顯示語言=英語, 寫中文也可以 (瀏覽器會(huì)自動(dòng)處理)

編碼方式, UTF-8 萬國碼, 防止亂碼

HTML常用標(biāo)簽

標(biāo)簽含義, 能看懂即可, 記得標(biāo)簽是干什么的

標(biāo)題標(biāo)簽

我是一級(jí)標(biāo)簽

我是二級(jí)標(biāo)簽

我是三級(jí)標(biāo)簽

我是四級(jí)標(biāo)簽

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-wWyQOFGf-1689863224129)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230703224211647.png)]

分段和分行標(biāo)簽

Title

天空中烏云密布，時(shí)不時(shí)會(huì)冒出一道閃電，伴隨著一聲聲悶雷，一場大雨即將來臨。

臥虎城中，沈翔仰頭看著天空，喃喃說道：“不能再拖了，我要快點(diǎn)找到好的靈藥，否則我難以有翻身的機(jī)會(huì)?！?/p>

沈翔今年十六歲，有著比同齡人要健壯高大的身軀，這身軀和那張帶著稚氣的俊俏臉蛋有著鮮明對(duì)比，但他那雙與年齡不相稱的深邃眸子，看起來閑得要比同齡人成熟一些。

沈翔此時(shí)要去采藥，他雖然是沈家族長的孫子，但他卻因?yàn)闆]有靈脈，不能成為一個(gè)厲害的武者，因此，他從小就非常勤奮的鍛煉自己的身體，經(jīng)常外出去進(jìn)行各種秘密訓(xùn)練，甚至還和虎獸進(jìn)行過身上搏斗，他雖然年紀(jì)輕輕，但卻有過幾次生死經(jīng)歷，心境和意志都遠(yuǎn)勝同齡人。

“這不是沈翔嗎？就要下大雨了，你還要去鍛煉？”

一個(gè)老管家走過來說道，看見沈翔如此發(fā)奮，他不由得欽佩，但眼神中更多的是惋惜。

沈翔每天都勤學(xué)苦練，至今六年，但還是停留在凡武境三重，和他同齡的大多數(shù)沈家子弟都進(jìn)入了凡武境四重，厲害的更是進(jìn)入了五重。

這一切都是因?yàn)樗麤]有靈脈的緣故，所以才不被家族重視，而如今他只是沈家中一個(gè)很普通的人。

雖然沒有靈脈，但沈翔卻從來不氣餒，一直都在努力鍛煉自己，至少努力的過程讓他感覺自己很充實(shí)。

“老馬，我是去采藥?！鄙蛳枧艿嚼瞎芗疑砗?，嘻笑著扯住他那光頭上的一條鞭子。

“沒用的，你沒有靈脈，不管怎么努力都是無濟(jì)于事！”　那老管家搖頭嘆道。

對(duì)于這樣的話，沈翔聽過無數(shù)遍了，但他卻依然得堅(jiān)持，無論如何他都不會(huì)放棄。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ZPFFmvAE-1689863224130)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230703224746034.png)]

小項(xiàng)目小說

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-pJsIL6YB-1689863224130)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230703225033932.png)]

文本格式化標(biāo)簽

粗體斜體下劃線

突出性,比普通文字更重要

語義標(biāo)簽加粗傾斜刪除線下劃線

Title

全能穿越錦衣衛(wèi)

天空中烏云密布，

時(shí)不時(shí)會(huì)冒出一道閃電，

~~伴隨著一聲聲悶雷，~~

一場大雨即將來臨。

行內(nèi)塊元素垂直居中

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-jLcq87pw-1689863224184)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714154741411.png)]

值描述baseline默認(rèn), 元素在父元素基線上top頂端對(duì)齊middle居中對(duì)齊bottom與最低元素頂端對(duì)齊

沒加css默認(rèn)效果

恭喜發(fā)財(cái)

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ru9ssB1s-1689863224184)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714155217674.png)]

img {

vertical-align: middle;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-iKsngeGm-1689863224185)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714155247789.png)]

+++

文本域和圖片一樣

行內(nèi)塊元素垂直對(duì)齊

123

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Xr5QxbPn-1689863224185)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714155840142.png)]

溢出文字顯示省略號(hào)

單行文字

山有木兮木有枝，心悅君兮君不知。____佚名《越人歌》

人生若只如初見，何事秋風(fēng)悲畫扇。

.one {

width: 150px;

height: 300px;

background-color: pink;

margin: 100px auto;

/*下面三個(gè)條件*/

white-space: nowrap; /*單行顯示*/

overflow: hidden; /*溢出隱藏*/

text-overflow: ellipsis; /*顯示省略號(hào)*/

}

多行文字建議后臺(tái)做, 需要調(diào)節(jié)高度, 不然會(huì)漏出來下方內(nèi)容, 像下面這樣還要減少高度

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-H392aJ29-1689863224186)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714162554842.png)]

margin 負(fù)值運(yùn)用

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-w7st2GKv-1689863224186)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714163238443.png)]

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Vofy0ENP-1689863224186)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714163619673.png)]

ul li {

width: 200px;

height: 300px;

background-color: pink;

list-style: none;

float: left;

border: 1px solid;

margin-left: -1px;

}

改造: 鼠標(biāo)經(jīng)過,邊框變色

ul li:hover {

border: 1px solid gray;

margin-left: -1px;

}

文字環(huán)繞盒子

【集錦】熱身賽-巴西0-1秘魯內(nèi)馬爾替補(bǔ)

兩人血染塞場

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-g6d797VY-1689863224187)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714165403683.png)]

行內(nèi)塊元素的巧妙運(yùn)用

底部頁面欄

Title

到第頁

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Zx42LqFp-1689863224187)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714172139887.png)]

CSS 初始化

京東css初始化

/* 把我們所有標(biāo)簽的內(nèi)外邊距清零 */

* {

margin: 0;

padding: 0

}

/* em 和 i 斜體的文字不傾斜 */

em,

i {

font-style: normal

}

/* 去掉li 的小圓點(diǎn) */

li {

list-style: none

}

img {

/* border 0 照顧低版本瀏覽器如果圖片外面包含了鏈接會(huì)有邊框的問題 */

border: 0;

/* 取消圖片底側(cè)有空白縫隙的問題 */

vertical-align: middle

}

button {

/* 當(dāng)我們鼠標(biāo)經(jīng)過button 按鈕的時(shí)候，鼠標(biāo)變成小手 */

cursor: pointer

}

a {

color: #666;

text-decoration: none

}

a:hover {

color: #c81623

}

button,

input {

/* "\5B8B\4F53" 就是宋體的意思這樣瀏覽器兼容性比較好 */

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif

}

body {

/* CSS3 抗鋸齒形讓文字顯示的更加清晰 */

-webkit-font-smoothing: antialiased;

background-color: #fff;

font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

color: #666

}

.hide,

.none {

display: none

}

/* 清除浮動(dòng) */

.clearfix:after {

visibility: hidden;

clear: both;

display: block;

content: ".";

height: 0

}

.clearfix {

*zoom: 1

}

HTML 新特性

視頻標(biāo)簽

屬性值描述autoplayautoplay視頻就緒自動(dòng)播放controlscontrols向用戶顯示播放控件widthpixels(像素)設(shè)置播放器寬度heightpixels(像素)設(shè)置播放器高度looploop播放完是否繼續(xù)播放該視頻，循環(huán)播放preloadauto(預(yù)先加載視頻】none(不應(yīng)加載視頻】規(guī)定是否預(yù)加載視頻（如果有了autoplay就忽略srcurl視頻ur地址posterImgurl加載等待的畫面圖片mutedmuted靜音播放

video { width: 100%; }

音頻 ### 新增input表單

input 更多標(biāo)簽類型

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-cBVhi8gL-1689863224188)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714220447196.png)]

+++

HTML新增表單屬性

屬性值說明requiredrequired表單擁有屬性表示內(nèi)容不為空, 必填placeholder提示文本表單的提示信息, 存在默認(rèn)值將不顯示autofocusautofocus自動(dòng)聚焦屬性, 頁面加載完自動(dòng)聚焦autocompleteoff / on用戶鍵入, 瀏覽器基于之前鍵入的值, 顯示字段中填寫默認(rèn)打開multiplemultiple可以多選文件提交

CSS3新特性

新建屬性選擇器

郵箱:

選擇上面代碼, 下面兩個(gè)都可

input[value] {

}

input[type=email] {

}

+++

一次選這四個(gè)標(biāo)簽

div[class^=icon] { //icon開頭 }

div[class$=icon] { //icon結(jié)尾 }

新增結(jié)構(gòu)偽類選擇器

我是1

我是2

我是3

我是4

我是5

ul li:first-child {

/*我是1*/

}

ul li:last-child {

/*我是5*/

}

ul li:nth-child(3) {

/*我是3*/

}

注意上面的 nth-child(n) 可以選擇偶數(shù)even和奇數(shù)odd, n可以是公式數(shù)字關(guān)鍵字

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-yxIOYA4I-1689863224188)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714224009125.png)]

+++

光頭

大哥

二哥

這樣的盒子用nth-child無能為力, 用 nth-of-type , 因?yàn)闃?biāo)簽類型不同

section div:nth-of-type(1) {

background-color: blue;

} /*大哥變藍(lán)*/

nth-child 和 nth-of-type 區(qū)別

結(jié)構(gòu)偽類選擇器用于選擇父級(jí)里面第幾個(gè)孩子nth-child對(duì)父元素里面的所有孩子排序選擇, 找到第n個(gè), 然后看看是否和標(biāo)簽匹配nth-of-type 對(duì)父元素里面制定子元素進(jìn)行排序選擇, 先匹配E , 然后根據(jù)E 找第n個(gè)孩子無序列表用 nth-child

偽元素選擇器

利用css創(chuàng)建新標(biāo)簽元素, 不需要html標(biāo)簽, 簡化Html結(jié)構(gòu)

選擇符簡介::before在元素內(nèi)部前面插入內(nèi)容::after在元素內(nèi)部后面插入內(nèi)容

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ZrJ8x9tf-1689863224189)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714230305009.png)]

Title

是

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-B2ZITj9o-1689863224189)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714230525291.png)]

偽標(biāo)簽土豆網(wǎng)

.tudou::before {

content: '';

display: none;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0,0,0,.4) url(images/arr.png) no-peat center;

}

.tudou::hover .mask{

display: block;

}

盒子模型

給一個(gè)盒子加margin和border, 盒子會(huì)變大

box-sizing: content-box 默認(rèn)盒子大小 = 寬度+高度+邊框

box-sizing: border-box

這樣padding不會(huì)撐開盒子

寫兩個(gè)div比較一下

.one {

width: 200px;

height: 300px;

background-color: pink;

margin: auto;

margin-bottom: 20px;

padding: 15px;

border: 20px solid red;

box-sizing: border-box;

}

.two {

width: 200px;

height: 300px;

background-color: pink;

margin: auto;

padding: 15px;

border: 20px solid red;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-DBJv9Nr2-1689863224190)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230717092458230.png)]

通用模板要加一句

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

+++

CSS3 過渡

誰做過渡給誰加 transition

div {

width: 300px;

height: 100px;

background-color: pink;

transition: width .5s;

}

div:hover {

width: 600px;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-dzgBPdzQ-1689863224190)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/123.gif)]

給所有屬性都做動(dòng)畫

直接改成 all即可

div {

width: 300px;

height: 100px;

background-color: pink;

transition: all .5s;

}

div:hover {

width: 600px;

height: 500px;

background-color: deepskyblue;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-eY7eFVLB-1689863224191)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/%E5%8A%A8%E7%94%BB.gif)]

+++

進(jìn)度條練習(xí)

.one {

width: 300px;

height: 10px;

border: solid black 1px;

border-radius: 7px;

padding: 1px;

}

.two {

width: 50%;

height: 100%;

background-color: red;

border-radius: 7px;

transition: all .7s;

}

.two:hover {

width: 100%;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-AmLVdZKZ-1689863224191)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/456.gif)]

品優(yōu)購項(xiàng)目

TDK 三大標(biāo)簽 SEO 優(yōu)化

SEO [搜索引擎優(yōu)化] 一種利用搜索引擎規(guī)則提高網(wǎng)站有關(guān)搜索引擎自然排名方式

SEO 目的是對(duì)網(wǎng)站深度優(yōu)化, 幫助網(wǎng)站獲取免費(fèi)流量, 在搜索引擎提升網(wǎng)站的知名度

TDK title description keywords

網(wǎng)站名（產(chǎn)品名）-網(wǎng)站的介紹

content="品優(yōu)購商城-專業(yè)的綜合網(wǎng)上購物商城,銷售家電、數(shù)碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數(shù)萬個(gè)品牌優(yōu)質(zhì)商品.便捷、誠信的服務(wù)，為您提供愉悅的網(wǎng)上購物體驗(yàn)!" />

2D 轉(zhuǎn)換

位移 translate 旋轉(zhuǎn) rotate 縮放 scale

transform: translate(30px, 30px);

二維坐標(biāo)系

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-z1JjJpVl-1689863224191)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230718170456369.png)]

盒子移動(dòng)不會(huì)影響其他盒子

.a {

width: 500px;

height: 500px;

background-color: pink;

transform: translate(30px, 30px);

}

.b {

width: 500px;

height: 500px;

background-color: red;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-dajJ8PdE-1689863224192)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230718172239839.png)]

+++

2D & 定位實(shí)現(xiàn)垂直居中

2D 對(duì) 行內(nèi)元素?zé)o效

子絕父相 + transform

div {

position: relative;

width: 500px;

height: 500px;

background-color: pink;

}

p {

width: 200px;

height: 200px;

background-color: red;

left: 50%;

top: 50%;

position: absolute;

transform: translate(-50%, -50%);

}

旋轉(zhuǎn)

transform:rotate(45deg)

鼠標(biāo)經(jīng)過圖片, 轉(zhuǎn)一圈, 延時(shí)

div {

background: url("123.jpg");

width: 413px;

height: 376px;

transition: .7s;

}

div:hover {

transform: rotate(360deg);

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-d9J3Gwq3-1689863224192)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/888999.gif)]

三角形案例

不用圖標(biāo)自己實(shí)現(xiàn)三角效果

div {

position: relative;

width: 300px;

height: 50px;

border: 1px black solid;

}

div::after {

content: "";

position: absolute;

top: 3px;

right: 16px;

width: 30px;

height: 30px;

border-top: 1px black solid;

border-right: 1px black solid;

transform: rotate(133deg);

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Q0S7jUBr-1689863224193)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230718194650851.png)]

設(shè)置轉(zhuǎn)換中心點(diǎn)

transform-origin: left bottom; 左下角做轉(zhuǎn)軸

div {

background: url("123.jpg");

width: 413px;

height: 376px;

transition: all .7s;

margin: 200px 200px;

}

div:hover {

transform: rotate(360deg);

transform-origin: left bottom;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-MckunD5R-1689863224193)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/87875.gif)]

+++

案例鼠標(biāo)懸浮顯示內(nèi)容

Title

轉(zhuǎn)圈圈

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-75n0FuXa-1689863224194)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/88585.gif)]

+++

縮放

transform: scale(.5);

不影響其他盒子, 并且可以設(shè)置縮放中心點(diǎn)

div {

width: 413px;

height: 376px;

background: url("123.jpg") no-repeat;

transition: all .7s;

margin: 300px auto;

}

div:hover {

transform: scale(.5); /*縮小一半*/

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-VadhKBjr-1689863224194)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/56595.gif)]

+++

縮放圖片案例

Title

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-0dSdRcCo-1689863224194)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/9652641.gif)]

復(fù)合寫法

tranform: translate(50px, 50px) rotate(180deg)

注意順序, 先位移后旋轉(zhuǎn)

動(dòng)畫

先定義, 再調(diào)用

0% { transform: translateX(0); }

100% { transform: translateX(1000px) }

0 和 100 可以換成 from to

animation-name: move; /調(diào)用動(dòng)畫/ animation-duration: 5s; /持續(xù)時(shí)間/

Title

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-s5bzDaWX-1689863224195)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/54624151411.gif)]

設(shè)置多個(gè)狀態(tài)

百分比是對(duì)總時(shí)間的劃分

@keyframes move {

0% {

transform: translateX(0);

}

25% {

transform: translateX(1000px);

}

50% {

transform: translateX(1000px) translateY(1000px);

}

75% {

transform: translateY(1000px);

}

100% {

transform: translateX(0);

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-0Mv0ogL8-1689863224196)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/123785.gif)]

+++

動(dòng)畫常用屬性

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-5MLU6OxS-1689863224196)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230718221521188.png)]

animation-iteration-count: infinite; /無限循環(huán)/

黑塔就會(huì)一直動(dòng)

補(bǔ)充一個(gè)打字機(jī)效果

animation: w 4s steps(5) forwords

動(dòng)畫簡寫

上面的代碼簡寫成一行 => animation: move 5s infinite;

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-BIjAoHnd-1689863224196)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230718222047657.png)]

+++

3D 轉(zhuǎn)換

transform: translate3d(100px, 100px, 100px);

3D 坐標(biāo)系

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-avdcrWN3-1689863224197)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719083704505.png)]

透視 perspective

透視寫在被觀察元素父盒子上, 透視越小, 看到的圖像越大

div {

width: 500px;

height: 500px;

background-color: pink;

transform: translate3d(400px, 100px, 100px);

}

body {

perspective: 500px;

}

透視固定的情況下, 改變 z 軸, 呈現(xiàn)正比縮放

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-GjtfIOGn-1689863224197)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/454541.gif)]

+++

3D 旋轉(zhuǎn)

div {

width: 413px;

height: 376px;

background: url("123.jpg");

transition: all .9s;

}

div:hover {

transform: rotateY(180deg);

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Q9gaHtua-1689863224197)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/525234.gif)]

加透視 [增加立體感] 旋轉(zhuǎn)

body {

perspective: 500px;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-bis6lnrQ-1689863224198)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/525236.gif)]

3D 呈現(xiàn)

transform-style: preserve-3d;

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Document

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-v6TBpx6S-1689863224198)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/8574d.gif)]

+++

移動(dòng)端視口

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

視口寬度和設(shè)備保持致視口的默認(rèn)縮微比例1.0不允許用戶自行縮放最大允許的縮放比例1.0最小允許的縮放比例1.0

物理像素 & 物理像素比

屬性電腦手機(jī)物理像素1px = 1 物理像素不一定物理像素比1px/物理像素=物理像素比

二倍圖

我們準(zhǔn)備的圖片到手機(jī)端會(huì)變模糊, 這里需要準(zhǔn)備比原來頁面圖片大小2倍的圖,然后在頁面中css 把這個(gè)圖片縮小一半

背景縮放

div {

width: 300px;

height: 400px;

background: url("123.jpg") no-repeat;

background-color: pink;

margin: 100px auto;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-wx0JfEwb-1689863224199)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719112941874.png)]

+++

加一個(gè) cover: 把背景圖像擴(kuò)展到足夠大, 使背景圖像完全覆蓋背景區(qū)域

div {

width: 300px;

height: 400px;

background: url("123.jpg") no-repeat;

background-color: pink;

background-size: cover;

margin: 100px auto;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-CZZZdd5k-1689863224199)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719113026740.png)]

+++

加一個(gè) contain: 把背景圖像擴(kuò)展到最大尺寸, 使寬度和高度適應(yīng)內(nèi)容區(qū)域

div {

width: 300px;

height: 400px;

background: url("123.jpg") no-repeat;

background-color: pink;

background-size: contain;

margin: 100px auto;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-nyGT1iQM-1689863224199)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719113110476.png)]

+++

CSS 初始化

normalize.css/

+++

CSS3 盒子模型

box-sizeing: border-box;

內(nèi)邊距和邊框不會(huì)撐大盒子

移動(dòng)端可以全部CSS3盒子模型PC端如果完全需要兼容，我們就用傳統(tǒng)模式，如果不考慮兼容性，我們就選擇CSS3盒子模型

特殊樣式

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-dBoJ8hs5-1689863224200)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719115212287.png)]

移動(dòng)端布局

單獨(dú)制作移動(dòng)端頁面

流式布局

百分比布局, 非固定像素布局

通過盒子的寬度設(shè)置百分比根據(jù)屏幕寬度進(jìn)行伸縮, 不受固定像素的限制, 內(nèi)容向兩側(cè)填充

section {

margin: 0;

padding: 0;

width: 100%;

}

section div {

float: left;

width: 50%;

height: 400px;

}

section div:nth-child(1) {

background-color: pink;

}

section div:nth-child(2) {

background-color: purple;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Xhz1LwaD-1689863224200)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/85rggb.gif)]

加一個(gè)寬度限制

section {

margin: 0;

padding: 0;

width: 100%;

max-width: 980px;

min-width: 240px;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ijaeSh6P-1689863224201)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/fgerswgvrb.gif)]

+++

京東移動(dòng)端 - 流式布局

fuguangjian0/pink-JD: 黑馬pink 京東移動(dòng)端流式布局項(xiàng)目(百分比布局) (github.com)

flex布局

原理 => 通過給父盒子添加flex屬性, 控制子盒子位置和排列方式

PC端用傳統(tǒng)布局

移動(dòng)端使用flex彈性布局

設(shè)置主軸方向

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-CMXRRgsk-1689863224201)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719201826928.png)]

+++

主軸和側(cè)軸

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ZMOH6Xpu-1689863224201)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719201955631.png)]

+++

flex-direction設(shè)置主軸方向

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-84IWX0Ea-1689863224202)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719202352178.png)]

元素根據(jù)主軸來排列

div {

/*給父親添加flex元素*/

display: flex;

width: 800px;

height: 300px;

background-color: pink;

}

div span {

width: 150px;

height: 100px;

background-color: purple;

}

123

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-W1CytDVZ-1689863224202)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719202732791.png)]

+++

div {

/*給父親添加flex元素*/

display: flex;

width: 800px;

height: 300px;

background-color: pink;

flex-direction: column;/*設(shè)置y為主軸, x變側(cè)軸*/

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-MGAbGr30-1689863224203)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719203126370.png)]

主軸子元素排列方式

justify-content 定義對(duì)齊方式, 需要確定主軸

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Mc7Zero2-1689863224203)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719203415542.png)]

+++

演示一個(gè)重要的

justify-content: space-between;

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-tAdPLdb9-1689863224204)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719203740641.png)]

+++

子元素?fù)Q行

flex-wrap 默認(rèn)不換行, 彈性伸縮到一行

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-u7raZRNh-1689863224204)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719204215272.png)]

+++

側(cè)軸子元素排列方式單行

align-items 設(shè)置側(cè)軸子元素對(duì)齊方式

用于單行元素

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-DyteRnhX-1689863224205)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719204449158.png)]

+++

div {

/*給父親添加flex元素*/

display: flex;

width: 800px;

height: 300px;

background-color: pink;

justify-content: center;

align-items: center;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-BasuMhF7-1689863224205)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719204558303.png)]

側(cè)軸子元素排列方式多行

align-content

注意必須換行: flex-wrap : wrap

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-pYMpAKz6-1689863224206)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719205319359.png)]

+++

解決圣杯布局

左右固定, 中間自適應(yīng)

在flex里面一行搞定

div {

display: flex;

width: 60%;

height: 150px;

margin: 0 auto;

}

.a {

width: 100px;

height: 100%;

background-color: green;

}

.b {

flex: 1;

background-color: pink;

}

.c {

width: 100px;

height: 100%;

background-color: red;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-e9i4tAUx-1689863224206)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/898.gif)]

+++

攜程旅游 - flex布局

fuguangjian0/xiecheng-flex: 黑馬pink攜程旅游flex布局 (github.com)

+++

rem 適配布局

rem的優(yōu)點(diǎn)是通過修改html里面的文字大小來改變頁面元素大小

em 相對(duì)于父元素的字體大小來說的

html {

font-size: 14px;

}

div {

font-size: 12px;

}

p {

width: 10em;

height: 10em;

background-color: pink;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-6govpZLl-1689863224207)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720095309869.png)]

html {

font-size: 14px;

}

div {

font-size: 12px;

}

p {

width: 10rem;

height: 10rem;

background-color: pink;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-k5Rs393B-1689863224207)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720095352266.png)]

+++

媒體查詢

針對(duì)不同屏幕尺寸設(shè)置不同樣式

/*在寬度500px以下, 藍(lán)色, 800px以下, 粉色*/

@media screen and (max-width: 800px){

body {

background-color: pink;

}

@media screen and (max-width: 500px){

body {

background-color: blue;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-hqMtbxNn-1689863224208)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/52rf.gif)]

+++

根據(jù)屏幕不同寬度變色

@media screen and (max-width: 300px){

body {

background: url("th.jpg") 0 0 no-repeat;

background-size: cover;

}

@media screen and (min-width: 301px) and (max-width: 500px){

body {

background: url("th2.jpg") 0 0 no-repeat;

background-size: cover;

}

@media screen and (min-width: 501px){

body {

background: url("th.jpg") 0 0 no-repeat;

background-size: cover;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ezEvcexB-1689863224209)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/84454few.gif)]

+++

不同寬度,行高和字號(hào)大小改變

@media screen and (min-width: 320px){

html {

font-size: 50px;

}

@media screen and (min-width: 540px){

html {

font-size: 100px;

}

div {

height: 1rem;

font-size: 0.5rem;

background-color: green;

text-align: center;

line-height: 1rem;

}

購物車

+++

媒體查詢引入css

引入資源就是針對(duì)不同的屏幕尺寸, 調(diào)用不同的css文件

Less 基礎(chǔ)

css有很多弊端, 不適合非前端開發(fā)工程師快速上手

Less 是CSS預(yù)處理語言

Less 變量

@表達(dá)式, 鍵值對(duì)替換

@font14: 14px;

@color: red;

body {

background-color: @color;

}

div {

font-size: @font14;

}

Less 編譯

自動(dòng)轉(zhuǎn)換css文件, 名字一樣, 后綴改變

Less 嵌套

子元素樣式直接寫進(jìn)父元素里面就好了

p {

background-color: @color;

a {

background-color: #fff;

}

轉(zhuǎn)換后 =>

p a {

background-color: #fff;

}

用到冒號(hào)的元素前面加 &

a {

background-color: #fff;

&:hover {

color: #006b00;

}

轉(zhuǎn)換后 =>

p a:hover {

color: #006b00;

}

Less 運(yùn)算

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ypIrUGlb-1689863224209)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720142619303.png)]

+++

@font14: 14px + 888;

轉(zhuǎn)換css =>

div {

font-size: 902px;

}

蘇寧易購 rem

fuguangjian0/suningyigou-rem: 蘇寧易購移動(dòng)端學(xué)習(xí) less+媒體查詢+rem (github.com)

+++

響應(yīng)式布局

隨著頁面伸縮盒子寬度改變

.container {

height: 150px;

background-color: pink;

margin: 0 auto;

}

@media screen and (max-width: 767px) {

.container {

width: 100%;

}

@media screen and (min-width: 768px) {

.container {

width: 750px;

}

@media screen and (min-width: 992px) {

.container {

width: 970px;

}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-YFwqIJPt-1689863224210)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/%E4%B8%A2%E8%80%B3%E9%97%BB.gif)]

+++

響應(yīng)式案例

寬度改變, 盒子長度改變

.container {

height: 750px;

margin: 0 auto;

}

ul {

list-style: none;

}

.container ul li {

float: left;

width: 93.75px;

height: 30px;

background-color: green;

}

@media screen and (max-width: 767px) {

.container {

width: 100%;

}

.container ul li {

width: 33%;

}

導(dǎo)航欄

導(dǎo)航欄

導(dǎo)航欄

導(dǎo)航欄

導(dǎo)航欄

導(dǎo)航欄

導(dǎo)航欄

導(dǎo)航欄

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-W7DC58dT-1689863224210)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/%E5%87%A1%E5%B0%94%E8%B5%9B%E7%BF%81%E4%B8%BB%E5%8C%97%E8%8D%A3%E8%B9%A6.gif)]

+++

Bootstrap 4 框架使用

框架是一套架構(gòu), 完整的網(wǎng)頁功能解決方案, 控制權(quán)在框架本身, 有預(yù)制樣式庫, 組件和插件, 使用者按照框架規(guī)定的規(guī)范開發(fā)

文件夾結(jié)構(gòu)

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-bTPFHTbB-1689863224210)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720210314420.png)]

+++

柵格系統(tǒng)

把屏幕劃分成12等份

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-sUB4uEuX-1689863224211)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720213244862.png)]

首先引入css文件

把頁面分成橫向的4份, 類似flex布局

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-NETSaSS5-1689863224211)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720213215646.png)]

+++

如果份數(shù)總和小于 12 , 則占不滿頁面

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-VZHrZNpc-1689863224212)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720213733164.png)]

+++

列嵌套

剛才里面的盒子再進(jìn)行劃分, 注意先加一個(gè) .row 盒子取消外盒子 padding, 正常分即可

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-2XkXabtt-1689863224212)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720215433731.png)]

+++

列偏移

讓兩個(gè)盒子靠左右兩邊, 用列偏移來做

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Eczy2kvo-1689863224213)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720220355060.png)]

+++

響應(yīng)式工具

不同屏幕不同效果

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-F8NnWRun-1689863224213)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720221704219.png)]

+++

vw / vh

相對(duì)單位

相對(duì)視口的尺寸設(shè)置網(wǎng)頁元素尺寸

1vw = 1/100視口寬度

1vh = 1/100視口高度

width: 10vw;

height: 10vh;

-size: cover; } } @media screen and (min-width: 501px){ body { background: url(“th.jpg”) 0 0 no-repeat; background-size: cover; } }

[外鏈圖片轉(zhuǎn)存中...(img-ezEvcexB-1689863224209)]

+++

### 不同寬度,行高和字號(hào)大小改變

```css

@media screen and (min-width: 320px){

html {

font-size: 50px;

}

@media screen and (min-width: 540px){

html {

font-size: 100px;

}

div {

height: 1rem;

font-size: 0.5rem;

background-color: green;

text-align: center;

line-height: 1rem;

}

購物車

+++

媒體查詢引入css

引入資源就是針對(duì)不同的屏幕尺寸, 調(diào)用不同的css文件

Less 基礎(chǔ)

css有很多弊端, 不適合非前端開發(fā)工程師快速上手

Less 是CSS預(yù)處理語言

Less 變量

@表達(dá)式, 鍵值對(duì)替換

@font14: 14px;

@color: red;

body {

background-color: @color;

}

div {

font-size: @font14;

}

Less 編譯

自動(dòng)轉(zhuǎn)換css文件, 名字一樣, 后綴改變

Less 嵌套

子元素樣式直接寫進(jìn)父元素里面就好了

p {

background-color: @color;

a {

background-color: #fff;

}

轉(zhuǎn)換后 =>

p a {

background-color: #fff;

}

用到冒號(hào)的元素前面加 &

a {

background-color: #fff;

&:hover {

color: #006b00;

}

轉(zhuǎn)換后 =>

p a:hover {

color: #006b00;

}

Less 運(yùn)算

[外鏈圖片轉(zhuǎn)存中…(img-ypIrUGlb-1689863224209)]

+++

@font14: 14px + 888;

轉(zhuǎn)換css =>

div {

font-size: 902px;

}

蘇寧易購 rem

fuguangjian0/suningyigou-rem: 蘇寧易購移動(dòng)端學(xué)習(xí) less+媒體查詢+rem (github.com)

+++

響應(yīng)式布局

隨著頁面伸縮盒子寬度改變

.container {

height: 150px;

background-color: pink;

margin: 0 auto;

}

@media screen and (max-width: 767px) {

.container {

width: 100%;

}

@media screen and (min-width: 768px) {

.container {

width: 750px;

}

@media screen and (min-width: 992px) {

.container {

width: 970px;

}

[外鏈圖片轉(zhuǎn)存中…(img-YFwqIJPt-1689863224210)]

+++

響應(yīng)式案例

寬度改變, 盒子長度改變

.container {

height: 750px;

margin: 0 auto;

}

ul {

list-style: none;

}

.container ul li {

float: left;

width: 93.75px;

height: 30px;

background-color: green;

}

@media screen and (max-width: 767px) {

.container {

width: 100%;

}

.container ul li {

width: 33%;

}

導(dǎo)航欄

導(dǎo)航欄

導(dǎo)航欄

導(dǎo)航欄

導(dǎo)航欄

導(dǎo)航欄

導(dǎo)航欄

導(dǎo)航欄

[外鏈圖片轉(zhuǎn)存中…(img-W7DC58dT-1689863224210)]

+++

Bootstrap 4 框架使用

文件夾結(jié)構(gòu)

[外鏈圖片轉(zhuǎn)存中…(img-bTPFHTbB-1689863224210)]

+++

柵格系統(tǒng)

把屏幕劃分成12等份

[外鏈圖片轉(zhuǎn)存中…(img-sUB4uEuX-1689863224211)]

首先引入css文件

把頁面分成橫向的4份, 類似flex布局

[外鏈圖片轉(zhuǎn)存中…(img-NETSaSS5-1689863224211)]

+++

如果份數(shù)總和小于 12 , 則占不滿頁面

[外鏈圖片轉(zhuǎn)存中…(img-VZHrZNpc-1689863224212)]

+++

列嵌套

剛才里面的盒子再進(jìn)行劃分, 注意先加一個(gè) .row 盒子取消外盒子 padding, 正常分即可

[外鏈圖片轉(zhuǎn)存中…(img-2XkXabtt-1689863224212)]

+++

列偏移

讓兩個(gè)盒子靠左右兩邊, 用列偏移來做

[外鏈圖片轉(zhuǎn)存中…(img-Eczy2kvo-1689863224213)]

+++

響應(yīng)式工具

不同屏幕不同效果

[外鏈圖片轉(zhuǎn)存中…(img-F8NnWRun-1689863224213)]

+++

vw / vh

相對(duì)單位

相對(duì)視口的尺寸設(shè)置網(wǎng)頁元素尺寸

1vw = 1/100視口寬度

1vh = 1/100視口高度

width: 10vw;

height: 10vh;

柚子快報(bào)邀請(qǐng)碼778899分享：

http://yzkb.51969.com/

精彩文章

評(píng)論可見，查看隱藏內(nèi)容

本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。

轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。

本文鏈接：http://gantiao.com.cn/post/19095588.html

發(fā)布評(píng)論

取消回復(fù)

您暫未設(shè)置收款碼

請(qǐng)?jiān)谥黝}配置——文章設(shè)置里上傳

金鑰匙跨境

掃描二維碼手機(jī)訪問

文章目錄

欧美free性护士vide0shd,老熟女,一区二区三区,久久久久夜夜夜精品国产,久久久久久综合网天天,欧美成人护士h版

柚子快報(bào)邀請(qǐng)碼778899分享：

我是一級(jí)標(biāo)簽

我是二級(jí)標(biāo)簽

我是三級(jí)標(biāo)簽

我是四級(jí)標(biāo)簽

全能穿越錦衣衛(wèi)

隨便看看

特朗普要求美國最高法院暫停執(zhí)行TikTok強(qiáng)制出售令

最新留言

您暫未設(shè)置收款碼