刚学的网页换肤

最新推荐文章于 2019-05-17 16:33:09 发布

我真的不是C罗

最新推荐文章于 2019-05-17 16:33:09 发布

阅读量203

点赞数

本文链接：https://blog.csdn.net/qq_25077777/article/details/51089815

版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link id="link1" rel="stylesheet" type="text/css" href="css1.css"/>
</head>
<body>
<dl id="message">
<form>
<dt>
<strong>能换肤的提交框</strong>
<input id="btn1" type="button" value="风格一" οnclick="document.getElementById('link1').href='css1.css';"/>;
<input id="btn2" type="button" value="风格二"οnclick="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.css

body{ margin-top: 40px; background:blue; }
dl{width: 400px;border: 4px solid #ccc; background: #ffffcc;padding: 20px;
margin: 0 auto;filter:alpha(opacity:70); opacity: 0.7; }
dt{font-size: 20px; color: #009933;border-bottom: 2px solid #ccc;padding-left: 10px;padding-bottom: 10px;margin-bottom: 20px;}
dd{margin-left: 0;padding-bottom: 10px;font-size: 15px;padding-left: 10px;}
.text{width: 100px;height: 50px;}
textarea{width: 150px;height: 50px;}
.btn{width: 100px;height: 50px;}
.center{text-align: center;}

css2.css

body { background: gray; margin-top: 40px; }

dl { width: 600px; border: 4px solid #fff; background: #669999; 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: 500px; height: 30px; line-height: 30px; font-weight: bold; font-size: 14px; font-family: arial; }
textarea { width: 500px; height: 120px; overflow: auto;font-weight: bold; font-size: 14px; font-family: arial; }
.btn { width: 120px; height: 40px; }
.center { text-align: center; }