怎樣制作網(wǎng)頁皮膚?
在實現(xiàn)換膚功能時,大部分換膚功能頁面中的內(nèi)容是沒有發(fā)生變化的,變化的只是背景樣式的改變,有的頁面中組件位置的調(diào)整,所以,實現(xiàn)只需要對同一個頁面進(jìn)行不同樣式的替換即可,也就是說,我們有多少皮膚,就得有多少樣式。
2.具體實現(xiàn)
首先,我們需要進(jìn)行準(zhǔn)備一個固定的html頁面,命名為index.html,其內(nèi)容如下所示:
同時,我們需要三套css樣式,分別命名為flower_branch.css,foresttree.css,snow_partner.css,其內(nèi)容之一如下所示:
body {
background: url(“../images/skin_flower_branch.png”);
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.container {
margin: 20% 20% 2% 10%;
width: 500px;
height: 100%;
color: #4A8B0B;
}
.container input,textarea {
background-color: #94c3aa;
border: 1px solid;
}
這樣,當(dāng)我們進(jìn)行點擊index.html中的按鈕進(jìn)行換膚操作的時候,我們就進(jìn)行樣式的替換,下面是實現(xiàn)代碼javaScript:
<script>
window.onload = function () {
var styles = document.getElementById(‘styles’);
var treeBranch = document.getElementById(‘treeBranch’);
var snowPartner = document.getElementById(‘snowPartner’);
var flowerBranch = document.getElementById(‘flowerBranch’);
treeBranch.onclick = function () {
styles.href = ‘./styles/foresttree.css’;
this.style.color = ‘#midnightblue’;
};
snowPartner.onclick = function () {
styles.href = ‘./styles/snow_partner.css’;
this.style.color = ‘#8B4D61’;
};
flowerBranch.onclick = function () {
styles.href = ‘./styles/flower_branch.css’;
this.style.color = ‘#4A8B0B’;
}
}
</script>
有了這些準(zhǔn)備工作之后,我們就可以進(jìn)行實際操作了。
域名頻道一家知名的網(wǎng)站制作、網(wǎng)站優(yōu)化、網(wǎng)站推廣提供商,虛擬主機(jī)的大賣場。
云建站可視化編輯器、輕松上傳和編輯圖像,超多精美模板、輕松打造一個屬于您的精致網(wǎng)站。
每個網(wǎng)站的情況不同,因此所需要的主機(jī)也不同。要選擇適合自己的虛擬主機(jī),網(wǎng)站的開發(fā)語言有很多,常見的有asp、asp.net、php等,不同語言所需要的系統(tǒng)和運行環(huán)境并不一樣,所以在購買主機(jī)前需要知道自己網(wǎng)站使用的是什么語言,需要什么樣的運行環(huán)境,以便選擇合適的配置,各型號虛擬主機(jī)支持的程序可以在主機(jī)配置頁面中看到。
基于微信的外賣-訂座-電子菜單平臺:微餐飲http://http://m.chouwenlao.cn/web/weicanyin.asp