html5快速入門（二）

来源:http://www.cnblogs.com/miaomiaoshen/archive/2016/06/14/5585938.html
-Advertisement-
Play Games

前言： 1.HTML5的發展非常迅速，可以說已經是前端開發人員的標配，在電商類型的APP中更是運用廣泛，這個系列的文章是本人自己整理，儘量將開發中不常用到的剔除，將經常使用的拿出來，使需要的朋友能夠真正快速入門，如果有哪些不清楚的地方或者錯誤，歡迎聯繫我 2.更新時間沒有規律，一般會在3天左右更新一 ...


前言：

1.HTML5的發展非常迅速，可以說已經是前端開發人員的標配，在電商類型的APP中更是運用廣泛，這個系列的文章是本人自己整理，儘量將開發中不常用到的剔除，將經常使用的拿出來，使需要的朋友能夠真正快速入門，如果有哪些不清楚的地方或者錯誤，歡迎聯繫我
2.更新時間沒有規律，一般會在3天左右更新一篇（全系列預計會有12篇）因為需要工作，所以只能在閑暇之餘整理，如果有喜歡的朋友可以關註我，將會第一時間獲得更新信息
3.如果有需要Reactive Native + H5跨平臺開發的朋友，可以聯繫我，在本系列結束之前會根據需求的程度決定是否繼續
4.全系列文章最後儘可能地附上綜合實例，幫助朋友更好地理解
5.此系列會涉及到HTML、CSS、JavaScript等

CSS簡介

  • CSS(Cascading Style Sheets)：層疊樣式表，它用來控制HTML標簽的樣式，在美化網頁中起到非常重要的作用
  • CSS的編寫格式是鍵值對的形式
    • 格式：屬性名 : 屬性值


    
color:blue;
background-color:green;
font-size:15px;

CSS的3種使用形式

  • 行內樣式（內聯樣式）：在標簽的style屬性中書寫（標簽都有style屬性）


    <!-- 行內樣式 -->
<!-- 字體大小為25,顏色綠色,背景色亮灰 -->
<div style="font-size: 25px; color: green; background-color: lightgrey;">div容器</div>
<!-- 字體顏色藍色,邊框寬度為1且為黑色 -->
<h2 style="color: blue;border: 1px double black;">Cascading Style Sheets</h2>

    效果：
    行內樣式.png

  • 業內樣式：在本網頁的style標簽中書寫（因為body標簽用來描述內容和結構，其它東西都放到head中,所以將業內樣式寫在head標簽內）

        <head>
    <meta charset="UTF-8">
    <title>CSS頁內樣式</title>
    <!-- 頁內樣式 -->
    <style>
        /* 標簽選擇器 */
        /* div文字顏色為藍色,字體大小25,邊框為紅色單邊框 */
        div{
            color: blue;
            font-size: 25px;
            border:2px solid red;
        }
        /* p文字顏色為橘色,字體17,邊框為紫色雙邊框寬度為5 */
        p{
            color: orange;
            font-size: 17px;
            border:5px double blueviolet;
        }
    </style>
    </head>
    <body>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
    </body>

    效果：

業內樣式.png

  • 外部樣式：在單獨的CSS文件中書寫，然後在網頁中用link標簽進行引用
    - 先新建一個css文件，在css文件內書寫我們需要的樣式


    ```
div{
    color: blue;
    font-size: 25px;
    border:2px solid red;
}

p{
    color: orange;
    font-size: 17px;
    border:5px double blueviolet;
    }

```
- 然後引入外部樣式
<br><br>

```

    <head>
        <meta charset="UTF-8">
        <title>CSS外部樣式</title>
        <!-- 引入外部樣式 -->
        <link rel="stylesheet" href="css/index.css">
    </head>

    <body>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
    </body>

```

    效果：
    外部樣式.png

註意：開發中，一般都使用外部樣式,結構比較清晰

