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元素不會向用戶呈現(xiàn)任何特殊效果,不過,他為鼠標用戶改進了可用性。
如果您在label元素內(nèi)點擊文本,就會觸發(fā)此控件。
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="">洪山區(qū)</option>
    <option value="">青山區(qū)</option>
    <option value="">武昌區(qū)</option>

2.5預選的下拉選框

//在想要的option上加上select這個屬性
例子:
<select>
    <option value="">洪山區(qū)</option>
    <option value="" selected>青山區(qū)</option>
    <option value="">武昌區(qū)</option>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</select>

2.6文本域

<textarea  placeholder="看點槽點,不吐不快!別憋著,馬上大聲說出來吧!“></textarea>

&nbsp空格

2.7標簽之間的相互轉(zhuǎn)換

display:inline/block/inline/-bolck

2.8display和visiblity的區(qū)別

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元素不會向用戶呈現(xiàn)任何特殊效果,不過,他為鼠標用戶改進了可用性。
如果您在label元素內(nèi)點擊文本,就會觸發(fā)此控件。
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="">洪山區(qū)</option>
    <option value="">青山區(qū)</option>
    <option value="">武昌區(qū)</option>

2.5預選的下拉選框

//在想要的option上加上select這個屬性
例子:
<select>
    <option value="">洪山區(qū)</option>
    <option value="" selected>青山區(qū)</option>
    <option value="">武昌區(qū)</option>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</select>

2.6文本域

<textarea  placeholder="看點槽點,不吐不快!別憋著,馬上大聲說出來吧!“></textarea>

C我沒有掌握什么

//上一級目錄:src:../down.jpg

2.7標簽之間的相互轉(zhuǎn)換

display:inline/block/inline/-bolck

2.8display和visiblity的區(qū)別

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;
     }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • 1、margin的一些小問題 1.1給子元素設置margin-top:父元素移動,子元素不移動 2種解決方式 例子...
    陳夢晴閱讀 239評論 1 0
  • A.我今天學到了什么 一.margin的一點小問題 1.給子元素margin-top:父元素移動,子元素不移動 解...
    孔子曰_f425閱讀 167評論 0 0
  • 今天學了什么 1.margin的BUG MARGIN -(TOP/ BOTTOM)的 bug 2讀取路徑 絕對...
    喑啞先生閱讀 329評論 0 0
  • 我今天學會了 1,0:margin的一點小問題 1。給子元素margin-top:父元素移動,子元素不移動 2.上...
    613桑閱讀 155評論 0 0
  • 今天學了什么 1.margin的一點小問題 2.絕對路徑和相對路徑 3.HTML表單相關元素 4單選框 5復合選框...
    a5033edd03f9閱讀 235評論 0 0