-
js是網(wǎng)絡的樣式查看全部
-
CSS是層疊樣式表查看全部
-
html表示的是文字查看全部
-
jquery瀏覽器使用最廣查看全部
-
前端不好就業(yè)，本科學歷占百分之五十多，大專占百分之二十多，得堅持學查看全部
-
表示在1.jpg路徑在當前文件夾外面一層查看全部 -
<!?DOCTYPE?html>
查看全部 -
<!DOCTYPE?html> <html> <head> ????<style> ????????/*?基礎樣式?*/ ????????.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; ????????} ????????/*?導航圓點?*/ ????????.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> ???????? ????????<!--?導航箭頭?--> ????????<div?class="arrow?prev">?</div> ????????<div?class="arrow?next">?</div> ???????? ????????<!--?導航圓點?--> ????????<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()?{ ????????????????//?生成導航圓點 ????????????????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());? ????????????????//?自動播放 ????????????????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)頁，app，組成
查看全部 -
前端的三大核心技能
前端是由三個語言組成，分別是HTML、CSS、JavaScript
前端后期的框架或庫只是同上述內(nèi)容封裝而來，是為了更方便的操作這三個語言而已。
1 . HTML的全稱是超文本標記語言。我們可以使用這些標簽說明文字、圖像、音視頻等等。
? ? ? HTML的的官方叫法為“標簽”
? ? ? 簡單來說，HTML更像是房子的架構(gòu)，做好HTML后我們就相當于在了一個毛坯房。
2 . CSS又叫層疊樣式表，可以靜態(tài)地修飾網(wǎng)面，讓網(wǎng)頁更有活力更好看。
? ? ??簡單來說，CSS更像給房子裝修好買了家具，讓房子更漂亮了.
3 .?JavaScript? (簡稱"JS")是一種具有函數(shù)優(yōu)先的輕量級，解釋型或即時編譯型的編程語言，他主要負責和使? ? ? ? 用者與網(wǎng)面交互使用的。比如按鈕的觸碰效果、導航欄輪播等效果。
? ? 簡單來說，JS更像房子的智能家居系統(tǒng)，讓用戶和房子能夠互動。
查看全部 -
<span>輸入帳號密碼隔前面的文字
查看全部 -
input需要登入介面而使用的標籤
<input type(類型)="例如:帳號/密碼/生日/電話"/>
查看全部 -
<ol>數(shù)字列表
查看全部 -
<ul>大列表
<il>小列表
查看全部 -
div分割作用
查看全部 -
input標簽有六種，輸入框
查看全部 -
<!DOCTYPE(告知瀏覽器這是甚麼) 後方帶入html之類的>
有頭就有尾基本要有以下三大標籤
<html></html>甚麼編碼
<head></head>網(wǎng)頁的頭
<body></body>網(wǎng)頁的身體
三大標籤順序為
<html>
????<head> </head>
????<body></body>
</html>
????3. <meta>裡面charset(網(wǎng)頁編碼解析器)="UTF-8(中文)"
????4.<title>網(wǎng)頁標題</title>
????
查看全部 -
前端人員是制作小程序，app的查看全部
舉報
0/150
提交
取消