css+js相關筆記

来源:https://www.cnblogs.com/jsccc520/archive/2019/11/28/11953130.html
-Advertisement-
Play Games

1.內聯元素垂直居中的設置; 2.頁頭,頁尾拼接; 3.圓角; 1.ajax語法; 2.判斷字元串為空的方法; 3.截取地址欄的參數; 4.用反引號(鍵盤1左邊的)做字元串拼接 ...


作者:故事我忘了c
個人微信公眾號:程式猿的月光寶盒

css部分:

1.內聯元素垂直居中的設置:

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

​ 原則:line-height=height

(2) 再設置內聯元素的

​ vertical-align: middle

2.頁頭,頁尾拼接

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

2.1拼接法則:

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

<iframe src="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="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.截取地址欄的參數

//(很重要)截取地址欄上的參數
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="0">銷售日期</option>
                <option value="1">單筆總價</option>
            </select>
        <div style="float: right" class="rightBottomStrHead">
           
        </div>
        `;

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 生命周期感知組件可以感知其他組件的生命周期,例如 Activity,Fragment等,以便於在組件的生命周期狀態變化時做出相應的操作。支持生命感知的組件可以幫你更好的組織代碼,讓你的代碼更輕,更好維護。 ...
  • 靜態載入好後的界面如下,兩個碎片分別位於一個活動的左邊和右邊: 左邊和右邊分別為一個碎片,這兩個碎片正好將一整個活動佈滿。一個活動當中可以擁有多個碎片,碎片的含義就是可以在同一個UI界面下,將這個界面分成好幾個界面,並且可以分別更新自己的狀態,如果沒有碎片,那麼如果你想要單獨在某一個區域實現活動的“ ...
  • 這篇文章旨在學習如何在現有的Android原生項目上集成Flutter,實現Android與Flutter的混編,文章主體內容分為5部分,如下: Android項目如何集成FlutterModule Flutter視圖是如何展示到前臺界面的 Flutter與Weex... ...
  • 9. 圖層時間 圖層時間 時間和空間最大的區別在於,時間不能被覆用 -- 弗斯特梅里克 在上面兩章中,我們探討了可以用CAAnimation和它的子類實現的多種圖層動畫。動畫的發生是需要持續一段時間的,所以計時對整個概念來說至關重要。在這一章中,我們來看看CAMediaTiming,看看Core A ...
  • 一、scrcpy簡介 註意:拼寫是scrcpy,非Python爬蟲框架Scrapy。 scrcpy可以通過adb調試的方式來將手機屏幕投到電腦上,並可以通過電腦控制您的Android設備。它可以通過USB連接(初次必須),也可以通過Wifi連接(通過TCP / IP,類似於隔空投屏),而且不需要任何 ...
  • 未經允許,禁止🚫轉載,轉載請註明出處:https://www.cnblogs.com/YyyyQ/p/11941537.html 第1步:WIN+R輸出cmd進入命令行 找到JDK安裝路徑進入bin文件夾 第2步:輸入 keytool.exe -list -keystore 加 debug.key ...
  • 作為一個自學前端的靚仔(小白),最開始在我的世界中是沒有前端這個概念的,相當長一段時間內,我一直把前端稱之為「做網站」,是不是有點飄? 1、我眼中的前端 點進來了這篇文章,應該會對前端稍微有那麼一點點瞭解。 高大上一點說:我所見,我所得,皆為前端;大白話:嗯,就是“做網站”的。至於專業的定義,相信搜 ...
  • 一個簡單的Demo,快速瞭解 React.Component 和 React.PureComponent的區別;只需複製代碼就可以看到效果; ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...