网页换肤

文君 2019年04月20日 •  学习热点 422 •  3
本文最后修改于 148 天前,部分内容可能已经过时!

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
skin2.PNG

Tags:study
上一篇
下一篇

该页面评论已关闭

已有 3 条评论

浅枫沐雪
 浅枫沐雪 5 个月前 • |

图片自适应写法

<style> body{ background-image: url("图片地址"); background-repeat: no-repeat; height:100%; width:100%; overflow: hidden; background-size:cover; } </style>
文君
 文君 4 个月前 • |
@浅枫沐雪

谢谢~

浅枫沐雪
 浅枫沐雪 5 个月前 • |

文章默认语法为markdown语法