您現在的位置是:電腦技術吧?>? 組裝維修 ??>??寫給大家看的設計書,寫給設計師的話??>??正文詳情

寫給大家看的設計書,寫給設計師的話

臺飲香2019-11-17 05:10:38 人圍觀
簡介對設計師的祝福迪夫生來就有欺負人的基因(如果你不明白,請先看最后一篇文章)。事實上,這主要是因為你還沒有遇到能征服它的人!哈哈,今天帶大家去把他干掉,好吧,我承認

div是帶著霸道基因出生的(不明白的請先看完上一篇哦),其實它主要是還沒有碰上能征服它的你吧!哈哈今天帶大家來把他拿下。

  好吧,我承認附加樣式這個詞不知道是從哪兒看的還是我自己這么叫的,我們之后就分為樣式和默認樣式吧。

  一、矩形排排坐  乃們還記得下面這張圖嗎?

  他們真的是很霸道呢,不過在html界,霸道的多了去了,今天我們先來把它收拾一下吧。

  在body內畫兩個矩形:  div style=width: 100px; height: 100px;background-color: yellow;/div  div style=width: 100px; height: 100px;background-color: blue;/div  (PS:html里的顏色也是直接可以寫單詞的,不想寫顏色值的童鞋也可以直接寫pink、black、red等平時知道的一些顏色英文單詞。

上一節中忘了告訴大家,顏色值3位和6位都是可以的,例如:#333333,#4ed都行,要問為什么的話還要扯上進制,我就不再贅述,你們記得就行了。

)  然后保存,瀏覽器打開,即可看到:

  那為了讓藍色矩形排在黃色矩形右邊讓他們排成一橫排的話,首先讓黃色矩形讓個位置,靠邊站,  在第一個矩形中加入一條新樣式:float:left;(即向左靠,遵循我們的寫字習慣從左往右排吧,你也可以試試向右靠)  然后

  啊嘞?怎么只剩一個了!!!  待我給你慢慢道來

  嗯,你問我講這個干嘛?再教你一個屬性:opacity(透明度),其后跟的是小數,0.5即表示50%透明度。

  div style=width: 100px; height: 100px;background-color: yellow;float:left; opacity:0.5; /div  div style=width: 100px; height: 100px;background-color: blue;/div  然后保存刷新:

  如果你去驗證了,你會發現這個顏色就是我們在PS里降低黃色透明度與藍色相交得到的顏色。

也就是說:

  是的,沒錯,藍色矩形被黃色矩形遮住啦。

(下面我們簡稱兩個矩形為小藍和小黃)  至于為什么會被遮住,這是跟float這個屬性相關的。

float直譯過來即是浮動的意思,也就是添加了float屬性的小黃實際上是浮起來了,所以原先它站的位置就空了,小藍篡位而上占據了小黃原來的位置。

就像圖層一樣,上面的圖層會遮住與它自身一樣大小的面積,所以后來的小藍永遠不能與小黃平起平坐(嗚嗚嗚你是我無法企及噠)。

但是你光在藍色矩形上加浮動屬性又沒有用,div天生的霸道基因不允許不信你試試,哈哈

  那么問題來了,想排排坐,又不想被小黃踩在腳下,怎么辦呢?  只有把小藍也提起來咯。

  所以兩個矩形都應該加float屬性,這樣他們才處于同一層,

  div style=width: 100px; height: 100px;background-color: yellow;float:left; /div  div style=width: 100px; height: 100px;background-color: blue;float:left; /div  好啦,可以自己嘗試多畫點大小不一的矩形,讓他們排一下,不過不是所有的都能好好排的。

在html中,body的大小雖然是無限的,可是你的屏幕也只能顯示那么點東西做再寬有什么意義呢。

除了現在很流行的滿屏網頁,一般網頁都會規定寬度而不會規定高度。

你可能經常見到有豎滾動條的網頁,但是橫向滾動條的幾乎沒有(除非你的設備屏幕小于一般PC屏幕或者把網頁放大了幾倍等其他原因),所以也可以說網頁大小是和你瀏覽器顯示區域有關。

  所以許多網站會取一個多種屏幕都適用的內容寬度,也就是做webUI時你留的有效內容區域(常見的有1200px、1001px等)。

