HTML_exertion

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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容