02-CSS&JS

来源:https://www.cnblogs.com/zmy-520131499/archive/2018/12/07/10083576.html
-Advertisement-
Play Games

今日目標 使用CSS完成網站首頁的優化 使用CSS完成網站註冊頁面的優化 使用JS完成簡單的數據校驗 使用JS完成圖片輪播效果 教學目標： - 瞭解CSS的概念 - 瞭解CSS的引入方式 - 瞭解CSS的基本用法和常用的選擇器 - 瞭解CSS的盒子模型，懸浮和定位 - 瞭解JS的概念 - 掌握JS的 ...


今日目標

 使用CSS完成網站首頁的優化

 使用CSS完成網站註冊頁面的優化

 使用JS完成簡單的數據校驗

 使用JS完成圖片輪播效果

 教學目標：

- 瞭解CSS的概念
- 瞭解CSS的引入方式
- 瞭解CSS的基本用法和常用的選擇器
- 瞭解CSS的盒子模型，懸浮和定位
- 瞭解JS的概念
- 掌握JS的基本語法，數據類型，能夠使用JS完成簡單的頁面交互


去年的內容簡單回顧

什麼HTML : 超文本標記語言

p標簽: 段落標簽

br標簽: 簡單換行

h1-h6: 標題標簽

hr標簽: 水平分割線, 華麗的分割線

font標簽: color屬性改變顏色 , size

b標簽: 加粗

i標簽: 斜體



strong標簽: 帶語義的加粗

em標簽: 斜體標簽,帶語義



img標簽: 圖片標簽 顯示圖片

​    src: 指定圖片路徑(相對路徑)

​    width: 寬度

​    height: 高度

​    alt: 圖片載入失敗時的提示

相對路徑:

​    ./  代表當前路徑

​    ../ 代表的是上一級路徑

​    ../../  代表的是上上一級路徑



ul標簽: 無序列表

ol標簽: 有序列表

li標簽: 列表項



a標簽: 超鏈接標簽:

​    target: 打開方式

​    href:  指定要跳轉的鏈接地址



table標簽:  table > tr > td

tr標簽: 行

td標簽: 列

​    合併行: rowspan

​    合併列: colspan



網站註冊案例:

​    form 標簽: 表單標簽,主要是用來向伺服器提交數據

​        method: 提交方式 get  post

​        action : 提交的路徑

​    input 標簽:

​            type: 

​                password: 密碼框

​                text : 文本

​                submit:  提交

​                button:  普通的按鈕

​                reset:  重置按鈕

​                radio: 單選按鈕 設置name屬性讓它們是一組

​                checkbox: 覆選按鈕 

​                email:

​                date:

​                tel:

frameset : 框架標簽

​    rows:

​    cols:

frame:  



 使用CSS完成網站首頁的優化

 需求分析:

​    由於我們昨天使用表格佈局存在缺陷,那麼我們要來考慮使用DIV+CSS來對頁面進行優化

表格佈局的缺陷:

    1. 嵌套層級太多, 一旦出現嵌套順序錯亂, 整個頁面達不到預期效果
    2.  採用表格佈局,頁面不夠靈活, 動其中某一塊,整個表格佈局的結構全都要變

 技術分析

HTML的塊標簽:

​    div標簽: 預設占一行,自動換行

​    span標簽:  內容顯示在同一行

CSS概述:

​    Cascading Style Sheets : 層疊樣式表

​        紅磚, 抹了一層水泥, 白灰

主要用作用:

​    用來美化我們的HTML頁面的

​    HTML 決定網頁的骨架    ,CSS  化妝

​    將頁面的HTML和美化進行分離

CSS的簡單語法:

​    在一個style標簽中,去編寫CSS內容,最好將style標簽寫在這個head標簽中

```html
<style>
  選擇器{
    屬性名稱:屬性的值;
    屬性名稱2: 屬性的值2;
  }
</style>
```

CSS選擇器: 幫助我們找到我們要修飾的標簽或者元素



元素選擇:

