Hello,大家好.我是笨孩子,之前一直做iOS开发,自从微信小程序出来以后,我打算学习web开发.
下面是一个小demo,关于网页换肤的,有问题,希望各位多多指教.
style.html
<!DOCTYPE html><html lang="en"><head>
<!--http-equiv 把content属性关联到HTTP头部-->
<meta charset="UTF-8" http-equiv="content-type" content="text/html">
<title>测试</title>
<!--指定连接目标 指定当前文档与被链接文档的关系 -->
<link id="link1" href="css1.css" rel="stylesheet" type="text/css" /></head><body><dl id="message">
<!--用于为用户输入创建 HTML 表单-->
<from>
<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>
</from>
</dl>
</body>
</html>
css1.css
/*no-repeat:不重复 center center 代表左右*/
body {margin-top: 40px;background: url(th-29.jpeg) no-repeat center center;}
/*dl定义列表*/
dl { width: 400px;
/*边界 实线效果 颜色*/
border: 2px solid #ccc;
background: #FFFFCC;
/*填充(界面主要区域有间距)*/
padding: 20px;
/*设置外边距,auto是浏览器设定的值*/
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 类的 HTML 元素均为居中*/
.center{ text-align: center;}
css2.css
body{
background: url(th-30.jpeg) no-repeat center center;
margin-top: 40px;
}
dl{
width: 600px;
border: 4px solid #fff;
background: #669999;
padding: 20px;
margin: 0 auto;
filter: alpha(opacity:90); opacity: 0.5;
}
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;}
换肤.gif
网友评论