我无忧啦网址之家怎样自定义皮肤? 悬赏8元 已结束
我无忧啦网址之家(551la.com)-广泛收录购物、音乐、电影、游戏、小说等优质网址,并提供搜索引擎和天气查询、快递查询、机票查询等实用查询工具。最简洁、安全的上网主页;绿色无广告的网址导航。上网主页,就选我无忧啦网址之家。网站设置了标准版、宽屏版、手机版以满足不同设备的需求。作为上网主页,每天面对同一个界面难免审美疲劳,怎样才能为网页设置不同的主题皮肤避免视觉疲劳?
可以找程序搞一下。可以换个背景 也可以自己学习搞一下比较简单
首先,我们需要进行准备一个固定的html页面,命名为,其内容如下所示:
同时,我们需要三套css样式,分别命名为flower_,,snow_,其内容之一如下所示:
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;
}
这样,当我们进行点击中的按钮进行换肤操作的时候,我们就进行样式的替换,下面是实现代码javaScript:
<script>
= function () {
var styles = ('styles');
var treeBranch = ('treeBranch');
var snowPartner = ('snowPartner');
var flowerBranch = ('flowerBranch');
= function () {
= './styles/';
= '#midnightblue';
};
= function () {
= './styles/snow_';
= '#8B4D61';
};
= function () {
= './styles/flower_';
= '#4A8B0B';
}
}
</script>
有了这些准备工作之后,我们就可以进行实际操作了,最后完成的页面如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一键换肤功能</title>
<link rel="stylesheet" href="./styles/" type="text/css" id="styles">
<style>
body {
margin: 0;
padding: 0;
}
.container td:nth-child(1) {
text-align: right;
}
.container td:nth-child(2) {
text-align: left;
}
</style>
</head>
<script>
= function () {
var styles = ('styles');
var treeBranch = ('treeBranch');
var snowPartner = ('snowPartner');
var flowerBranch = ('flowerBranch');
= function () {
= './styles/';
= '#midnightblue';
};
= function () {
= './styles/snow_';
= '#8B4D61';
};
= function () {
= './styles/flower_';
= '#4A8B0B';
}
}
</script>
<body>
<div>
<span id="treeBranch" class="span-button">treeBranch</span>
<span id="snowPartner" class="span-button">snowPartner</span>
<span id="flowerBranch" class="span-button">flowerBranch</span>
</div>
<div class="container">
<form>
<table>
<tr>
<td><label for="username"> 请输入用户名:</label></td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td><label for="pass">请输入密 码:</label></td>
<td><input type="text" id="pass" name="pass" /></td>
</tr>
<tr>
<td><label for="repass">请输入确认密码:</label></td>
<td><input type="text" id="repass" name="repass" /></td>
</tr>
<tr>
<td><label for="male">请选择性别:</label></td>
<td>
<input type="radio" id="male" name="sex" />男
<input type="radio" name="sex" />女
</td>
</tr>
<tr>
<td><label for="book"> 请选择爱好:</label></td>
<td><input type="checkbox" id="book" name="like"/>读书
<input type="checkbox" name="like"/>看电影
<input type="checkbox" name="like"/>写博客
<input type="checkbox" name="like"/>看资料
</td>
</tr>
<tr>
<td><label for="phone">请输入联系方式:</label></td>
<td><input type="number" id="phone" name="pass"/></td>
</tr>
<tr>
<td>请输入自我评价:</td>
<td><textarea rows="5" cols="21" name="writeSelf" placeholder="请输入..." id="writeSelf"></textarea></td>
</tr>
</table>
</form>
</div>
</body>
这个简单,找技术搞一下即可,这么大的网站对技术来说应该是小菜一碟
这不是以前hao123的风格吗,挺好了