CSS常用選擇器

  • 屬性：通過屬性的複雜疊加，才能做出漂亮的網頁
  • 選擇器：通過選擇器找到對應的標簽設置樣式
    • 標簽選擇器：根據標簽名找到對應的標簽


    
<style>
    /* 標簽選擇器 */
    /* div文字顏色為藍色,字體大小25,邊框為紅色單邊框 */
    div{
        color: blue;
        font-size: 25px;
        border:2px solid red;
    }
</style>

    • 使用場景：一次性設置對應標簽的時候

    • 類選擇器


        /* 類選擇器 */
    .test1{
        color: red;
        font-size: 30px;
        border:5px double green;
    }
    • 使用


    <div class="test1">類選擇器</div>
<p class="test1">類選擇器</p>

    • 使用場景：讓需要它的標簽主動去使用它

    • id選擇器


        /* ID選擇器 */
    #main{
        font-size: 50px;
    }
    • 使用：


    <div id="main">id選擇器</div>

    • 使用場景：全局只讓一個標簽占有（獨一無二）

    • 併列選擇器（可以理解為或）


        /* 併列選擇器(或) */
    #main, .test1{
        border:10px solid orange;
    }

    • 使用場景：只要有其中一個選擇器就可以使用選擇器內的樣式

    • 複合選擇器（可以理解為且）


        /* 複合選擇器(且,前面不可以是ID選擇器) */
    p.test1{
      color: yellow;
    }

    • 使用場景：同時擁有2個選擇器的標簽便可以使用選擇器內的樣式

    • 後代選擇器


        /* 後代選擇器 
    前面為父標簽，後面為子標簽
    */
    div a{
        color: darkgray;
    }

    • 使用場景：設置父標簽內的所有子標簽（包括子標簽內的相同標簽的子標簽）的時候

    • 直接後代選擇器


        /* 直接後代選擇器 */
    div > p{
        font-size: 90px;
    }

    • 使用場景：設置父標簽的子標簽的時候

    • 偽類


    input:focus{ /* 獲得焦點 */

}

    • 使用場景：當標簽激活焦點的時候觸發

    • 偽元素：和偽類使用相似


    div.test1:first-letter{

}

CSS不常用選擇器

  • 相鄰兄弟選擇器：與標簽上下相鄰的同一級標簽
div + p{

}

註意條件：相鄰，且同一級

  • 屬性選擇器：可以將其看成數組（一維/二維數組）
div[name]{

}

div[name="Tom"]{

}

div[name][age]{

}
  • 通配符：設置所有標簽
*{
    
}

選擇器的優先順序與權值的關係

  • 相同級別的選擇器遵循：就近原則 > 疊加原則
  • 不同類型的選擇器：選擇器的針對性越強，它的優先順序就越高，這裡涉及到權值的問題，先來看下麵的表
選擇器類型 權值
通配選擇符 0
標簽選擇器 1
類選擇器 10
屬性選擇器 10
偽類 10
偽元素 1
id選擇器 100
important 1000
  • 原則：選擇器的權值累計越高，優先順序越高，如果權值相同，後定義的優先（就近原則）
  • 優先順序排序：important > 內聯 > id選擇器 > 類選擇器 > 標簽選擇器|偽類|屬性選擇 > 偽元素 > 通配符 > 繼承

HTML標簽類型

  • HTML有N多標簽，根據顯示的類型，主要分為三大類
    • 塊級標簽：獨占一行，能隨時設置寬度和高度（如：div、p、h1…h6、ul、li）


    <style>
    /* div標簽選擇器 */
    div{
        /*背景色*/
        background-color: yellow;
    }
</style>

<body>

    <div>我是div容器</div>
    <div>我是div容器</div>
    <div>我是div容器</div>

</body>

    效果：
    塊級標簽.png

    • 行內標簽（內聯標簽）：多個行內標簽能同時顯示在一行，寬度高度取決於內容尺寸（如：span、a、label）


    <style>
    /* span標簽選擇器 */
    span{
        /*背景色*/
        background-color: red;
    }
</style>

