html、css 整理備忘 雜記

 

1：浮動

<div style="float: left">

2：清除浮動，把父div撐起來

<div style="clear:both"></div>

3：div的內容居中

<div align="center">XXX</div>

或<div style="text-align:center">  xxx </div>

4：內外邊距（邊框）

 

//淡灰色的邊框效果
border:2px solid #ededed;

 

 

---

 

5.0:div完美自適應動態上下左右居中，多用於信息提示框效果。

div
{
position:absolute;
width:500px;
height:260px;　　
top:50%;
left:50%;
margin-left:-250px;
height:-130px;
z-index:1000;
} 

　　文字居中：text-align:center; height:22px;line-height:22px;設置顯示文字的標籤的高和line-height的高同樣就好了！

 

5：讓3個DIV水平居中平均分配

                <table width="100%">
                    <tr>
                        <td>
                            <div style="float: left;">
                                <a href="xxx">
                                    <img src="xxx" style="width: 80px;">
                                    <div align="center">XXXX</div>
                                </a>
                            </div>
                        </td>
                        <td>
                            <div align="center">
                                <a href="xxx">
                                    <img src="xxx" style="width: 80px;">
                                    <div align="center">XXXXXX</div>
                                </a>
                            </div>
                        </td>
                        <td>
                            <div style="float: right">
                                <a href="xxx">
                                    <img src="xxx" style="width: 80px;">
                                    <div align="center">XXXXXX</div>
                                </a>
                            </div>
                        </td>
                           <div style="clear:both"></div>
                    </tr>
                </table>

 6：<span> 標籤被用來組合文檔中的行內元素

---

 

7：設置div的圓角

style="border:1px solid #0099FF; border-top-right-radius:22px;"

---

設置DIV爲圓形：

style="border-radius:50%;background-color:#4795FF;width:111px;height:111px;「

 

 

div自動換行：

　　white-space:normal; width:200px;

　　正常文字的換行(亞洲文字和非亞洲文字)元素擁有默認的white-space:normal,當定義的寬度以後自動換行

 

 

---

 

8：css設置字體大小

p {font-size:0.875em;}

---

 9：    //解決：手機輸入鍵盤彈出時，把底部固定的導航條頂上去的問題
    $('input').focus(function(){
        $('.navbar-fixed-bottom').hide();
    });

    $('input').blur(function(){
        $('.navbar-fixed-bottom').show();
    });

 

---

 10：Input標籤自定義屬性

<input type="text" name="s01" data_info="自定義數據信息" />  
獲取值：var id = $('#S01').attr('data-info');

 

 

---

 

 11： 如何讓div中的div處於右下角

<img style="position:absolute;right:0px;bottom:0px;" src="xxx"/>

// 相對於父級元素的絕對定位

 

 12：input 不保存輸入的緩存記錄

<input type="text" id="password" onfocus="this.type='password'" autocomplete="off"/>

     註釋：① autocomplete="off"　不讓瀏覽器記錄歷史輸入。

　　　　 ② 通常咱們都是將密碼框類型設置爲‘password’，如今咱們將它改成‘text’，在獲取焦點後再改變它的類型。（360兼容模式，不支持）

　　　　　　這樣瀏覽器就不會提示記住登錄了。

　　

 13：span 沒有固定的格式表現。當對它應用樣式時，它纔會產生視覺上的變化。 （無效果標籤  無用）

 　　

 

 

 

 

 

 

p {font-size:0.875em;}