web前端入门之html+css实例②

body{
          
   
	background-image: url(../img/bg.gif);
	background-repeat: no-repeat;
}
.box{
          
   
	position: relative;
	left: 90px;
	top: 50px;
	width: 400px;
	height: 600px;
	background-color: white;
}

2、输入框，密码框（密码框下的提示块），文本框 html

<div class="name">
	<lable>username:</lable>
		<input type="text" name="usn" id="usn" value="" />
	</div>
	<div class="psw">
		<label>password:</label>
		<input type="password" name="psw" id="" value="" />
		<span class="kuai">密码要8-12位的数字或字母组合</span>
	</div>
	<div class="message">
		<label for="message">message：</label>
		<textarea id="message" maxlength="20">
					No game no life!
		</textarea>
	</div>

3、单项选择按钮，多项选择

<div class="sex">
	<p>sex:</p>
	<div class="radio">
		<input type="radio" id="male" name="sex"></input>
		<label for="male">男</label>
		<input type="radio" id="female" name="sex"></input>
		<label for="female">女</label>
	</div>
</div>

<p class="hoby">hoby:</p>
<div class="checkbox">
	<input type="checkbox" name="hoby" value="打球" id="daqiu">		
	</input>
	<label for="daqiu">打球</label>
	<input type="checkbox" name="hoby" value="唱歌"id="changge">
	</input>
	<label for="changge">唱歌</label>
	<input type="checkbox" name="hoby"value="睡觉"id="shuijiao">
	</input>
	<label for="shuijiao">睡觉</label>
</div>

4、提交按钮

<div class="button">
	<input type="submit"value="send" class="submit"/>
</div>

//点击前：
.checkbox input[type=checkbox]:checked + label {
          
   
    color: #ffffff;
    transition: all 0.3s ease;
    }
//点击后：
.checkbox input[type=checkbox]:checked + label {
          
   
    background-color: #e7788d;
    transition: all 0.3s ease;
}

另外的修改复选框样式的方法，可参照下列博客：

本素材来自gitee，需要的可自行寻找或者私信，一起加油！