-
js是網(wǎng)絡(luò)的樣式查看全部
-
CSS是層疊樣式表查看全部
-
html表示的是文字查看全部
-
jquery瀏覽器使用最廣查看全部
-
前端不好就業(yè)，本科學(xué)歷占百分之五十多，大專占百分之二十多，得堅(jiān)持學(xué)查看全部
-
表示在1.jpg路徑在當(dāng)前文件夾外面一層查看全部 -
<!?DOCTYPE?html>
查看全部 -
<!DOCTYPE?html> <html> <head> ????<style> ????????/*?基礎(chǔ)樣式?*/ ????????.banner-container?{ ????????????position:?relative; ????????????width:?1200px; ????????????height:?400px; ????????????margin:?0?auto; ????????????overflow:?hidden; ????????} ????????/*?圖片列表?*/ ????????.banner-list?{ ????????????display:?flex; ????????????transition:?transform?0.5s?ease; ????????????width:?6000px;?/*?單張圖片寬度1200×5張?*/ ????????} ????????.banner-item?{ ????????????width:?1200px; ????????????height:?400px; ????????????flex-shrink:?0; ????????} ????????/*?導(dǎo)航圓點(diǎn)?*/ ????????.dot-nav?{ ????????????position:?absolute; ????????????bottom:?20px; ????????????left:?50%; ????????????transform:?translateX(-50%); ????????????display:?flex; ????????????gap:?10px; ????????} ????????.dot-item?{ ????????????width:?12px; ????????????height:?12px; ????????????border-radius:?50%; ????????????background:?rgba(255,255,255,0.5); ????????????cursor:?pointer; ????????????transition:?background?0.3s; ????????} ????????.dot-item.active??{ ????????????background:?#fff; ????????} ????????/*?箭頭按鈕?*/ ????????.arrow?{ ????????????position:?absolute; ????????????top:?50%; ????????????transform:?translateY(-50%); ????????????width:?40px; ????????????height:?40px; ????????????background:?rgba(0,0,0,0.3); ????????????border-radius:?50%; ????????????cursor:?pointer; ????????????display:?flex; ????????????align-items:?center; ????????????justify-content:?center; ????????????color:?white; ????????????font-size:?24px; ????????????opacity:?0; ????????????transition:?opacity?0.3s; ????????} ????????.banner-container:hover?.arrow?{ ????????????opacity:?1; ????????} ????????.arrow.prev??{?left:?20px;?} ????????.arrow.next??{?right:?20px;?} ????</style> </head> <body> ????<div?class="banner-container"> ????????<div?class="banner-list"> ????????????<img?src="img1.jpg"??class="banner-item"> ????????????<img?src="img2.jpg"??class="banner-item"> ????????????<img?src="img3.jpg"??class="banner-item"> ????????????<img?src="img4.jpg"??class="banner-item"> ????????????<img?src="img5.jpg"??class="banner-item"> ????????</div> ???????? ????????<!--?導(dǎo)航箭頭?--> ????????<div?class="arrow?prev">?</div> ????????<div?class="arrow?next">?</div> ???????? ????????<!--?導(dǎo)航圓點(diǎn)?--> ????????<div?class="dot-nav"></div> ????</div> ????<script> ????????const?banner?=?{ ????????????container:?document.querySelector('.banner-container'),? ????????????list:?document.querySelector('.banner-list'),? ????????????items:?document.querySelectorAll('.banner-item'),? ????????????currentIndex:?0, ????????????timer:?null, ???????????? ????????????init()?{ ????????????????//?生成導(dǎo)航圓點(diǎn) ????????????????const?dotNav?=?document.querySelector('.dot-nav');? ????????????????this.items.forEach((_,??index)?=>?{ ????????????????????const?dot?=?document.createElement('div');? ????????????????????dot.className??=?`dot-item${index?===?0???'?active'?:?''}`; ????????????????????dot.addEventListener('click',??()?=>?this.goTo(index));? ????????????????????dotNav.appendChild(dot);? ????????????????}); ????????????????//?箭頭事件 ????????????????document.querySelector('.arrow.prev').addEventListener('click',??()?=>?this.prev());? ????????????????document.querySelector('.arrow.next').addEventListener('click',??()?=>?this.next());? ????????????????//?自動(dòng)播放 ????????????????this.autoPlay();? ???????????????? ????????????????//?懸停暫停 ????????????????this.container.addEventListener('mouseenter',??()?=>?clearInterval(this.timer));? ????????????????this.container.addEventListener('mouseleave',??()?=>?this.autoPlay());? ????????????}, ????????????updatePosition()?{ ????????????????this.list.style.transform??=?`translateX(-${this.currentIndex??*?1200}px)`; ????????????????document.querySelectorAll('.dot-item').forEach((dot,??index)?=>?{ ????????????????????dot.classList.toggle('active',??index?===?this.currentIndex);? ????????????????}); ????????????}, ????????????prev()?{ ????????????????this.currentIndex??=?(this.currentIndex??-?1?+?this.items.length)??%?this.items.length;? ????????????????this.updatePosition();? ????????????}, ????????????next()?{ ????????????????this.currentIndex??=?(this.currentIndex??+?1)?%?this.items.length;? ????????????????this.updatePosition();? ????????????}, ????????????goTo(index)?{ ????????????????this.currentIndex??=?index; ????????????????this.updatePosition();? ????????????}, ????????????autoPlay()?{ ????????????????this.timer??=?setInterval(()?=>?this.next(),??3000); ????????????} ????????}; ????????banner.init();? ????</script> </body> </html>查看全部 -
網(wǎng)頁(yè)，app，組成
查看全部 -
前端的三大核心技能
前端是由三個(gè)語(yǔ)言組成，分別是HTML、CSS、JavaScript
前端后期的框架或庫(kù)只是同上述內(nèi)容封裝而來(lái)，是為了更方便的操作這三個(gè)語(yǔ)言而已。
1 . HTML的全稱是超文本標(biāo)記語(yǔ)言。我們可以使用這些標(biāo)簽說(shuō)明文字、圖像、音視頻等等。
? ? ? HTML的的官方叫法為“標(biāo)簽”
? ? ? 簡(jiǎn)單來(lái)說(shuō)，HTML更像是房子的架構(gòu)，做好HTML后我們就相當(dāng)于在了一個(gè)毛坯房。
2 . CSS又叫層疊樣式表，可以靜態(tài)地修飾網(wǎng)面，讓網(wǎng)頁(yè)更有活力更好看。
? ? ??簡(jiǎn)單來(lái)說(shuō)，CSS更像給房子裝修好買(mǎi)了家具，讓房子更漂亮了.
3 .?JavaScript? (簡(jiǎn)稱"JS")是一種具有函數(shù)優(yōu)先的輕量級(jí)，解釋型或即時(shí)編譯型的編程語(yǔ)言，他主要負(fù)責(zé)和使? ? ? ? 用者與網(wǎng)面交互使用的。比如按鈕的觸碰效果、導(dǎo)航欄輪播等效果。
? ? 簡(jiǎn)單來(lái)說(shuō)，JS更像房子的智能家居系統(tǒng)，讓用戶和房子能夠互動(dòng)。
查看全部 -
<span>輸入帳號(hào)密碼隔前面的文字
查看全部 -
input需要登入介面而使用的標(biāo)籤
<input type(類型)="例如:帳號(hào)/密碼/生日/電話"/>
查看全部 -
<ol>數(shù)字列表
查看全部 -
<ul>大列表
<il>小列表
查看全部 -
div分割作用
查看全部 -
input標(biāo)簽有六種，輸入框
查看全部 -
<!DOCTYPE(告知瀏覽器這是甚麼) 後方帶入html之類的>
有頭就有尾基本要有以下三大標(biāo)籤
<html></html>甚麼編碼
<head></head>網(wǎng)頁(yè)的頭
<body></body>網(wǎng)頁(yè)的身體
三大標(biāo)籤順序?yàn)?/p>
<html>
????<head> </head>
????<body></body>
</html>
????3. <meta>裡面charset(網(wǎng)頁(yè)編碼解析器)="UTF-8(中文)"
????4.<title>網(wǎng)頁(yè)標(biāo)題</title>
????
查看全部 -
前端人員是制作小程序，app的查看全部
舉報(bào)
0/150
提交
取消