開發人員會根據你的尺寸來確定一個最大寬度來排版。

  多畫幾個高度一樣寬度不一的矩形,為它們都加上向左浮動的屬性(float:left;)縮小你的瀏覽器寬度,你會發現,它們不會一直呆在第一排,有時候竟會換行。

當最右邊的距離不足以放下它,他就會選擇換一行。

這也是現在響應式網站的奧妙之一,同一個網頁,PC和手機都可以瀏覽,且布局會有所改變但不影響內容。

如下圖:

  你猜紅色的是不是在發現沒有位置了換到第三行而變成了手機上看到的頁面那樣?(*^__^*)

版權聲明:本文由 臺飲香 整理編輯。

原標題:寫給設計師的一本書,寫給設計師看的書

轉載注明出處:http://www.dn9ww09s.icu/assemble/13063.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 自刪除exe,exe怎么刪除

    自刪除exe,exe怎么刪除 相關圖片誤刪exe最近,很多小伙伴說,打開任務管理器后,他們發現一個名為xlueops.exe的程序正在運行。那么什么是xlueops.exe?可以刪除xlueops.exe嗎?注冊表exe不小心刪除...

  • 什么是阿爾法狗,為什么叫阿爾法狗

    什么是阿爾法狗,為什么叫阿爾法狗 相關圖片阿爾法狗宣布退役第二屆阿里巴巴UCAN用戶體驗論壇的演講即將開始。本次會議的嘉賓是同濟大學設計與創意學院院長盧永琪。未來的設計將如何發展,設計的本質是什么?這次演講一定...

  • 為什么右鍵新建沒有word,右鍵新建word

    為什么右鍵新建沒有word,右鍵新建word 相關圖片右鍵新建沒有wps一些用戶安裝Office后,發現鼠標右鍵沒有新的word選項,在使用過程中非常不方便。如果右鍵單擊創建一個新單詞怎么辦?如何右鍵單擊以添加單詞?Word2007電腦無法新建...

  • 環境音效,環境音效選什么

    環境音效,環境音效選什么 相關圖片腳步聲音效本周末,我將介紹三個可以模擬環境聲音效果的在線網站(咖啡廳、雨天、海邊、叢林等),它們不僅可以幫助你集中精力工作,還可以幫助你放松和減壓,這是非常實際的...

  • 新版高德地圖的組隊在哪里,高德地圖組隊查老公

    新版高德地圖的組隊在哪里,高德地圖組隊查老公 相關圖片高德地圖組隊能通話嗎最近,goldmap推出了團隊建設功能。很多用戶說他們不明白goldmap team building的用途是什么?如何使用goldmap團隊建設?然后,超人軟高德地圖如何使用組隊成員...

  • html5如何兼容瀏覽器,html瀏覽器兼容問題

    html5如何兼容瀏覽器,html瀏覽器兼容問題 相關圖片支持html的瀏覽器代碼如下:!DigTytHMLHTMLHeMeTimaCARSt集= UTF- 8標題歌詞同步播放器由WiuuWuWeWi/TimeLeta HTTP Edv=前端瀏覽器兼容...

  • sgtool應用程序錯誤,logonui應用程序錯誤

    sgtool應用程序錯誤,logonui應用程序錯誤 相關圖片update.exe應用程序出錯最近,許多合作伙伴說,他們在打開計算機任務管理器時發現了一個名為ravmond.exe的程序。什么是ravmond.exe?ravmond.exe的應用程序錯誤應用程序錯誤0xc0000142...

  • mds文件怎么用,mds文件手機怎么打開

    mds文件怎么用,mds文件手機怎么打開 相關圖片mds是啥軟件最近,許多合作伙伴說他們在他們的計算機中發現了以MDS結尾的后綴文件。那么MDS文件是用什么打開的?什么是MDS文件?現在,讓我們跟隨超人軟件學習MDS文件。希mds游戲怎...

  • div背景色,div背景色透明度

    div背景色,div背景色透明度 相關圖片打印div背景色代碼如下:高度:自動!重要信息;高度:550px;最小高度:550px;在div結尾處添加代碼:divstyle=clear:both;/div或使用brstycss 背景色...

  • 花屏,顯示花屏

    花屏,顯示花屏 相關圖片rtx花瓶近日,不少PPS用戶和朋友反映,他們在使用過程中發現了花屏現象。那么PPS花屏呢?接下來,超人軟件編輯將介紹如何解決PPS花屏。讓我們看看PPS花屏顯卡花屏修復...