<body>

    <span>我是span容器</span>
    <span>我是span容器</span>
    <span>我是span容器</span>
    <span>我是span容器</span>

</body>

    效果：
    行內標簽.png

    • 行內-塊級標簽（內聯-塊級標簽）：多個行內-塊級標簽可顯示在同一行，能隨時設置寬度和高度（如：input、button）


[Uploading Snip20160614_7_103697.png . . .]

```
<style>
     /* input標簽選擇器 */
    input{
        /*背景色*/
        background-color: yellow;
    }
</style>

<body>

    <input type="text">
    <input type="date">
    <input type="text">
    <input type="date">

</body>

```
效果：

行內-塊級標簽.png

修改標簽的顯示類型 —— display/visibility

  • 在開發中，我們經常需要將各種類型的標簽拼湊在一起，而如果按照上面標簽的類型來看，顯然塊級標簽後就沒辦法再添加其他標簽，這樣也就大大降低了靈活性。這個時候我們就需要來看看`display屬性，它們可以用來修改標簽的顯示類型，提高標簽之間拼湊時的靈活性
  • display屬性有4個值
    • none：隱藏標簽（同時隱藏內容和占位，也可以說同時隱藏結構）
    • block：讓標簽變為塊級標簽
    • inline：讓標簽變為行內標簽
    • inline-block：讓標簽變為行內-塊級標簽（內聯-塊級標簽）


            div{
        /*設置背景色*/
        background-color: red;
    }

    /* 隱藏 */
    .noneDiv{
        display: none;
        /*設置背景色*/
        background-color: yellow;
    }

    /* 塊級 */
    .blockInput{
        display: block;
        /*設置背景色*/
        background-color:orange;
    }

    /* 行內 */
    .inlineDiv{
        display: inline;
        /*設置背景色*/
        background-color: green;
    }

    /* 行內-塊級 */
    .inline-blockDiv{
        display: inline-block;
        /*設置背景色*/
        background-color: gray;
    }

</style>

<body>

    <div>預設的div</div>
    <div class="noneDiv">隱藏div標簽</div>
    <div class="inlineDiv">變成行內標簽的div</div>
    <div class="inline-blockDiv">變成行內-塊級標簽的div</div><br><br>

    <!--預設的input-->
    <input type="text">
    <input type="text">
    <!--變成塊級標簽的input-->
    <input class="blockInput" type="text">
    <input class="blockInput" type="text">

</body>

    效果：
    display使用.png

  • visibility屬性有4個值
    • visible：顯示標簽（預設）
    • hidden：隱藏標簽（只隱藏內容，但是依舊占位）
    • collapse：這個屬性主要用在表格中，它可以刪除一行或一列，但不會影響表格的佈局，而且被行或列占據的空間會留給其他內容，如果用在其他標簽，則呈現hidden的效果
    • inherit：規定應該從父標簽繼承visibility屬性的值


        <style>
    div{
        /*高*/
        height:100px;
        /*背景色*/
        background-color: yellow;
    }

    /* 隱藏 */
    .hiddenDiv{
        visibility: hidden;
    }
    </style>

    <body>
        <div>div</div>
        <div class="hiddenDiv">隱藏的div</div>
        <div>div</div>
    </body>

    效果：
    visibility使用.png

CSS屬性分類

  • CSS有很多屬性，如果根據繼承性劃分，主要分為兩大類
    • 可繼承屬性：父標簽的屬性值會傳遞給子標簽（一般是文字控制屬性）
      • 所有標簽可繼承（visibility、 cursor）
      • 繼承（letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction）
      • 塊級標簽可繼承（text-indent、text-align）
      • 列表標簽可繼承（list-style、list-style-type、list-style-position、list-style-image）


    <style>
    /* 文字控制類 */
    body{
        color:red;
        font-size:25px;
    }
</style>
    • 不可繼承屬性：父標簽的屬性值不會傳遞給子標簽（一般是區塊控制屬性）


    <style>
    /* 區塊控制類 */
    div{
        color:red;
        font-size:25px;
    }
</style>
  • 總結：一般如果是大小、形狀之類的一般都不可繼承的

盒子模型

  • 先來看看盒子裡面的結構 —— 盒子由內容、內邊距、邊框、外邊距構成
    參考盒子模型.png
  • 標準的盒子模型標準是這樣的
    標準盒子模型.png
  • 如果所有瀏覽器都遵循這樣的規則，那麼就不會產生適配等問題，但是偏偏有個頑皮的熊老人（這個攪屎棍→ →）搞了自己的模型標準
    IE盒子模型.png
  • 也就是說網頁上的每一個標簽都是盒子，每個盒子都有4個屬性
    • content（內容）：盒子裡面裝的東西（網頁中通常是指文字和圖片）
      • height：設置元素高度
      • max-height:設置元素最大高度
      • max-width：設置元素的最大寬度
      • width：設置元素寬度
      • min-height：設置元素最小高度
      • min-width：設置元素最小寬度
    • padding（填充，內邊距）
      • padding：在一個聲明中設置所有內邊距屬性
      • padding-top:設置元素的上內邊距
      • padding-right：設置元素的右內邊距
      • padding-bottom：設置元素的下內邊距
      • padding-lfet：設置元素的左內邊距


    <style>
    div{
        /*這邊直接使用複合屬性padding:屬性順序為上\右\下\左(順時針)如果只設置2個值,那麼第一個值指上下,第二個值指左右*/

        padding: 25px 20px;
        /*背景顏色*/
        background-color: blue;
    }      
</style>

<body>
    <div>div標簽div標簽</div>  
</body>

    效果：
    內邊距使用.png

    • margin（外邊距）：讓盒子與盒子之間保留一定空隙
      • margin：在一個聲明中設置所有外邊距屬性
      • margin-top:設置元素的上外邊距
      • margin-right：設置元素的外邊邊距
      • margin-bottom：設置元素的下外邊距
      • margin-lfet：設置元素的左外邊距


    <style>
    div{
        /*外邊距和內邊距相似*/
        margin: 30px 40px;

        /*背景顏色*/
        background-color: darkmagenta;
    }

</style>

<body>
    <div>div標簽div標簽</div>
</body>

    效果：
    外邊距使用.png

    • border（邊框）：盒子本身
      • border是個複合屬性，屬性的順序是（border-width，border-style，border-color）


    <style>
    div{
        /*邊框設置 寬21px 雙框 紅色*/
        border: 20px double red;
    }
</style>

<body>
<div>div標簽div標簽</div>
</body>

    效果：
    邊框設置.png

CSS3新特性

  • RGBA透明度：RGB(紅色R+綠色G+藍色B),RGBA則在其基礎上增加了Alpha通道，用來設置透明值
    <style>
        div{
            /*設置寬高*/
            width: 200px;
            height: 50px;
        }

        .test1{
            background-color: rgba(123,0,0,1.0);
        }
        .test2{
            background-color: rgba(123,0,0,0.8);
        }
        .test3{
            background-color: rgba(123,0,0,0.0);
        }
        .test4{
            background-color: rgba(123,0,0,0.6);
        }
        .test5{
            background-color: rgba(123,0,0,0.4);
        }
        .test6{
            background-color: rgba(123,0,0,0.2);
        }
    </style>
    
    <body>
        <div class="test1">div1.0</div>
        <div class="test2">div0.8</div>
        <div class="test3">div0.0</div>
        <div class="test4">div0.6</div>
        <div class="test5">div0.4</div>
        <div class="test6">div0.2</div>
    </body>

效果：
CSS3.0透明度新特征.png

補充：既然有透明度，那麼就有不透明度（最簡單的蒙版效果）

    <style>
        div {
            /*設置寬高*/
            width: 200px;
            height: 50px;
            /*設置背景色*/
            background-color: red;
            /*設置不透明度*/
            opacity:0.35;
        }
    </style>
    
    <body>
        <div>div1.0</div>
    </body>

效果：
不透明度設置.png

  • 塊陰影和圓角陰影：box-shadow text-shadow
    值描述.png
    <style>
        div {
            /*設置寬高*/
            width: 200px;
            height: 50px;
            /*設置背景色*/
            background-color: red;
            
            /*設置外邊距*/
            margin: 20px;

            /*設置塊陰影
             參數一:水平偏移
             參數二:垂直偏移
             參數三:模糊距離
             參數四:陰影顏色
            */
            box-shadow: 10px 10px 10px blue;
        }
    </style>
    
    <body>
        <div>div</div>
        <div>div</div>
        <div>div</div>
        <div>div</div>
        <div>div</div>
    </body>

效果：
塊陰影效果.png

  • 圓角：border-radius
    <style>
        div {
            /*設置寬高*/
            width: 200px;
            height: 50px;
            /*設置背景色*/
            background-color: red;
            /*設置外邊距*/
            margin: 20px;
        }
        .test1{
            /*底部左邊*/
            border-bottom-left-radius: 30px;
        }
        .test2{
            /*頂部右邊*/
            border-top-right-radius: 30px;
        }
        .test3{
            /*底部右邊*/
            border-bottom-right-radius: 30px;
        }
        .test4{
            /*頂部左邊*/
            border-top-left-radius: 30px;
        }
        .test5{
            /*四個角*/
            border-radius: 10px;
        }
    </style>

    <body>
        <div class="test1">div</div>
        <div class="test2">div</div>
        <div class="test3">div</div>
        <div class="test4">div</div>
        <div class="test5">div</div>
    </body>

效果：
圓角的使用.png

  • 邊框圖片：border-image(不常用，用到再說)
  • 形變：transform: none | []（後面結合實例，便於理解）

CSS佈局

  • 預設情況下，所有網頁標簽都在標準流佈局中（從上往下，從左往右，相互依賴）
  • 脫離標準流（就是固定在一個地方），脫離標準流主要的兩種方式有兩種
  • 註意：標簽只要一浮動，它的類型就會被強制轉為行內塊級標簽
    • float屬性：讓標簽浮動在父標簽的左邊和右邊（顯然不夠靈活）
      • left：浮動在父標簽的最左邊
      • right：浮動在父標簽的最右邊


    <style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
    }

    .test1{
        background-color: red;

        float: left;
    }
    .test2{
        background-color: blue;

        float: right;
    }
</style>

<body>
    <div id="main">
    <div class="test1">左</div>
    <div class="test2">右</div>
    </div>
</body>
    效果：
    float使用.png
    • position屬性：結合left、right、top、bottom屬性就不一樣了（顯然這個比較厲害）
    • 註意：他的位置是相對於瀏覽器視窗來決定的
      position值描述.png


    <style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
    }

    .test1{
        background-color: red;

        position: absolute;
        top: 20px;
        left: 20px;
    }
    .test2{
        background-color: blue;

        position: absolute;
        bottom: 20px;
        right: 20px;
    }
</style>

<body>
    <div id="main">
        <div class="test1">左</div>
        <div class="test2">右</div>
    </div>
</body>
    效果：
    position使用.png

居中

  • 水平居中
    • 如果是行內、行內塊級標簽，設置text-align: center;


    <style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
        /*設置內容水平居中(可繼承)*/
        text-align: center;
    }

    span{
        background-color: blue;
    }
</style>

<body>
    <div id="main">
        <span>行內標簽</span>
    </div>
</body>
    效果：
    行內標簽水平居中.png
    • 如果是塊級標簽，則需設置 margin: 0 auto;


    <style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
        /*設置內容水平居中(可繼承)*/
        text-align: center;
    }

    .test1{

        width: 200px;
        background-color: blue;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        /*或者*/
        /*margin: 0 auto;*/
    }
</style>

<body>
    <div id="main">
        <div class="test1">塊級標簽</div>
    </div>
</body>
    效果：
    塊級標簽水平居中.png
  • 垂直居中
    • 如果是行內、行內塊級標簽，設置line-height:總高度;


    <style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
        /*設置內容水平居中(可繼承)*/
        text-align: center;
    }

    .test1{
        width: 350px;
        height: 30px;
        background-color: blue;

        /*設置垂直居中,讓它等於父標簽的高度*/
        line-height: 200px;
    }
</style>

<body>
    <div id="main">
        <span class="test1">行內標簽</span>
    </div>
</body>
    效果：
    行內標簽垂直居中.png
    • 如果是塊級標簽，需要通過定位來做（一般不會將塊級標簽做垂直居中操作）


    <style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
        /*設置內容水平居中(可繼承)*/
        text-align: center;
        /*告訴父標簽使用絕對定位*/
        position: relative;
    }

    .test1{
        width: 200px;
        height: 30px;
        background-color: blue;

        /*重寫,設置內容居中*/
        line-height: 30px;
        margin: 0 auto;
        /*設置相對路徑*/
        position: absolute;
        top:50%;
        left:50%;
        /*平移使其與父標簽居中顯示*/
        transform: translate(-50%, -50%);
    }
</style>

<body>
    <div id="main">
        <span class="test1">行內標簽</span>
    </div>
</body>
    效果：
    塊級標簽垂直居中.png

昨晚的文章不完整，這個才是第二篇的完整版，對造成的不便感到抱歉，綜合實例單獨做一篇吧！


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

-Advertisement-
Play Games
更多相關文章
  • Redis PHP連接操作
    安裝 要在PHP程式中使用Redis，首先需要確保 Redis 的PHP驅動程式和 PHP 安裝設置在機器上。可以查看 PHP教程 教你如何在機器上安裝PHP。現在，讓我們來看看一下如何設置 Redis 的PHP驅動程式。 需要從 github 上資料庫： https://github.com/ni ...
  • Redis使用詳細教程
    一、Redis基礎部分: 1、redis介紹與安裝比mysql快10倍以上 *****************redis適用場合**************** 1.取最新N個數據的操作 2.排行榜應用,取TOP N 操作 3.需要精確設定過期時間的應用 4.計數器應用 5.Uniq操作,獲取某段時 ...
  • python新手中常見疑惑及解答
    python新手經常會犯的錯誤小結，有匿名函數lambda的理解，一個元素的元組，模塊導入，參數傳遞是可變的還是不可變的，迭代器和生成器的理解 ...
  • 設計模式之組合模式
    當需求中是體現部分與整體層次的結構時，以及你希望忽略組合對象與單個對象的不同，統一的使用組合結構中的所有對象時，就應該考慮使用組合模式了。例如：我們單個複製一個文件和多個複製文件，對我們而言，並不在乎一個文件的複製與多個文件複製的區別，也就是我們的操作是一樣的。 下麵的代碼是建立一個公司的組織結構， ...
  • uml入門之14圖與圖之間的關係
    1.先奉上整理的14圖。 2.其次奉上整理的圖之間的6種關係 ...
  • 解析JavaScript中apply和call以及bind
    函數調用方法 在談論JavaScript中apply、call和bind這三兄弟之前，我想先說下，函數的調用方式有哪些： 作為函數 作為方法 作為構造函數 通過它們的call()和apply()方法間接調用 前面的三種調用方法，我們都知道且不在這篇文章的討論範圍內，就不說了。 下麵我們來說說這第四種 ...
  • HTML的奇葩嵌套規則
    1、塊級元素 一般用來搭建網站架構、佈局、承載內容……它包括以下這些標簽： address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、 ...
  • css相容性問題及一些常見問題彙總
    目前主流瀏覽器的相容性做的都比較好了，本文主要針對IE6，7的不相容問題進行解決。 1.有浮動存在時，計算一定要精確，不要讓內容的寬高超出我們所設置的寬高，IE6下，內容會撐開設置好的高度。 解決方法：給對應的父級加overflow:hidden;但是會有部分被隱藏掉，最好是精確計算寬高再設定 eg ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類