css部分:

1.行內元素垂直居中的設定:

(1) 設定父級元素的行高 line-height,和高度 height

? 原則:line-height=height
(2) 再設定行內元素的

? vertical-align: middle

2.頁頭,頁尾拼接

通常在開發中,都會有公共的頁面部分(不只是導航欄,頭部,尾頁等)

2.1拼接法則:

主頁面中,需要拼接的地方,加入以下代碼:

<iframe src="https://www.cnblogs.com/jsccc520/p/common/log_reg_top.html" height="60" scrolling="no" frameborder="no"></iframe>

? 引數解讀:

? src:要貼進來的頁面地址

? height:原頁面的高

? scrolling:取消滾輪

? frameborder:取消框架的邊緣線

2.2對應的css樣式:

iframe{
    /*變成塊級元素*/
    display: block;
    /*寬度100*/
    width: 100%;
}

如果嫌麻煩也可以寫在2.1的代碼里,這里作為抽取公共代碼角度把他抽出來,放在一個公共的css樣式里

3.圓角

3.1單詞

border-radius

3.2語法

1.div{border-radius:x[px]}

2.div{border-radius:x[px] x[px] x[px] x[px]}

js部分:

1.ajax語法

$.ajax({
                url :"",//跳轉到的url地址
                type:"",//請求方式  post/get
                dataType :"",//回傳來的資料型別
    			//需要傳遞的資料,以json格式,如:"userName":userName,"password":password
                //$("#edit").serialize():表單序列化.注意：必須存在name屬性,其他用法google
    			//作用:獲取id為edit的所有input標簽的值并自己轉入到物件中
    			data:{},
                async : true,//是否異步
                success:function (obj) {//成功的回呼函式,obj為傳回來的資料
                    if (obj!==null){
                        console.log(obj);
                   // Object { realName="金圣聰",  password="xxx",  id=1,  更多...}
                        //js中設定session,對應的取session是sessionStorage.getItem(key)
                        sessionStorage.setItem("realName",obj.realName);
                        sessionStorage.setItem("id",obj.id);
						//跳轉到主頁
                        location.href="https://www.cnblogs.com/jsccc520/p/main.html";
                    }else{
                        alert("登錄失敗!用戶名或密碼錯誤");
                    }
                },
                error:function () {//失敗執行的方法
                    alert("登錄失敗!用戶名或密碼錯誤");

                }
            })

2.判斷字串為空的方法

/**
 * 判斷字串為空
 * @param obj 需要判斷的字串
 * @returns {boolean} true 為空,false不為空
 */
function isEmpty(obj){
    return typeof obj === "undefined" || obj === null || obj === "";
}

3.截取地址欄的引數

//(很重要)截取地址欄上的引數,使用時,傳入的實參 用""括起來,比如http://XXXX?id=1,此時,傳入方法的實參就是 "id"
function getLocationParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    // alert(window.location.search);
    if (r != null) return unescape(r[2]); return null;
}

4.用反引號`(鍵盤`1`左邊的)`做字串拼接

var rightBottomStrHead = `
        <strong style="float: left">銷售資訊查詢:</strong>
         排序方式:&nbsp;
            <select name="condition">
                <option value="https://www.cnblogs.com/jsccc520/p/0">銷售日期</option>
                <option value="https://www.cnblogs.com/jsccc520/p/1">單筆總價</option>
            </select>
        <div style="float: right" >
           
        </div>
        `;

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/95317.html

標籤：Html/Css

上一篇：HTML學習 day04

下一篇：我和前端的猿糞，了解一下我眼中的前端。

css+js相關筆記