```html
元素的名稱{
  屬性名稱:屬性的值;
  屬性名稱:屬性的值;
}
```

ID選擇器:

```html
以#號開頭  ID在整個頁面中必須是唯一的s
#ID的名稱{
  屬性名稱:屬性的值;
  屬性名稱:屬性的值;
}
```

類選擇器:

```html
以 . 開頭 
.類的名稱{
   屬性名稱:屬性的值;
      屬性名稱:屬性的值;
}
```



CSS的引入方式:

​    外部樣式: 通過link標簽引入一個外部的css文件

​    內部樣式: 直接在style標簽內編寫CSS代碼

​    行內樣式: 直接在標簽中添加一個style屬性, 編寫CSS樣式



CSS浮動 : 浮動的元素會脫離正常的文檔流,在正常的文檔流中不占空間

                float屬性:
                    left
                    right
                
                clear屬性: 清除浮動
                    both : 兩邊都不允許浮動
                    left: 左邊不允許浮動
                    right : 右邊不允許浮動
                流式佈局


 步驟分析:

1. 創一個最外層div
2. 第一部份: LOGO部分: 嵌套三個div
3. 第二部分: 導航欄部分 : 放置5個超鏈接
4. 第三部分: 輪播圖 
5. 第四部分: 
6. 第五部分: 直接放一張圖片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一張圖片
9. 第八部分: 放一堆超鏈接


 代碼實現:

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            
            .logo{
                float: left;
                width: 33%;
                /*border-width: 1px;
                border-style: solid;
                border-color: red;*/
                height: 60px;
                line-height: 60px;
        /*        border: 1px solid red;*/
            }
            
            
            .amenu{
                color: white;
                text-decoration: none;
                height: 50px;
                line-height: 50px;
            }
            
            .product{
                float: left; text-align: center; width: 16%; height: 240px;
            }
            
        </style>
    </head>
    <body>
        <!--
            1. 創一個最外層div
            2. 第一部份: LOGO部分: 嵌套三個div
            3. 第二部分: 導航欄部分 : 放置5個超鏈接
            4. 第三部分: 輪播圖 
            5. 第四部分: 
            6. 第五部分: 直接放一張圖片
            7. 第六部分: 抄第四部分的
            8. 第七部分: 放置一張圖片
            9. 第八部分: 放一堆超鏈接
        -->
        <div>
            <!--2. 第一部份: LOGO部分: 嵌套三個div-->
            <div>
                <div class="logo">
                    <img src="../img/logo2.png"/>
                </div>
                <div class="logo">
                    <img src="../img/header.png"/>
                </div>
                <div class="logo">
                    <a href="#">登錄</a>
                    <a href="#">註冊</a>
                    <a href="#">購物車</a>
                </div>
            </div>
            
                
            <!--清除浮動-->
            <div style="clear: both;"></div>
            
            
            <!--3. 第二部分: 導航欄部分 : 放置5個超鏈接-->
            <div style=" height: 50px;">
                <a href="#" class="amenu">首頁</a>
                <a href="#" class="amenu">手機數位</a>
                <a href="#" class="amenu">電腦辦公</a>
                <a href="#" class="amenu">鞋靴箱包</a>
                <a href="#" class="amenu">香煙酒水</a>
            </div>
            
                
            <!--4. 第三部分: 輪播圖--> 
            <div>
                <img src="../img/1.jpg" width="100%"/>
            </div>
            <!--5. 第四部分:--> 
            <div>
                <div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
                
                <!--左側廣告圖-->
                <div style="width: 15%; height: 480px;  float: left;">
                    <img src="../products/hao/big01.jpg" width="100%" height="100%"/>
                </div>
                <!--
                    右側商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                    <div style="height: 240px; width: 50%; float: left;">
                        <img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    
                </div>
            </div>
            
            <!--6. 第五部分: 直接放一張圖片-->
            <div>
                <img src="../products/hao/ad.jpg" width="100%"/>
            </div>
            <!--7. 第六部分: 抄第四部分的-->
            <div>
                <div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
                
                <!--左側廣告圖-->
                <div style="width: 15%; height: 480px;  float: left;">
                    <img src="../products/hao/big01.jpg" width="100%" height="100%"/>
                </div>
                <!--
                    右側商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                    <div style="height: 240px; width: 50%; float: left;">
                        <img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    
                </div>
            </div>
            
            <!--8. 第七部分: 放置一張圖片-->
            <div>
                <img src="../img/footer.jpg" width="100%"/>
            </div>
            <!--9. 第八部分: 放一堆超鏈接-->
            <div style="text-align: center;">
                        
                    <a href="#">關於我們</a>
                    <a href="#">聯繫我們</a>
                    <a href="#">招賢納士</a>
                    <a href="#">法律聲明</a>
                    <a href="#">友情鏈接</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">服務聲明</a>
                    <a href="#">廣告聲明</a>
                    
                    <br />
                    
                    Copyright © 2005-2016 傳智商城 版權所有
            </div>
        </div>
    </body>
