A今天我学到了什么:
1.margin的一些小问题
//给子元素margin-top,父元素移动,子元素不移动
解决方案:
1.overflow:hidden;
2.给父元素设置伪元素:one:before{content";
display:table}
例子:
.one {
width: 300px;
height: 300px;
background-color: red;
/*overflow: hidden;*/
}
.one:before{
content: "";
display: table;
}
.two{
width: 100px;
height: 100px;
background-color: black;
margin-top: 50px;
}
//上面的元素margin-bottom和下面元素的margin-top会重合。
2.绝对路径和相对路径
//绝对路径:从盘符开始的路径
![](D:images/down.jpg)
相对路径:相对当前文件所在的路径
//同级路径:src: down.jpg
//下一级目录:src:images/down.jpg
//上一级目录:src:../down.jpg
2.HTML表单相关元素
2.1一个登录页面
例子:
<form>
<p><label for="">账号</label><input type="text" placeholder="搜索/手机号码"/></p>
<p><label for="">密码</label><input type="password"/></p>
<p><label for=""></label><input type="submit"/></p>
</form>
//定义和用法:
<label>标签为input元素标记。
label元素不会向用户呈现任何特殊效果,不过,他为鼠标用户改进了可用性。
如果您在label元素内点击文本,就会触发此控件。
label标签的for属性应当与相关元素的id属性相同。
2.2单选框
<d单选框需要给一样的name名>
例子:
<p>
<label>男</label><input type="radio" name="sex" />
<label>女</label><input type="radio" name="sex" checked="checked"/>
</p>
2.3复合选框
例子:
<p>
<label for="">篮球</label><input type="checkbox"/>
<label for="">破气球</label><input type="checkbox"/>
<label for="">足球</label> <input type="checkbox "/>
</p>
2.4下拉选框
例子:
<select>
<option value="">洪山区</option>
<option value="">青山区</option>
<option value="">武昌区</option>
2.5预选的下拉选框
//在想要的option上加上select这个属性
例子:
<select>
<option value="">洪山区</option>
<option value="" selected>青山区</option>
<option value="">武昌区</option>
<textarea name="" id="" cols="30" rows="10"></textarea>
</select>
2.6文本域
<textarea placeholder="看点槽点,不吐不快!别憋着,马上大声说出来吧!“></textarea>
 空格
2.7标签之间的相互转换
display:inline/block/inline/-bolck
2.8display和visiblity的区别
display:none;
//显示为没有
visibility:hiden/visible;
//可见度
visibility:hiden
//事物存在,但是隐藏了
visibility:visible
//事物可以看见
2.9雪碧图
例子:
讲解登录框下面的几个icon.
span{
width:19px;
height:19px;
background:#ccc url(images/icons-sype.png");
background-position:-19px. 0;
}
B我掌握了什么
1.margin的一些小问题
//给子元素margin-top,父元素移动,子元素不移动
解决方案:
1.overflow:hidden;
2.给父元素设置伪元素:one:before{content";
display:table}
*{margin: 0;padding: 0;}
.one {
width: 300px;
height: 300px;
background-color: red;
/*overflow: hidden;*/
}
.one:before{
content: "";
display: table;
}
.two{
width: 100px;
height: 100px;
background-color: black;
margin-top: 50px;
}
>###2.1一个登录页面
例子:
<form>
<p><label for="">账号</label><input type="text" placeholder="搜索/手机号码"/></p>
<p><label for="">密码</label><input type="password" placeholder="密码"/></p>
<p><label for=""></label><input type="submit"/></p></form>
<label>标签为input元素标记。
label元素不会向用户呈现任何特殊效果,不过,他为鼠标用户改进了可用性。
如果您在label元素内点击文本,就会触发此控件。
label标签的for属性应当与相关元素的id属性相同。
2.2单选框
<d单选框需要给一样的name名>
例子:
<p>
<label>男</label><input type="radio" name="sex" />
<label>女</label><input type="radio" name="sex" checked="checked"/>
</p>
2.3复合选框
例子:
<p>
<label for="">篮球</label><input type="checkbox"/>
<label for="">破气球</label><input type="checkbox"/>
<label for="">足球</label> <input type="checkbox "/>
</p>
2.4下拉选框
例子:
<select>
<option value="">洪山区</option>
<option value="">青山区</option>
<option value="">武昌区</option>
2.5预选的下拉选框
//在想要的option上加上select这个属性
例子:
<select>
<option value="">洪山区</option>
<option value="" selected>青山区</option>
<option value="">武昌区</option>
<textarea name="" id="" cols="30" rows="10"></textarea>
</select>
2.6文本域
<textarea placeholder="看点槽点,不吐不快!别憋着,马上大声说出来吧!“></textarea>
C我没有掌握什么
//上一级目录:src:../down.jpg
2.7标签之间的相互转换
display:inline/block/inline/-bolck
2.8display和visiblity的区别
display:none;
//显示为没有
visibility:hiden/visible;
//可见度
visibility:hiden
//事物存在,但是隐藏了
visibility:visible
//事物可以看见
2.9雪碧图
例子:
讲解登录框下面的几个icon.
span{
width:19px;
height:19px;
background:#ccc url(images/icons-sype.png");
background-position:-19px. 0;
}