整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天是2021.7.14,是個(gè)好日子.好久沒發(fā)布文章了.今天發(fā)布下如何在在html頁面中使用vue3.義縣游學(xué)電子科技一直以技術(shù)文章為主.以下是h5的頁面源碼:
<html>
<script src="https://unpkg.com/vue@next"></script>
<body>
<div id="vue">
<div v-html="rhtml"></div>
<props-demo-simple></props-demo-simple>
</div>
</body>
<script>
const htmls={
data(){
return{
rhtml:"<h1>html頁面中引用VUE3的演示頁面</h1>",
}
}
}
const app=Vue.createApp(htmls)
// 簡(jiǎn)單語法注冊(cè)或獲取全局組件.注冊(cè)還會(huì)自動(dòng)使用給定的 id 設(shè)置組件的名稱
app.component('props-demo-simple', { data() {
return {
count: 0
}
},
props: ['size', 'myMessage'],template: `
<button v-on:click="count++">
You clicked me {{ count }} times.
</button>`
}
)
app.mount("#vue")
</script>
</html>
分析下:首先<script src="https://unpkg.com/vue@next"></script>,引入vue3的腳本地址. 然后在body下的<script>中書寫vue3的代碼即可. 下圖是運(yùn)行的結(jié)果效果
哈嘍大家好，我是作者“未來”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個(gè)階段，堅(jiān)持學(xué)習(xí)3個(gè)月蛻變?yōu)閃eb前端高手哦！
志同道合的小伙伴跟我一起學(xué)習(xí)交流哦！
1 學(xué)成網(wǎng)準(zhǔn)備工作
案例練習(xí)目的是總結(jié)以前的CSS和HTML 還有ps的使用。
制作步驟：
1 準(zhǔn)備相關(guān)文件（樣式結(jié)構(gòu)相分離）html文件（統(tǒng)一命名為index.html為主頁） 圖片文件。
2 準(zhǔn)備CSS初始化，書寫結(jié)構(gòu)和樣式。
2 學(xué)成網(wǎng)案例分析
我們將做的項(xiàng)目是這個(gè)樣子：
接下來我們第三步是要確定版心和各個(gè)模塊
這張圖是在瀏覽器中保存的，保存下來后，我們就可以通過ps軟件進(jìn)行測(cè)量了，選框工具可以用來測(cè)量寬度和高度，測(cè)得的高度是1200像素。
3 調(diào)整頭部的寬度
這塊寬度是可以自由調(diào)整的，比如你的屏幕比較寬，可以調(diào)寬點(diǎn)，比較美觀。這里定為1366像素。
4 logo和 navbar部分開始
根據(jù)相關(guān)性把這塊兒分成4個(gè)部分
1 Logo切片保存
2 導(dǎo)航部分navbar，這三個(gè)是鏈接，我們不能只用a來做，得用li把a(bǔ)包起來（a是行內(nèi)元素，中間兩個(gè)之間有縫隙，li浮動(dòng)起來后中間沒有縫隙）同時(shí)這樣方便后臺(tái)交互。約定 以后導(dǎo)航欄部分都用li來做。
5 logo和 naval結(jié)束
6 search開始
7 search結(jié)束
8 banner制作開始
9 給 banner添加背景圖片
10 側(cè)邊欄結(jié)構(gòu)搭建
11 側(cè)邊欄制作結(jié)束
12 小課表上
13 小課表中
14 小課表下
15 精品推薦上
16 精品推薦下
看不懂的小伙伴不要?dú)怵H，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學(xué)習(xí)，每篇文章看三遍，一個(gè)月后，回過頭來看之前的文章就會(huì)感覺簡(jiǎn)單極了。
本章已結(jié)束，下篇文章將分享《15 CSS四種定位及應(yīng)用》小伙伴們不要錯(cuò)過喲！
于Web開發(fā)者來說，CSS3不只是一門新奇的技術(shù)，更重要的是這些全新概念的Web應(yīng)用給開發(fā)人員帶來了無限的可能性，也極大地提高了開發(fā)效率。我們不必再依賴圖片或者JavaScript去完成圓角、多背景、用戶自定義字體、3D動(dòng)畫、漸變、盒陰影、文字陰影、透明度等提高Web設(shè)計(jì)質(zhì)量的特色應(yīng)用。
1 CSS3在選擇器上的支持
CSS3在選擇器上的豐富支持使得開發(fā)人員可以靈活地控制樣式。通過選擇器的使用，開發(fā)人員不再需要在編輯樣式時(shí)使用多余的、沒有任何語義的class屬性，而可以直接將樣式與元素綁定起來，利用屬性選擇器可以很容易地根據(jù)屬性值的開頭或結(jié)尾選擇某個(gè)元素，利用兄弟選擇器可以選擇同級(jí)兄弟節(jié)點(diǎn)或緊鄰下一個(gè)節(jié)點(diǎn)的元素，利用偽類選擇器可以選擇某一類元素，從而節(jié)省在網(wǎng)站或Web應(yīng)用程序設(shè)計(jì)完成后又要修改樣式所花費(fèi)的時(shí)間。
2 CSS3在樣式上的支持
只要提起CSS3的特性是什么，回答最多的就是“圓角”。不錯(cuò)，圓角這個(gè)功能可以讓前端布局節(jié)約大量的時(shí)間和精力去切圖拼湊一個(gè)圓角。CSS3還支持陰影（盒陰影和文本陰影）和漸變；可以自定義字體（使用@font-face）；對(duì)于連續(xù)文本換行也新增了一些屬性，這既解決了連續(xù)英文字符出現(xiàn)頁面錯(cuò)位的問題，也不需要后端程序去截取這個(gè)連續(xù)字符；可以給邊框添加背景，支持背景調(diào)整大小和背景透明處理。
3 CSS3對(duì)于動(dòng)畫的支持
CSS3支持的動(dòng)畫類型有：變換、過渡和動(dòng)畫。你可以對(duì)特定的屬性設(shè)置transition和animation的值實(shí)現(xiàn)動(dòng)畫效果。
4 在實(shí)際開發(fā)中該如何使用CSS3
首先應(yīng)遵循一個(gè)優(yōu)雅降級(jí)的原則，比如前面談到的圓角，我們可以針對(duì)Firefox和Safari等支持圓角的瀏覽器應(yīng)用CSS圓角，而那些不支持CSS圓角的瀏覽器則顯示為直角。其次，對(duì)于不支持CSS3的瀏覽器，可以使用JavaScript腳本來實(shí)現(xiàn)。在向用戶或企業(yè)推廣新技術(shù)的同時(shí)也要關(guān)注他們的目標(biāo)與可行性，不能為了技術(shù)而技術(shù)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
