『壹』 什麼是CSS 定位和浮動
CSS 為定位和浮動提供了一些屬性,利用這些屬性,可以建立列式布局,將布局的一部分與另一部分重疊,還可以完成多年來通常需要使用多個表格才能完成的任務。
定位的基本思想很簡單,它允許你定義元素框相對於其正常位置應該出現的位置,或者相對於父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然,這個功能非常強大,也很讓人吃驚。要知道,用戶代理對 CSS2 中定位的支持遠勝於對其它方面的支持,對此不應感到奇怪。
另一方面,CSS1 中首次提出了浮動,它以 Netscape 在 Web 發展初期增加的一個功能為基礎。浮動不完全是定位,不過,它當然也不是正常流布局。
『貳』 UI設計需要學前端開發嗎
UI設計不一定需要精通前端,但是如果UI設計了解前端可以減少和開發人員溝通的技術成本,讓團隊協作更加高效。那UI設計如何學習前端,需要學習到什麼程度呢?
我們分享一個前端教程-Web前端UI設計,這裡面詳細講解了UI設計中的Web前端設計規則及工具,可以幫助大家深入理解Web前端UI設計方法。
1、HTLM基礎認知DIV框架及CSS樣式
首先要了解HTLM基礎、CIV框架以及CSS樣式, HTML稱為超文本標記語言,是一種標識性的語言。它包括一系列標簽.通過這些標簽可以將網路上的文檔格式統一,使分散的Internet資源連接為一個邏輯整體。DIV元素是用來為HTLM文檔內大塊的內容提供結構和背景的元素。 CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字型大小樣式,擁有對網頁對象和模型樣式編輯的能力。
2、浮動原理、Margin認知
Margin,是CSS的語法,這個簡寫屬性用於在一個聲明中設置所有當前或者指定元素所有外邊距的寬度,或者設置各邊上外邊距的寬度。
3、框架應用搭建
框架很多,在這個教程中選擇一個主流框架帶大家看看前端框架如何搭建。
4、插入圖片、文字標簽和版頭、導航欄
編寫的網頁中插入圖片,可以使瀏覽網頁的用戶得到更好的體驗效果。在這一部分會講解插入圖片、文字標簽以及版頭和導航欄如何實現。
5、Banner塊插入、內容文字排版、內聯元素、A標簽和Banner鏈接定位
Banner是網路廣告最早採用的形式,也是目前最常見的形式。它是橫跨於網頁上的矩形公告牌,當用戶點擊這些橫幅的時候,通常可以鏈接到廣告主的網頁。而網頁中的文字內容排版也直接影響著網頁的美觀以及網頁的用戶體驗。
6、錨點標簽、超鏈接標簽、固定定位和絕對定位、相對定位
<a> 標簽用於定義超鏈接,用於從一張頁面鏈接到另一張頁面。用於設置錨點,用於頁面定位。
7、導航二級菜單顯示隱藏
很多網頁中的二級菜單欄不直接顯示,需要滑鼠移動到一級菜單或者點擊一級菜單才會展開顯示二級菜單。
8、input表單
input表單可以獲取用戶的信息,做出對應的動作,教程中直觀的展示input表單的應用方法。
其實以上教程只是web前端很小的一部分,UI設計如果能夠了解前端知識,在設計中可以更好的考慮實現問題,也能夠更好的和開發人員交流,也能夠提高團隊協作的效率,加速項目的進度。
『叄』 C# web頁面 浮動控制項如何做
放到DIV裡面,然後設置DIV的style="position:fixed;top:0px;left:0px"是放在左上
style="position:fixed;bottom:0px;right:0px"是放在右下
『肆』 Web電子地圖的實現原理請教
這種東西有必要自己完全去寫嗎?如果只是一個地圖應用,你可以考慮使用第三方的插件,例如:MapX,它是MapInfo公司的地圖插件,功能非常強大。
----------------------------------------------------------------------
自己實現,你自己用用google或者的地圖,分析一下它它們ajax請求,就能學到基本流程。同時,我覺得做出來,和做出來一個產品級的東西是2個概念。如果只是玩玩,那可以隨便實現一下。
另外你可以去大學文獻檢索裡面,找個叫:一種基於A J A X的電子地圖平滑移動演算法的實現的文章,它是講一種平移演算法的,還挺簡單的,可以學習一下。
『伍』 右浮動的原理及規則
Web前端寫頁面,肯定離不開一種布局,左右布局,左右布局裡面,最常用到,也少出問題的就是浮動對齊float/left/right。作為一個資深的老初級前端,別的不敢說,這個浮動我還是摸得很透徹的,前些日子與同事對這個右浮動產生了一些分歧,無法睡服他,也只能寫一篇文章來做自我安慰了。
首先來說說浮動的概念以及其產生的效果。
定義和用法
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像,使文本圍繞在圖像周圍,不過在 CSS 中,任何元素都可以浮動。浮動元素會生成一個塊級框,而不論它本身是何種元素。
如果浮動非替換元素,則要指定一個明確的寬度;否則,它們會盡可能地窄。
注釋:假如在一行之上只有極少的空間可供浮動元素,那麼這個元素會跳至下一行,這個過程會持續到某一行擁有足夠的空間為止。
可能的值
第一個元素右浮動的情況下,第一個元素會向右對齊,第二元素會繼承第一個元素的默認初始點(這個初始點是所有頁面的統一規則,默認的左上角為初始位置),如下圖顯示效果及代碼
左浮動不用管,這里主要說一下右浮動,當初與同事產生的分歧也就是在這里:
左右布局兩個div,右浮動究竟應該寫在第一個div上還是第二個div上?
這里我的答案是左右布局的兩個div,右浮動應該寫在第一個div上。
為什麼是這個規則?
首先確定一點,不管右浮動的div會影響誰,右浮動屬性會使本身div在右側對齊;
其次,默認的初始位置是左上,浮動之後就會變成右上,浮動的這個屬性是在「左」「右」的這條水平線上進行位移。
如果左上有第一個div,那麼默認的第二個div會在第一個div的下方定位;因為第一個位置已經被第一個div佔了,在沒有浮動的情況下,他占據的是第一個整個從左到右的水平全部位置,盡管他可能顯示效果就幾像素,就是這樣的機制,別問我為什麼,我也不知道;而第二個div只能從第二個位置開始定位,如果這時候給第二個div添加右浮動,產生的結果就是第二個div在第二個水平位置進行右對齊,而不是第一個div的水平位置右對齊,因為第一個位置已經被第一個div給水平占滿了。
結果就是下圖顯示效果,a的水平區域都已經被a占滿了,b的右浮動只能從b的初始位置進行右位移。
以上就是我左右布局的兩個div,右浮動應該寫在第一個div上的原因
當然,你們可以用a的左對齊重置b的初始位置到a的右上角,管不了管不了。只是我會堅持我的右對齊理論,為什麼?因為規整,心理舒坦!
『陸』 web前端什麼是浮動定位
float:left | right
『柒』 UI設計前端主要學些什麼
UI設計不一定需要精通前端,但是如果UI設計了解前端可以減少和開發人員溝通的技術成本,讓團隊協作更加高效。那UI設計如何學習前端,需要學習到什麼程度呢?
我們分享一個前端教程-網頁鏈接,這裡面詳細講解了UI設計中的Web前端設計規則及工具,可以幫助大家深入理解Web前端UI設計方法。
1、HTLM基礎認知DIV框架及CSS樣式
首先要了解HTLM基礎、CIV框架以及CSS樣式, HTML稱為超文本標記語言,是一種標識性的語言。它包括一系列標簽.通過這些標簽可以將網路上的文檔格式統一,使分散的Internet資源連接為一個邏輯整體。DIV元素是用來為HTLM文檔內大塊的內容提供結構和背景的元素。 CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字型大小樣式,擁有對網頁對象和模型樣式編輯的能力。
2、浮動原理、Margin認知
Margin,是CSS的語法,這個簡寫屬性用於在一個聲明中設置所有當前或者指定元素所有外邊距的寬度,或者設置各邊上外邊距的寬度。
3、框架應用搭建
框架很多,在這個教程中選擇一個主流框架帶大家看看前端框架如何搭建。
4、插入圖片、文字標簽和版頭、導航欄
編寫的網頁中插入圖片,可以使瀏覽網頁的用戶得到更好的體驗效果。在這一部分會講解插入圖片、文字標簽以及版頭和導航欄如何實現。
5、Banner塊插入、內容文字排版、內聯元素、A標簽和Banner鏈接定位
Banner是網路廣告最早採用的形式,也是目前最常見的形式。它是橫跨於網頁上的矩形公告牌,當用戶點擊這些橫幅的時候,通常可以鏈接到廣告主的網頁。而網頁中的文字內容排版也直接影響著網頁的美觀以及網頁的用戶體驗。
6、錨點標簽、超鏈接標簽、固定定位和絕對定位、相對定位
<a> 標簽用於定義超鏈接,用於從一張頁面鏈接到另一張頁面。用於設置錨點,用於頁面定位。
7、導航二級菜單顯示隱藏
很多網頁中的二級菜單欄不直接顯示,需要滑鼠移動到一級菜單或者點擊一級菜單才會展開顯示二級菜單。
8、input表單
input表單可以獲取用戶的信息,做出對應的動作,教程中直觀的展示input表單的應用方法。
其實以上教程只是web前端很小的一部分,UI設計如果能夠了解前端知識,在設計中可以更好的考慮實現問題,也能夠更好的和開發人員交流,也能夠提高團隊協作的效率,加速項目的進度。
『捌』 web前端中,用於對浮動框架的對齊方式如果不是align屬性,那是用哪個
float
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像,使文本圍繞在圖像周圍,不過在 CSS 中,任何元素都可以浮動。浮動元素會生成一個塊級框,而不論它本身是何種元素。
值 描述
left 元素向左浮動。
right 元素向右浮動。
none 默認值。元素不浮動,並會顯示在其在文本中出現的位置。
inherit 規定應該從父元素繼承 float 屬性的值。
『玖』 Web前端基礎】css中浮動屬性有什麼
float right none(不浮動) inherit從父元素繼承浮動的屬性值
『拾』 web前端如果父級和子級都加了浮動會有什麼現象
在WEB前端當中,如果針對元素進行了浮動的設置,則該元素會脫離文檔流而存在,會引起父級元素的塌陷,同時會對同一級別的元素造成布局上的影響。
但是,當為父級元素也設置了浮動之後,父級元素也脫離文檔流,父級元素和子級元素都屬於浮動元素,此時,父級元素高度塌陷的問題反而會被解決(即:另一個元素的父級元素浮動,是針對該子級元素清浮動的一種方法),但是由於父級元素發生浮動,父級元素的兄弟級元素以及父級元素的父級元素,依舊會受到布局的影響。
如果是清除浮動,可以使用多種方法來實現,最為推薦的其實是after偽元素清浮動,會更好用,也是當前WEB前端開發當中最為主流的一種清除浮動方法