怎樣制作網頁皮膚?
在實現換膚功能時,大部分換膚功能頁面中的內容是沒有發生變化的,變化的只是背景樣式的改變,有的頁面中組件位置的調整,所以,實現只需要對同一個頁面進行不同樣式的替換即可,也就是說,我們有多少皮膚,就得有多少樣式。
2.具體實現
首先,我們需要進行準備一個固定的html頁面,命名為index.html,其內容如下所示:
同時,我們需要三套css樣式,分別命名為flower_branch.css,foresttree.css,snow_partner.css,其內容之一如下所示:
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;
}
這樣,當我們進行點擊index.html中的按鈕進行換膚操作的時候,我們就進行樣式的替換,下面是實現代碼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>
有了這些準備工作之后,我們就可以進行實際操作了。
域名頻道一家知名的網站制作、網站優化、網站推廣提供商,虛擬主機的大賣場。
云建站可視化編輯器、輕松上傳和編輯圖像,超多精美模板、輕松打造一個屬于您的精致網站。
每個網站的情況不同,因此所需要的主機也不同。要選擇適合自己的虛擬主機,網站的開發語言有很多,常見的有asp、asp.net、php等,不同語言所需要的系統和運行環境并不一樣,所以在購買主機前需要知道自己網站使用的是什么語言,需要什么樣的運行環境,以便選擇合適的配置,各型號虛擬主機支持的程序可以在主機配置頁面中看到。
基于微信的外賣-訂座-電子菜單平臺:微餐飲http://http://m.fascinatingdeals.com/web/weicanyin.asp