day05

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>

&nbsp空格

2.7标签之间的相互转换

display：inline/block/inline/-bolck

2.8display和visiblity的区别

display:none;
//显示为没有

visibility:hiden/visible;
//可见度
visibility：hiden
//事物存在，但是隐藏了
visibility:visible
//事物可以看见

2.9雪碧图

image.png

例子：

讲解登录框下面的几个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雪碧图

image.png

例子：

讲解登录框下面的几个icon.
span{
        width:19px;
        height:19px;
        background:#ccc url(images/icons-sype.png");
        background-position:-19px. 0;
     }