css div 實踐過程中的問題和思考

2021-09-30 12:17:01 字數 1532 閱讀 4478

1.當給你乙個現成的網頁和素材,按照它的效果如何做出來?

這個問題是我開始動手做網頁之前問我自己的問題。你會不會一看到就暈了,不知從何下手了。其實不應該。通過css+div的學習,我們知道css只是樣式,而真正的內容都放在了乙個個的div裡。所以,我們需要首先確定的是該網頁都包含了哪些元素。這些元素的分布也有基本的框架。如圖:

然後再分解每一部分。舉個例子,如圖:

這部分屬於上圖globallink部分。在該部分中又主要包含兩部分:一是一張背景,一是ul列表。html**如下:

按照如此分析每一部分的具體內容,寫下來。然後就是樣式的設計了。

2.實踐過程中常常分不清是使用margin還是使用padding.

在我實現每乙個部分的樣式的時,常常需要設定margin和padding的值,若margin不是我想要的效果,就換成padding試試,試過了幾次就想:為什麼每次我都需要去試,很簡單,因為我不知道什麼時候該用margin什麼時候該用padding。這裡需要認識盒子模型。

了解盒子模型(box model)的概念,了解它是如何決定某乙個元素的最終尺寸的話,會有助

我們理解乙個元素如何在網頁上定位。盒子模型主要適用於塊級元素

。乙個網頁有多少個塊級元素,就相當於有多少盒子。如果將做乙個網頁比作拼圖,每一片都是乙個盒子,尺寸不同,存放的東西也不同。乙個盒子的構成如下圖:

這是標準盒子模型。我之前一直都認為:content的width、height包含border和padding,其實不是這樣,width和height既不含border,也不包含padding。在網上查了資料,才知道我以前錯誤認識恰恰是另一種盒子模型:ie盒子模型。所以我參照原網頁測量出來的邊框的距離我直接設定為width和height值,後邊設定margin和padding一直都出現不了預期的效果,所以只能根據firebug來試試,整個網頁做下來費力不討好,但是學到了很多。盒子模型關鍵就是這張圖,但想要用好,需要多加練習。

3.有些樣式重複使用了多次,該怎麼辦?

在做的過程中有好多的樣式我寫了很多遍比如:font-size:12px;其實完全可以將它寫在body的樣式中,這樣body下的標籤都會繼承它的屬性。還有一種方法也可以減少重複寫:就是使用class。class是類選擇器,用它來給樣式分類,就可以做到同乙個樣式設定一次。以前只是知道,並不能用於實踐。真得動手做的時候,不知道什麼時候設定id什麼時候設定class,整個做下來發現大多都使用了id,重複工作做了不少。那到底什麼時候使用id?什麼時候使用class? id在頁面中具有唯一性,class不是唯一的。當這個頁面元素是唯一的時候選擇id,當這個元素是一類的選擇class.

總結:需要細緻和勤動手。

Vue實踐過程中的幾個問題

路由變化頁面資料不重新整理問題 settimeout setinterval this指向改變,無法用this訪問vue例項 setinterval路由跳轉繼續執行並沒有銷毀 vue 滾動行為 瀏覽器回退記憶位置 用法 vue路由攔截瀏覽器後退實現草稿儲存類似需求 v once 只渲染元素和元件一次...

資料包表實踐過程中存在的問題

1.同一業務kpi,可能存在非常多元的提取邏輯 資料來源不同,存在資料收集層面的差異 業務定義多樣,不統一 兩份報告中的同一kpi有不同的意思 同一定義,但在某些報表中因特定需求,存在特別限定。2.業務要求每個單獨報表全面,相關kpi全都要,重複開發 3.綜合級kpi指標定義,存在大量重複造輪子,更...

社會實踐(軟體)製作過程中遇到的問題

從現在開始就準備做暑期社會實踐的軟體了,現在想的是做乙個課程表。當然不是簡單的課程表,我們要做乙個客戶端,和學校的伺服器連線 當然很可能學校不給我們用伺服器的介面,那我們就用自己的伺服器 或者考慮直接通過http請求向教學資訊網傳送請求,然後我們在手機端解析,然後顯示。當然現在還沒定最終怎麼弄,還只...