Connecting Link
接着上一篇文章https://www.jianshu.com/p/150e4cc523ce,所以这一篇叫做“HTML之再接再厉”。
首先先上做好的效果图:
再上我的代码图:
样式css
这一次我增加了一些不同的样式,比如:
<style type="text/css">
* 是一个通配符,意思是选中所有的。
*{margin: 0px;padding: 0} #意思是所有的边框距离定义为0
h2{color: green;} #颜色
div p{font-size: 14px;} /*父子选择符之间用空格隔开*/
.box2,.box3,.box4,.box5{width: 100px;height:100px;} /*群组选择器中类和id可以一起用*/
#id{width: 100px;height:100px;background: yellow;margin-bottom:1px;float: left;} 这个开头的#不是注释的意思
<div>标签的浮动:
<head>
<style>
.box2,.box3,.box4,.box5{width: 100px;height:100px;}
.box2{background: red;margin-bottom:1px;float: left;}
.box3{background: orange;margin-bottom:1px;float: left;}
</style></head>
<body>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
首页注册标签
<div>
<form action="" method="post" >
<div>
<label><b>user_name</b></label>
<input type="text" name="n">
</div>
<div>
<label><b>password</label>
<input type="password" name="pd">
</div>
<div>
<label><b>repeatpassword</b></label>
<input type="password" name="rpd">
</div>
<div>
<label><b>gender:</b></label>
<label for="male"><input type="radio" name="gender" id="male" value="1">男</label>
<label for="female"><input type="radio" name="gender" id="female" value="0">女</label>
<div>
<label><b>club:</b></label>
<input type="checkbox" name="hobits" value="1"> Robot Club
<input type="checkbox" name="hobits" value="2"> Learning Club
<input type="checkbox" name="hobits" value="3"> Comprtition Club
</div>