</html>
```



 擴展:

- CSS的優先順序

  按照選擇器搜索精確度來編寫:             行內樣式 > ID選擇器 > 類選擇器  > 元素選擇器

  就近原則: 哪個離得近,就選用哪個的樣式


  CSS: 層疊樣式表

  主要作用:

      1. 美化頁面
      2. 將頁面美化和HTML代碼進行分離,提高代碼的服用型

  - 選擇器:

    - 元素選擇器: 標簽的名稱{}
    - 類選擇器:   以. 開頭  .類的名稱
    - ID選擇器:  以#開頭 ,   #ID的名稱  (ID必須是頁面上面唯一) 

  - CSS浮動:

    - float : left, right  不再占有正常文檔流中的空間 , 流式佈局

    - clear : both  left right

      ​

- CSS中的其它選擇器

  - 選擇器分組: 選擇器1,選擇器2{ 屬性的名稱:屬性的值}

  - 屬性選擇器:

    ```html
    a[title]
    a[titile='aaa']
    a[href][title]
    a[href][title='aaa']
    ```

  - 後代選擇器: 爺爺選擇器  孫子選擇器   找出所有的後代

  - 子元素選擇器:  父選擇器  > 兒子選擇器

  - 偽類選擇器: 通常都是用在A標簽上

  ​

  ​

 使用DIV+CSS完成註冊頁面的優化

 需求分析

由於我們的註冊頁面也是用table佈局的,存在與首頁同樣的問題,所以我們需要使用div+css對我們的註冊頁面進行美化

總共是5部分內容

 技術分析

CSS的盒子模型: 萬物皆盒子

內邊距:  

padding-top:

padding-right:

padding-bottom:

padding-left:

```html
padding:10px;  上下左右都是10px
padding:10px 20px;  上下是10px 左右是20px
padding: 10px 20px 30px;  上 10px 右20px  下30px  左20px
padding: 10px 20px 30px 40px;  上右下左, 順時針的方向
```



外邊距:

margin-top:

margin-right:

margin-bottom:

margin-left: 



CSS絕對定位:

​    position: absolute

​    top: 控制距離頂部的位置

​    left: 控制距離左邊的位置

 步驟分析:

1. 總共是5部分
2. 第一部分是LOGO部分
3. 第二部分是導航菜單
4. 第三部分是註冊部分
5. 第四部分是FOOTER圖片
6. 第五部分是一堆超鏈接

 代碼實現:

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
         <link rel="stylesheet" type="text/css" href="../css/main.css"/>
    </head>
    <body>
        <!--
            1. 總共是5部分
            2. 第一部分是LOGO部分
            3. 第二部分是導航菜單
            4. 第三部分是註冊部分
            5. 第四部分是FOOTER圖片
            6. 第五部分是一堆超鏈接
        -->
        <div>
            
            <!--2. 第一部分是LOGO部分-->
            <div>
                <div class="logo">
                    <img src="../img/logo2.png" />
                </div>
                <div class="logo">
                    <img src="../img/header.png" />
                </div>
                <div class="logo">
                    <a href="#">登錄</a>
                    <a href="#">註冊</a>
                    <a href="#">購物車</a>
                </div>
            </div>
            
            <!--清除浮動-->
            <div style="clear: both;"></div>
            <!--3. 第二部分是導航菜單-->
            <div style=" height: 50px;">
                <a href="#" class="amenu">首頁</a>
                <a href="#" class="amenu">手機數位</a>
                <a href="#" class="amenu">電腦辦公</a>
                <a href="#" class="amenu">鞋靴箱包</a>
                <a href="#" class="amenu">香煙酒水</a>
            </div>
            <!--4. 第三部分是註冊部分-->
            <div style="background: url(../image/regist_bg.jpg);height: 500px;">
                
                <div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;">
                    <table width="60%" align="center">
                        <tr>
                            <td colspan="2"><font color="blue" size="6">會員註冊</font>USER REGISTER</td>
                            
                        </tr>
                        <tr>
                            <td>用戶名:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td>密碼:</td>
                            <td><input type="password"/></td>
                        </tr>
                        <tr>
                            <td>確認密碼:</td>
                            <td><input type="password"/></td>
                        </tr>
                        <tr>
                            <td>email:</td>
                            <td><input type="email"/></td>
                        </tr>
                        <tr>
                            <td>姓名:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td>性別:</td>
                            <td><input type="radio" name="sex"/> 男
                            <input type="radio" name="sex"/> 女
                            <input type="radio" name="sex"/> 妖
                            </td>
                        </tr>
                        <tr>
                            <td>出生日期:</td>
                            <td><input type="date"/></td>
                        </tr>
                        <tr>
                            <td>驗證碼:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input type="submit" value="註冊"/></td>
                        </tr>
                    </table>
                </div>
                
            </div>
            
            <!--5. 第四部分是FOOTER圖片-->
            <div>
                <img src="../img/footer.jpg" width="100%"/>
            </div>
            <!--9. 第四部分: 放一堆超鏈接-->
            <div style="text-align: center;">
                        
                    <a href="#">關於我們</a>
                    <a href="#">聯繫我們</a>
                    <a href="#">招賢納士</a>
                    <a href="#">法律聲明</a>
                    <a href="#">友情鏈接</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">服務聲明</a>
                    <a href="#">廣告聲明</a>
                    
                    <br />
                    
                    Copyright © 2005-2016 傳智商城 版權所有
            </div>
            
        </div>
    </body>
</html>

```



 CSS部分的回顧:

