JavaScript---网页换肤

最新推荐文章于 2022-12-27 16:40:31 发布

maidu_xbd

最新推荐文章于 2022-12-27 16:40:31 发布

阅读量683

点赞数

分类专栏： JavaScript 文章标签：网页换肤

本文链接：https://blog.csdn.net/maidu_xbd/article/details/90295316

版权

JavaScript 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

学了一阵的前端了，复制粘贴复制粘贴的用vue写了一些小项目，回过头来发现还是得好好学习巩固下JavaScript。目前状态很不好呀，感觉自己什么都不会的感觉，七七八八自学各种东西，现在，脑瓜中混乱的很，但是也不能因此放弃吧。

谈谈入门“网页换肤”

整体思路：设置按钮，点击不同按钮切换皮肤风格，主要是更换css样式。

知识点：

<dt>标签用于创建定义列表中的一项（即一个术语）。

<dt>标签是与<dl>和<dd>联合使用的。<dl>用于创建定义列表，<dd>用于描述列表中的项

关键：获取css样式引入的link标签，设置其href属性：

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<link id="link1" href="css1.css" rel="stylesheet" type="text/css" />

</head>

<body>

	<dl id="message">
		<form>
			<dt>
				<strong>可以换肤的提交框：</strong>
				<input id="btn1" type="button" value="皮肤1"
					onclick="document.getElementById('link1').href='css1.css';" />
				<input id="btn2" type="button" value="皮肤2"
					onclick="document.getElementById('link1').href='css2.css';" />
			</dt>
			<dd>输入姓名：<input class="text" type="text" /></dd>
			<dd>输入密码：<input class="text" type="password" /></dd>
			<dd>请您留言：<textarea></textarea></dd>
			<dd class="center"><input class="btn" type="submit" value="提交" /></dd>
		</form>
	</dl>

</body>

</html>

css1.html

body { margin-top: 40px; background: url(bg1.jpg) no-repeat center center; }

dl { width: 400px; border: 2px solid #ccc; background: #FFFFCC; padding: 20px; margin: 0 auto; filter: alpha(opacity: 70); opacity: 0.7; }
dt { font-size: 18px; color: #009933; border-bottom: 1px solid #ccc; padding-left: 10px; padding-bottom: 10px; margin-bottom: 20px; }
dd { margin-left: 0; padding-bottom: 10px; font-size: 14px; padding-left: 10px; }
.text { width: 300px; height: 30px; line-height: 30px; }
textarea { width: 300px; height: 120px; overflow: auto; }
.btn { width: 120px; height: 40px; }
.center { text-align: center; }

css2.html

body { background: url(bg2.jpg) no-repeat;
    background-size: cover; margin-top: 80px; }

dl { width: 479px;
    border: 4px solid #fff;
    background: #c8e4a9; padding: 20px; margin: 0 auto; filter: alpha(opacity: 90); opacity: 0.9; }
dt { font-size: 18px; color: #fff; border-bottom: 1px solid #ccc; padding-left: 10px; padding-bottom: 10px; margin-bottom: 20px; }
dd { margin-left: 0; padding-bottom: 10px; font-size: 14px; padding-left: 10px; color: #fff; }
.text { width: 382px; height: 30px; line-height: 30px; font-weight: bold; font-size: 14px; font-family: arial; }
textarea { width: 382px; height: 120px; overflow: auto;font-weight: bold; font-size: 14px; font-family: arial; }
.btn { width: 120px; height: 40px; }
.center { text-align: center; }

maidu_xbd

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript---网页换肤

学了一阵的前端了，复制粘贴复制粘贴的用vue写了一些小项目，回过头来发现还是得好好学习巩固下JavaScript。目前状态很不好呀，感觉自己什么都不会的感觉，七七八八自学各种东西，现在，脑瓜中混乱的很，但是也不能因此放弃吧。谈谈入门“网页换肤” 整体思路：设置按钮，点击不同按钮切换皮肤风格，主要是更换css样式。知识点：<dt>标签用于创...
复制链接

扫一扫