网页换肤

请注意,本文编写于 122 天前,最后修改于 119 天前,其中某些信息可能已经过时。

html片段

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>网页换肤</title>
    <link id="link1" href="css/css1.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
       <dl id="message">
        <form>
           <dt>
               <strong>换肤提交框:</strong>
            <input id="btn1" type="button" value="skin1" 
                 onclick="document.getElementById('link1').href='css/css1.css';" />
            <input id="btn2" type="button" value="skin2" onclick="document.getElementById('link1').href='css/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

    body { margin-top: 40px; background: url(../img/bg1.gif) }
dl { width: 400px; border: 2px solid #ccc; background:#E6E6FA; 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

    body { background: url(../img/bg.gif); margin-top: 40px; }
dl { width: 600px; border: 4px solid #fff; background:         #DDA0DD; 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; }

运行结果

skin1.PNG
skin1.PNG

skin2.PNG
skin2.PNG