​    CSS: 層疊樣式表.

​    CSS作用: 美化頁面,提高代碼的復用性

​    選擇器:

​        需要掌握的:

​            元素選擇器: 標簽的名稱

​            類選擇器:  以 . 開頭

​            ID選擇器: 以#開頭,  #ID的名稱  ID必須是唯一的

​        優先順序: 按照選擇精確度: 行內樣式  > ID選擇器 > 類選擇器 > 元素選擇器

​                就近原則

​        擴展選擇器:

​            選擇器分組:  選擇器1,選擇器2   以逗號隔開

​            後代選擇器:  爺爺 孫子   中間以空格隔開

​            子元素選擇器:  爸爸 > 兒子 

​            屬性選擇器:   選擇器[屬性的名稱='']

​            偽類選擇器:  超鏈接標簽上使用  

​     浮動: float屬性  left right

​     清除浮動: clear: both left right

​    

​    盒子模型:  順時針 : 上右下左

​        padding : 內邊距 ,控制的是盒子內容的距離

​        margin : 外邊距 控制盒子與盒子之間的距離

​    絕對定位:

​        position: absolute

​        top:

​        left:



 使用JS完成簡單的數據校驗

 需求分析

使用JS完成對註冊頁面的簡單數據校驗,不允許出現用戶名或密碼為空的情況



 技術分析

 JavaScript概述

什麼是javascript: JavaScript一種直譯式腳本語言，

什麼是腳本語言?

​    java源代碼 ----> 編譯成.class文件 -----> java虛擬機中才能執行