熱評文章

  • win7的臨時文件在哪,win7大量臨時文件

    win7的臨時文件在哪,win7大量臨時文件 相關圖片windows系統臨時文件最近,很多小伙伴說,他們用系統維護軟件檢查電腦,發現了很多臨時文件。我可以刪除win7的臨時文件嗎?win7的臨時文件夾的路徑在哪里?我不需要說太多。接下來...

  • win7無法關機修復工具,win7一直顯示正在關機

    win7無法關機修復工具,win7一直顯示正在關機 相關圖片w7系統不能關機怎么辦最近,很多win7的用戶和朋友都報告說,當他們想關機時,點擊關機按鈕總是無法反映。那么如果win7不能關閉呢?現在,超人軟件編輯器告訴你,如果win7點擊關閉,...

  • 圖像網格轉換,醫學圖像與網格

    圖像網格轉換,醫學圖像與網格 相關圖片怎樣關閉ps打開圖像上的網格網格化圖像效果在設計中也很常見,如圖4-127所示。此效果適合作為網頁或列的背景圖像。具體制作方法如下:圖4-127網格圖像效果1。打開焰火中的材質圖像...

  • wps公式編輯器無法使用,wps重新安裝公式編輯器

    wps公式編輯器無法使用,wps重新安裝公式編輯器 相關圖片wps公式編輯如何改變字體在使用WPS進行編輯時,有時需要插入公式,但此時,我們發現公式的選項將變為灰色并且不可用。怎么了?WPS公式編輯器不能做什么?下面的小編輯為您帶來W...

  • reset,reset是什么

    reset,reset是什么 相關圖片trip reset什么意思在當今的Web設計/開發實踐中,使用CSS向語義(x)HTML標記添加樣式樣式是一個重要的關鍵。在設計師的夢想中,有一個完美的世界:所有瀏覽器都可以理解和應用多電腦...

  • steam無充值加好友,steam怎么設置拒絕加好友

    steam無充值加好友,steam怎么設置拒絕加好友 相關圖片steam0級加好友如果在steam平臺上下載安裝游戲,當一些游戲需要邀請好友參與時,可以直接粉碎steam搜索好友,與好友一起體驗游戲的樂趣。但有些用戶仍然不知道如何在steam網頁版stea...

  • win10臨時文件能刪嗎,c盤臨時文件可以清理嗎

    win10臨時文件能刪嗎,c盤臨時文件可以清理嗎 相關圖片windows臨時安裝文件可以刪除嗎在Windows系統中,臨時文件的積累是導致系統運行緩慢的一個非常重要的原因。我可以刪除臨時Windows文件嗎?臨時windows文件夾在哪里?讓我們用超人軟win...

  • ppt保存格式,excel保存格式

    ppt保存格式,excel保存格式 相關圖片excel保存后格式消失文本區域的格式在保存時可以保存到數據庫中,但在顯示時,由于/N和不能相互旋轉,頁面不能按開頭的格式顯示,因此在顯示頁面時,應該在值外嵌套一層標簽,即...

  • 電腦用格式工廠怎么剪輯視頻,格式工廠截取片段

    電腦用格式工廠怎么剪輯視頻,格式工廠截取片段 相關圖片格式工廠無法再次截取作為互聯網上最強大的免費視頻編輯工具,format factory被認為有很多剛使用過這個軟件的新手朋友。他們不知道如何從format factory截取視頻以格式工廠如何剪掉不要...

  • icon圖標,iconfont圖標

    icon圖標,iconfont圖標 相關圖片icon設計現在越來越多的移動應用和web應用開始重視動態效果的設計,它能給用戶帶來愉悅的交互體驗,是應用美觀的重要組成部分。(`)圖標,即圖標。在交互過程中,各種圖標的應圖...

關注微信

变脸官网查询