IDC知识库
IDC领域专业知识百科平台

怎样制作网页皮肤?

怎样制作网页皮肤?

在实现换肤功能时,大部分换肤功能页面中的内容是没有发生变化的,变化的只是背景样式的改变,有的页面中组件位置的调整,所以,实现只需要对同一个页面进行不同样式的替换即可,也就是说,我们有多少皮肤,就得有多少样式。

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://www.dns110.com/web/weicanyin.asp

赞(0)
分享到: 更多 (0)

中国专业的网站域名及网站空间提供商

买域名买空间