Html使用要注意哪些細(xì)節(jié)

這篇文章主要介紹了 Html使用要注意哪些細(xì)節(jié)的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇 Html使用要注意哪些細(xì)節(jié)文章都會(huì)有所收獲，下面我們一起來看看吧。

html技巧
1.防止盒子透出的解決辦法
    overflow：hidden；float不為none；display：inline-block；
    position不為static&relative
    給父類加一個(gè)border-top：1px solid transparernt；

2.內(nèi)聯(lián)塊的vertical-align是基于父元素的中線位置
在一個(gè)div內(nèi)有一個(gè)span一個(gè)input則不對(duì)齊
給input設(shè)置vertical-align：top；則對(duì)齊；

3.button高度設(shè)置的是總高度border默認(rèn)2px；
如果height設(shè)置45px；則內(nèi)容高度為41px；border一共4px
如果要總高度都為45px
那么input高度hight設(shè)置43px border 1px solid gray
button則設(shè)置height設(shè)置45px

4.內(nèi)容超出覆蓋div底邊框
.text-line{
     height: 0.5em;text-align: center;
     border-bottom: 1px solid red;}
.text-line>a{margin:0 10px;padding:0 10px;
     background-color: white;}

5.如何在文字之間加一個(gè)丨例如 ：登錄丨注冊(cè)
原理給注冊(cè)一個(gè)border-left:1px solid gary;padding-left:1em;
div>span{border-left:2px solid grey;
         padding-left: 1em; margin-left: -16px;}
<div>
    <span>注冊(cè)</span>
</div>

6.如何加一個(gè)小三角形
原理只有border并且所需要的border顯示顏色
    position: absolute;
    content:"";top: 50%;right: -1em;
    border:5px solid transparent;
    border-top-color: red;

7.二級(jí)導(dǎo)航
要用到定位

8.2D轉(zhuǎn)換
    默認(rèn)情況下所有元素都是以自己的中心點(diǎn)作為參考
來旋轉(zhuǎn)的，我們可以通過形變中心點(diǎn)屬性來修改它的
參考點(diǎn) transform-origin：具體像素/百分比
       第一個(gè)參數(shù)：水平方向
       第二個(gè)參數(shù)：垂直方向
       transform-origin:0px 0px；左上角為中心點(diǎn)
     transform-origin：left top；左上角


9.翻轉(zhuǎn)菜單
.two_nav{position:absolute;
    width: 6em;left: -10px;}
.two_nav>li{background-color: black;
    transform: rotateY(180deg);
    transition: all 0.5s;
    opacity: 0;}
.triangle:hover .two_nav>li{
    transform:none;
    opacity: 1;}
.triangle:hover .two_nav>li:nth-child(1){
    transition-delay: 200ms;}
.triangle:hover .two_nav>li:nth-child(2){
    transition-delay: 300ms;}
.triangle:hover .two_nav>li:nth-child(3){
    transition-delay: 400ms}
.triangle:hover .two_nav>li:nth-child(4){
    transition-delay: 500ms;}
.triangle .two_nav>li:nth-child(4){
    transition-delay: 200ms;}
.triangle .two_nav>li:nth-child(3){
    transition-delay: 300ms;}
.triangle .two_nav>li:nth-child(2){
    transition-delay: 400ms;}
.triangle .two_nav>li:nth-child(1){
    transition-delay: 500ms;}

<span class="triangle">
    <a href="#">游戲中心</a>
    <ul class="two_nav">
        <li>直播</li>
        <li>拜年祭</li>
        <li>游戲中心</li>
        <li>玩家中心</li>

關(guān)于“ Html使用要注意哪些細(xì)節(jié)”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“ Html使用要注意哪些細(xì)節(jié)”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。