您現在的位置是:電腦技術吧?>? 編程技術 ??>??如何編程,編程有哪些??>??正文詳情

如何編程,編程有哪些

章佳瑜蓓2019-11-26 17:01:44 人圍觀
簡介編程代碼OOCSS是面向對象的CSS。這里的對象是指頁面中的元素對象,它不同于傳統編程中的面向對象。例如,沒有方法。具體來說,一些附加的類可以看作是繼承類或接口類來實現算法編

OOCSS即面向對象的CSS,這里對象指的是頁面中的元素對象,與傳統編程中的面向對象不太相同,比如不存在方法這種東西,硬要說的話,附加的一些class可以看作是繼承或者接口之類的東西來實現對象的差異化。

比如電商網站中的商品就是一個典型的對象,它們既有許多相同的部分,又有許多差異,寬高、按鈕、圖片、標題等基本布局都是相同的,而邊距、線框、背景顏色、字號等都是差異化的。

由此按照OOCSS的指導原則,我們應該寫一個product class,然后為其添加一些border、theme之類的class來差異化它:  CSS Code復制內容到剪貼板  .product {  display: block;  overflow: hidden;  float: left;  width: 200px;  height: auto;  }  .product-head{...}  .product-body{...}  .product-foot{...}  .product-theme-black {  background: black;  color: white;  }  .product-border {  border: 1px solid #333;  }  這樣在以上兩種附加class的作用下,我們在html中就可以獲得4種不同的product樣式,隨著附加class增加,product的樣式也會呈指數增加,千變萬化。

這僅僅是一個簡單的例子,意在點出OOCSS的理念,但并沒有突出它的意義所在。

別著急,先來看看OOCSS的兩大原則。

  1. 分離容器與內容  所謂的容器即包裹對象的元素,比如一個div,我們經常會命名為wrap、container、body等。

那么如何才算是分離容器與內容呢?很簡單,一句話,內容在哪都可用。

也就是說不應該出現這樣的情況:  CSS Code復制內容到剪貼板  .container .product {  ...  }  這樣干的結果就是復用性大大降低,因為只能在這個容器內使用它了。

但這并不代表我們應該將所需的樣式全部一股腦的扔進單獨的class中,對于差異化應該單獨放在一個class中,這才是OOCSS的精髓。

  舉個例子,當我們既不想犧牲太多性能,又想來個瀑布流顯擺顯擺的時候,大部分前端都會使用column,類似泳道的設計。

你想說哦不,這是偽pinterest,但是誰在乎呢,用戶是不會有閑工夫拖拽瀏覽器的寬度來鑒別它的,在IE下商品多的時候至少不會太卡。

哈,別較真,首先分為幾個column,然后按照高度往里填放商品,先來看看下面的代碼吧,我有省略一些樣式避免誤導:  CSS Code復制內容到剪貼板  .column {  height: auto;  width: 200px;  }  .product {  width: 180px;  margin-right: 20px;  margin-bottom: 10px;  }  看起來不錯,每列200px寬,商品放入其中,水平間距要大,垂直間距要小些才像column。

但是等等,我們總還是需要整齊擺放的商品列表的對不對。

也許margin并不是product的必要屬性,至少它應該是可變的。

我們抽出它來:  CSS Code復制內容到剪貼板  .product {  width: 180px;  }  .vertical-product {  height: 400px;  margin-right: 10px;  margin-bottom: 10px;  }  .horizontal-product {  height: auto;  margin-right: 20px;  margin-bottom: 10px;  }  這樣便將column或list之類的容器與product分開來毫無關系了,即使以后出現了其他組織形式,只要product的基本結構沒有變都可以直接復用,無非是添加一些附屬樣式到新的xxx-product的class中。

另外這樣做還有一個好處,設計邏輯放在了HTML中,CSS更加強大。

  什么是樣式邏輯?商品在瀑布流中不定高,在列表中定高,這就是一種樣式的邏輯,如果用父子選擇器的形式寫在CSS中,那它就失去了自由。

而放在HTML通過選擇添加何種附屬class來展現不同形式的product,則非常的自由與靈活。

另外值得一說的是,margin-bottom是一樣的,但我們應該各自放在各自的class里面,原因很簡單,它們僅僅是一不小心恰好一樣,在設計邏輯中它們并不是一樣的bottom,這里并不是重復,而是看起來一樣。

如果以后需要改變其中的一個bottom,共用則顯得非常別扭。

  2. 分離皮膚與結構  第二點很容易理解,皮膚(theme)就是視覺效果,即使被剔除網頁也沒有什么影響的就是皮膚;而結構指地并不是像HTML這樣抽象的結構,因為CSS畢竟還是樣式,所以結構只是相對的頁面結構。

  先來看看我們的product吧,添加一些背景色和邊框:  CSS Code復制內容到剪貼板  .product {  width: 200px;  background: #F6F2F2;  border: 1px solid #C4A0A0;  }  看起來還不錯,不過設計師都是自大狂,精心的調色,完美的搭配,絕對不會讓你僅僅使用這么一次的,頁面的其他模塊、sidebar甚至是header都可能采用相同的背景顏色與邊框,它們甚至可能互相嵌套。

好吧,這其實在設計上是為了視覺統一,畢竟沒有幾個設計大師能hold住3,4種以上的顏色。

所以我們能做的并不是在每個class中添加這樣的樣式,而是把它提出來成為獨立的class,原因就像我開篇說的那樣,顏色為混沌之源。

  CSS Code復制內容到剪貼板  .main-bg {  background: #F6F2F2;  }  .main-border {  border: 1px solid #C4A0A0;  }  這樣就可以在頁面中隨時使用主要的設計元素了,而且需要修改時也非常的簡單,不用擔心有什么地方漏掉。

另外我將背景與邊框分為了兩個class,原因還是設計邏輯應該放在HTML,背景與邊框并不是一定同時出現的,兩者的關系應該由HTML決定,即使設計上邏輯決定了兩者的綁定,在實現時也有可能因為HTML結構而放在兩個不同的元素上。

  OOCSS強調class,將每組樣式寫成一個class方便HTML中使用,眾多class組合起來能千變萬化組成一個對象。

所以如果是想一勞永逸的寫一套UI作為開發時使用的樣式,我建議使用OOCSS來進行開發。

但它也有缺點,過多的將設計邏輯放在HTML中,極大的自由化了頁面開發時的選擇,如果寫HTML的開發者不能很好的理解整套CSS的結構,較易在HTML中造成class混亂。

版權聲明:本文由 章佳瑜蓓 整理編輯。

原標題:什么是編程,編程分類

轉載注明出處:http://www.dn9ww09s.icu/program/14515.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 網頁僅html格式保存,網頁以html格式保存

    網頁僅html格式保存,網頁以html格式保存 相關圖片html網頁PPT通常用作演示文稿,但有時我們需要將PPT文檔用作HTML頁面,所以此時我們應該做什么?不可能重新編輯HTML,因此將PPT轉換為HTML格式html網頁文件保存的格式為...

  • 如何編程,編程有哪些

    如何編程,編程有哪些 相關圖片編程代碼干巴巴的意思是不要重復你自己。但事實上,這個名字有點無聊。哪種理論不是消除重復,而是如何消除重復的意義。一般來說,我認為drycss和OOCSS是兩個極端,所以算法編程...

  • 美顏相機大頭貼模板,美顏相機最新版

    美顏相機大頭貼模板,美顏相機最新版 相關圖片美顏相機孩子們有沒有看到美相機的代言人angelababy,對他為美相機宣傳的動畫海報非常興奮?他們想自己試試。那么如何使用美女相機的卡通貼紙呢?下面我們就來看看:美顏相機怎么...

  • 繪圖工具在哪,繪圖工具都有什么

    繪圖工具在哪,繪圖工具都有什么 相關圖片excel 繪圖工具在哪HTML5無疑是目前最流行的技術。每個網頁設計師都在討論這種神奇的標記語言的興起。HTML5是一種不費吹灰之力的標記語言,但它可以提供迷人的藝術特性,幫助網頁設...

  • Excel怎么轉換成PDF,PDF轉換成Excel

    Excel怎么轉換成PDF,PDF轉換成Excel 相關圖片pdf轉換成excel是空白Excel是日常辦公中必不可少的數據處理軟件之一。它的獨特之處在于它是以表格的形式出現的,而且這個表格還具有計算功能。它對于統計、報表和數據排序是必不可...

  • 水晶球制作教程,自己制作水晶球的方法

    水晶球制作教程,自己制作水晶球的方法 相關圖片自制水晶球這篇文章是要做一個漂亮的超級水晶球煙花。方法很簡單。它是用圓形工具畫幾個球,把它們放在一起,調節光線,從而達到超光效的水晶球。原文:http://www.polps水晶球制作...

  • 京東金條10000一年利息,京東金條一萬一天利息

    京東金條10000一年利息,京東金條一萬一天利息 相關圖片京東金條分期6期怎樣算京東金條盈利是京東正式推出的個人貸款產品。很多人說他們想用它,但他們對興趣知之甚少。京東金條的興趣如何?京東金條的利息高嗎?接下來,超人軟件將...

  • template標簽,template

    template標簽,template 相關圖片java中template標簽一、HTML5模板元素的初始元素基本確定在2013年出現。你為什么用它?現在只是聲明它是一個模板元素,我們將模板HTML嵌入到HTML中,通常是這樣寫的:復制Xtemplate file...

  • 圖片轉換ppt,如何將ppt轉換為圖片

    圖片轉換ppt,如何將ppt轉換為圖片 相關圖片圖片變成ppt雖然PPT在日常辦公中被廣泛用作演示文稿,但也有人將PPT轉換成圖片,以防被他人復制。所以問題是,我們如何將PPT批量轉換成圖像?讓我們看看快速的PDF轉換ppt轉高清圖片...

  • 利用通道實現了,可以利用BBS實現的是

    利用通道實現了,可以利用BBS實現的是 相關圖片炫酷的頭像今天,讓我們在Carl philipebrenner的網站上探索一個微妙而有趣的動畫效果。當鼠標通過網格元素時,將會有一個微妙的動畫。網格元素變得透明,每個邊都炫酷背景圖...

熱評文章

  • 2019白條最新自套技術,白條閃付開通資格

    2019白條最新自套技術,白條閃付開通資格 相關圖片京東白條c店什么意思白條閃付是京東正式推出的虛擬信用卡,用戶可以先消費后支付。那么如何打開閃付呢?接下來,超人軟件編輯將介紹京東閃付的應用方法,希望對您有所幫助!白...

  • 股票怎么提現,股票提現時間

    股票怎么提現,股票提現時間 相關圖片賣出股票什么時候可以提現股票投資是一個非常實用的金融軟件。許多小合伙人通過它賺了一桶黃金,那么他們如何從股票和投資中提取現金呢?接下來,超人軟件將介紹股票和投資套...

  • 彈出式菜單怎么設置,為了顯示彈出式菜單

    彈出式菜單怎么設置,為了顯示彈出式菜單 相關圖片彈出式菜單怎么做我們希望在產品中完成的效果是,當鼠標移動到文本上時,會彈出一個漂亮的菜單,如圖17-1和圖17-2所示,具體步驟如下:1。輸入文本并設置超鏈接。根據Dreamw彈出式...

  • 廣東文理查成績,廣東文理學院查成績

    廣東文理查成績,廣東文理學院查成績 相關圖片廣東文理職業學院查成績智能文理是一款功能強大的校園卡消費軟件。在這個軟件中,用戶可以查詢自己的分數。那么如何檢查自己的成績呢?接下來,超人軟件編輯器將為您介紹一門...

  • C盤滿了如何清理,C盤快滿了

    C盤滿了如何清理,C盤快滿了 相關圖片電腦d盤滿了怎么清理技巧磁盤C是計算機的系統磁盤。有些朋友為了方便,喜歡把文件放在桌面上,桌面上的文件一般默認存儲在C盤上。所以一般來說,我們不想把程序安裝在C盤上,這...

  • 你活得久,活得比你久一點

    你活得久,活得比你久一點 相關圖片你長得丑活的久H5能活多久?我想它還能活一秒鐘。這是W創始人三水先生在主旨演講中給出的答案。當然,三水先生的言外之意其實并不在具體的時間長度上,沒有人能保證H5能活多久,...

  • 一碼付,一碼付手續費

    一碼付,一碼付手續費 相關圖片支付寶掃碼付高速費融碼支付作為一款方便、實用、功能強大的收款軟件,受到了很多人的喜愛。那么榮碼怎么收費呢?下一步,超人軟件編輯將為您介紹rongcodepay收藏教程。如果你不多...

  • 文字效果轉換彎曲,文字效果轉換彎曲倒v型

    文字效果轉換彎曲,文字效果轉換彎曲倒v型 相關圖片PPT文字彎曲如果你有更好的方法,本教程只提供一個想法供你分享,讓我們看看效果第一步:使用螺旋工具繪制螺旋第二步:根據情況從中心刪除多余的節點第三步:復制一個并適當調...

  • 電競,電競網

    電競,電競網 相關圖片QQ電競牛角電子商務是一款為用戶提供最新、最熱門的電子商務信息的移動軟件。但最近,一個小伙伴xiaosuperman和蕭邊說,他們不能登錄時,使用牛角電子競爭。怎么了。im電競平臺...

  • 便捷的方法,爬樹便捷方法

    便捷的方法,爬樹便捷方法 相關圖片便捷的疊衣方法本文主要介紹了Dreamweaver的便捷技巧和方法。讓我們在下面介紹他們!一。通過靈活使用樣式熟悉Web設計的用戶知道調用樣式有很多方法。我們可以右鍵單擊并選最便捷發...

關注微信

变脸官网查询