​    腳本語言:   源碼  -------- > 解釋執行

​    js由我們的瀏覽器來解釋執行

HTML: 決定了頁面的框架  

CSS: 用來美化我們的頁面

JS:    提供用戶的交互的

 JS的組成:

ECMAScript : 核心部分 ,定義js的語法規範

DOM: document Object Model 文檔對象模型 , 主要是用來管理頁面的

BOM : Browser Object Model  瀏覽器對象模型, 前進,後退,頁面刷新, 地址欄, 歷史記錄, 屏幕寬高

 JS的語法:

變數弱類型: var i = true

區分大小寫

語句結束之後的分號 ,可以有,也可以沒有

寫在script標簽


 JS的數據類型:

- 基本類型
  - string
  - number
  - boolean 
  - undefine
  - null
- 引用類型
  - 對象, 內置對象
- 類型轉換
  - js內部自動轉換 

 JS的運算

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

-Advertisement-
Play Games
更多相關文章
  • 前端入門21-JavaScript的ES6新特性
    聲明 本篇內容全部摘自阮一峰的： "ECMAScript 6 入門" 阮一峰的這本書，我個人覺得寫得挺好的，不管是描述方面，還是例子，都講得挺通俗易懂，每個新特性基本都還會跟 ES5 舊標準做比較，說明為什麼會有這個新特性，這更於理解。 所以，後續不會再寫個關於 ES6 系列的文章了，就在這篇里大概 ...
  • 解析React事件處理的機制及原理
    本文主要介紹了React事件處理的機制及原理，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。 React中的事件處理在React元素中綁定事件有兩點需要註意： （1）在React中，事件命名採用駝峰命名方式，而不是DOM元素中的小寫字母命名方式。例如onclick要 ...
  • 深入解析Vue.js中v-bind v-model的使用和區別
    v-model 指令在表單控制項元素上創建雙向數據綁定,所謂雙向綁定，指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內容保持一致，兩者無論誰被改變，另一方也會相應的更新為相同的數據 最基礎的就是實現一個聯動的效果 checkbox v-bind 有些指令可以在其名稱後面帶一個“參 ...
  • 解析vue項目每30秒刷新1次介面的實現方式
    在vue.js項目中，經常需要對數據實時更新——每隔xx秒需要刷新一次介面——即需要用到定時器相關原理。這篇文章主要介紹了vue項目每30秒刷新1次介面的實現方法，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。 在vue.js項目中，經常需要對數據實時更新——每隔x ...
  • JavaScript之原型 Prototype
    1、我們所創建的每一個函數，解析器都會向函數中添加一個屬性prototype。這個屬性對應著一個對象，這個對象就是我們所謂的原型對象。如果函索作為普通函數調用prototype沒有任何作用。 當函數以構造函數的形式調用時，它所創建的對象中都會有一個隱含的屬性 指向該構造函數的原型對象，我們可以通過_ ...
  • 05-BootStrap
    今日任務 使用JQuery發送請求局部刷新頁面 使用BootStrap製作一個響應式的頁面 使用BootStrap製作網站的首頁 教學目標 掌握什麼是響應式及響應式的原理 掌握BootStrap的柵格系統 瞭解BootStrap的其他組件及JS控制項 上次課內容: 什麼JQ : write less ...
  • 04-JQuery
    今日任務 使用JQuery完成頁面定時彈出廣告 定時器: ​ setInterval clearInterval ​ setTimeout clearTimeout 顯示: img.style.display = "block" 隱藏: img.style.display = "none" img ...
  • 03-JavaScript
    今日任務 使用JS完成頁面定時彈出廣告 使用JS完成表單的校驗 使用JS完成表格的隔行換色 使用JS完成覆選框的全選效果 使用JS完成省市的聯動效果 JS控制下拉列表左右選擇 教學導航 1. 掌握JS中的BOM對象 2. 掌握JS中的常用事件 3. 掌握JS中的常用DOM操作 4. 瞭解JS中的內置 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類