怎樣制作網(wǎng)頁(yè)皮膚？

怎樣制作網(wǎng)頁(yè)皮膚？

在實(shí)現(xiàn)換膚功能時(shí)，大部分換膚功能頁(yè)面中的內(nèi)容是沒(méi)有發(fā)生變化的，變化的只是背景樣式的改變，有的頁(yè)面中組件位置的調(diào)整，所以，實(shí)現(xiàn)只需要對(duì)同一個(gè)頁(yè)面進(jìn)行不同樣式的替換即可，也就是說(shuō)，我們有多少皮膚，就得有多少樣式。

2.具體實(shí)現(xiàn)

首先，我們需要進(jìn)行準(zhǔn)備一個(gè)固定的html頁(yè)面，命名為index.html,其內(nèi)容如下所示：

同時(shí)，我們需要三套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)行點(diǎn)擊index.html中的按鈕進(jìn)行換膚操作的時(shí)候，我們就進(jìn)行樣式的替換，下面是實(shí)現(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)行實(shí)際操作了。

域名頻道一家知名的網(wǎng)站制作、網(wǎng)站優(yōu)化、網(wǎng)站推廣提供商，虛擬主機(jī)的大賣(mài)場(chǎng)。
云建站可視化編輯器、輕松上傳和編輯圖像，超多精美模板、輕松打造一個(gè)屬于您的精致網(wǎng)站。
每個(gè)網(wǎng)站的情況不同，因此所需要的主機(jī)也不同。要選擇適合自己的虛擬主機(jī),網(wǎng)站的開(kāi)發(fā)語(yǔ)言有很多，常見(jiàn)的有asp、asp.net、php等，不同語(yǔ)言所需要的系統(tǒng)和運(yùn)行環(huán)境并不一樣，所以在購(gòu)買(mǎi)主機(jī)前需要知道自己網(wǎng)站使用的是什么語(yǔ)言，需要什么樣的運(yùn)行環(huán)境，以便選擇合適的配置，各型號(hào)虛擬主機(jī)支持的程序可以在主機(jī)配置頁(yè)面中看到。
基于微信的外賣(mài)-訂座-電子菜單平臺(tái)：微餐飲http://http://nrfpj.cn/web/weicanyin.asp