1. 程式人生 > >【牛腩3】專案總結

【牛腩3】專案總結

牛腩新聞釋出系統是B/S第一個專案,與之前一直學習的C/S不一樣,那麼到底是怎麼不一樣呢?

一、C/S與B/S

Client/Server架構,即客戶端/伺服器架構。是我們熟知的軟體系統體系結構,通過將任務合理分配到Client端和Server端,降低了系統的通訊開銷,需要安裝客戶端才可進行管理操作。

B/S架構:客戶端基本上沒有專門的應用程式,應用程式基本上都在伺服器端。由於客戶端沒有程式,應用程式的升級和維護都可以在伺服器端完成,升級維護方便。

下面是小編做的極簡對比圖。更多關於C/S與B/S的知識,請點選這裡:區別(C/S與B/S)

在這裡插入圖片描述

二、牛腩新聞釋出系統–顆粒歸倉

設計:

資料庫設計,資料表,UML圖,網頁介面佈局設計,設計說明書,命名規範等等。

前端:

CSS框架,div標籤,HTML介面。JavaScript互動,Jquery 和 AJAX等。

後端:

資料庫設計,編寫 SQL helper,資料的增刪改查、返回值型別等。

其他

觸發器,儲存過程,實體類生成工具(節省編寫程式碼的時間)。

技術整合

         在這裡插入圖片描述
1.ASP.NET是.NET FrameWork中的一部分,是一種使嵌入網頁中的指令碼課由因特網伺服器執行的伺服器端指令碼技術,它是在IIS上運用的程式,它的首選開發語言是C#以及VB.NET

2.HTML

超文字標記語言,可以用來設計網頁的所有內容,包括頭部(Head)主體(body)尾部(footer)等結構的設計,包含一切圖片,音訊等非文字元素的設計。

3.Jquery:輕量級的JavaScript庫,相容多瀏覽器的JS庫。

4.JavaScript:在HTML的基礎上新增動態功能的。

5.DIV+CSS和Table:對網頁進行佈局,並使用Firebug對頁面進行除錯(下面將詳細介紹)。

6.AJAX:可以使網頁實現非同步更新,也就是說可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。它也不是一門語言,是一門技術,是用於建立更好更快以及互動性更強的Web應用程式的技術。

7.js:指的是jscript,只有微軟的ie瀏覽器才遵循的微軟自己的不開放的指令碼語言標準。

8.FireBug:是firefox下的一個擴充套件,能夠除錯所有網站語言,如HTML、CSS等,但FireBug最吸引人的就是JavaScritp除錯功能,應用起來非常方便,而且在各種瀏覽器下都能使用(IE,Firefox,Opera,Safari)。除此之外,其他功能還很強大,比如HTML、CSS、dom的檢視與除錯,網站整體分析等等。總之就是一整套完整而強大的Web開發工具。

.NET擷取指定長度漢字超出部分以“…”代替

.NET中獲取字串的MD5碼

三、DIV+CSS

CSS

div+css是web設計標準,它是一種網頁佈局方法。它可以實現網頁頁面內容與表現分離。
CSS是 層疊樣式表(Cascading Style Sheets) 的縮寫,用於定義HTML元素的顯示形式。
樣式規則:由一個選擇器後跟一個宣告塊組成。宣告塊是一個大容器,由大括號中間的部分組成,宣告塊中間的空間會被忽略。

選擇器

1.類選擇器
CSS中的一種選擇器是元素型別的名稱。使用這種選擇器(稱為型別選擇器),可以向這種元素型別的每個例項上應用宣告。
語法格式: .類名 { 屬性: 值; }

2.元素選擇器:語法格式: 元素{color: blue;}

3.ID選擇器:#id名 {屬性 : 值;}  ID名不能重複

4.萬用字元選擇器:語法格式:*{屬性:值;}

5.偽類選擇器 可以以不同方式格式化超級連結<a>元素的四種不同狀態:以下順序依次寫;
a:link是用在未訪問的連結的選擇器
a:visited是用在已訪問過的連結的選擇器
a:hover是用在滑鼠游標放在其上的連結的選擇器
a:active是用在獲得焦點(如:被點選)的連結的選擇器
如果需要,我們可以組合這幾個狀態,按順序寫:
a:link, a:visited {color:blue;}
a:hover, a:active {color:blue;}

6.偽元素選擇器
標準的選擇器不能格式化一個元素內容的第一個字母或者第一行,而偽元素選擇器能實現:
所有瀏覽器支援的有兩種: :first-line 和 :first-letter
例:段落的第一行: p:first-line {屬性:值;}
例:段落的第一個字母: p:first-letter {屬性:值;}

優先順序

優先順序就是:CSS樣式在瀏覽器中被解析的先後順序。
當兩個規則都作用到了同一個html元素上時,如果定義的屬性有衝突,那麼應該用誰的值的,CSS有一套優先順序的定義。

不同級別

1.在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
2.作為style屬性寫在元素內的樣式
3.id選擇器
4.類選擇器
5.標籤選擇器
6.萬用字元選擇器
7.瀏覽器自定義或繼承

總結排序!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性

同一級別

同一級別中後寫的會覆蓋先寫的樣式

上面的級別還是很容易看懂的,但是有時候有些規則是多個級別的組合,像這樣:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div.test{
            background-COLOR:#a00;
            width:100px;
            height: 100px;
        }

        .test.test2{
            background-COLOR:#0e0;
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="test test2"></div>
</body>
</html>

四、總結

系統很快就釋出了,但是感覺收穫並不是很大,很多東西並不是很瞭解,所以做個總結,顆粒歸倉一下,這樣以後,感覺好多了。✌