<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »基礎入門!寫給設計師的前端知識之排版

        基礎入門!寫給設計師的前端知識之排版

        至成科技 2016-04-12 訪問量(1221) 評論(0)
        摘要:

            本文作為小白入門級,相對基礎,是寫給現在想了解一點前端知識的設計師同行們,力求通俗易懂幽默風趣。這一章不僅教大家網頁排版的基礎知識,還以百度藝術百科的網頁為例,帶大家簡單做一遍,學得會更快,來收!

        閱讀須知:

        1. 工具不重要,工具不重要,工具不重要……OK?有人說DW早就淘汰了,我造啊,然后呢?我還打算用小紅本(editPlus)講呢,哈哈哈哈……
        2. 希望乃們接受我這種循序漸進的過程。做算術題你會知道“乘法”和“設未知數”來得更快,但是也得從簡單“加減法”過渡。如果有疑問請留言或私信,下篇會著重講。
        3. 所有內容基于自己的理解和編碼習慣,并非標準。

        好了,進入正題。排版之前先來做點準備工作。

        一、嵌入、內聯樣式

        1. CSS 嵌入

            其實程序員是一幫蠻會偷懶的家伙你信么?^_^ 在碼字過程中,如果遇到常用的一段代碼,就會想辦法打包起來,需要的時候一行代碼或幾行代碼就可以調出來用而不用重復寫,系不系很機智。讓我想起來我們常用的那些PS動作們,不就是同樣的原理嗎?

            來吧,排幾個寬高各100px的div試試,如果你現在還不能默寫的話,建議多練習幾遍。

        如上圖:代碼如下

        (偶的dw過期啦,臨時換了一個。其實也沒多大區別啦,是吧?這是以前一個同事介紹的Webstorm,現在他又不知道換了啥。-_- …乃們繼續用DW敲吧,我會隨時用回DW的,頭部那些東西不要為了和我的一樣而亂改哈。)

        像這種直接放在div標簽內style里的樣式稱為嵌入樣式。只服務于它嵌入的那個標簽,而對其他標簽的樣式不會產生影響。

        但是,每個div都要寫辣么長,明明有些屬性大家都一樣的,還要重復寫好煩啊……所以接下來介紹一下簡便的寫法。

        2. 內聯樣式

        先進步:提“公因式”

        下面這個你們還記得吧?我雖然讀書少,但我還記得,哈哈……提取公因式的原理即使把a、c共同擁有的公因式b提取出來……所得結果一樣。

        同樣方法把前面代碼中style里共同擁有的一句提取出來得到:width:100px; height:100px; float:left;  不同的樣式保留。

        則較后style中就只剩下了顏色值,是不是很短了?而且大部分時間是不用每個div都附上顏色的,我們今天只是拿帶顏色的矩形來模擬一下,所以真正應用時僅存的顏色那一句都會被刪掉。

        但是提取出來的公共樣式又要放到哪里呢?

        介紹一個新名詞:class(這個也是很重要的哦)

        class直譯為級、階級、種類等,也就是相同的東西歸為一類放在一起;我們把提取出來的公共樣式放在class里,在頭部(即head標簽內)新建一個style盒子(標簽),裝入盒子,如下:

        注:1)其寫法不變,依然是”屬性名:屬性值;”,但是外包裝從style:” ” 換成了 class{ }; 由于脫離出來的class沒有盒子可裝,所以html出現了這個專門裝樣式類的標簽盒子。

        2)請注意:class前面還有一個小點 “ . ”。這個點是class的先進標識,瀏覽器讀取到“.className”,才知道這個東西是類名。否則你就是個單詞而已,再讀下去就是一些括號,單詞,瀏覽器就懵了,說好的點呢?怎么不按套路出牌。

        初學時類名可以隨意一點,你寫成  .a、.b、.apple、xiaoming1……都沒事,小寫就行了,但不能是中文及以數字開頭,也盡量不要與標簽名一樣。后面會專門講到命名這一塊。

        第二步:引用

        公共樣式提出來了,也用盒子裝好了,但是他們之間還沒有搭上關系,這就需要在div內引用一下寫好的類:

        所有你想用的div都可以引用那個類,引用的方式是在開始標簽后面加上:class=”className”(這里是不需要有“.”的,但注意不要寫錯哦)。保存刷新一下:

        是不是和前面那種寫法得到的效果一樣?像這種頭部style標簽中能夠被其他標簽通過類名來引用的樣式,稱為:內聯樣式。

        它的作用域就大些了,但是也僅限于當前html文件中,只要引用了便能對引用的標簽樣式產生影響,可復用的。常規做法有時候會加上一句“type=text/css”即為:,但是我一般會省略,發現也木有啥影響,加了應該是比較規范吧。

        class 屬性不能在以下 HTML 元素中使用:base, head, html, meta, param, s cript, style 以及 title。

        小練習:

        寫兩個不同內容的類,分別引用于兩個或更多div。

        寫到這里發現樣式真的好多要講的啊,下篇專門講吧,今天先講一點……

        二、用矩形模擬網頁布局

        請看大屏幕:(截圖于百度藝術百科的網頁)

        這個是相對比較傳統的排版方式,雖然中規中矩,形式卻蠻多的。文字、圖片、標簽、視頻播放……比較適合排版練習。

        web端網頁較大的優勢在于,設計稿什么樣,開發就能做成什么樣,因為不用像移動端考慮那么多適配問題(想想以前的寫手機端黑歷史,托腮仰天,老淚縱橫……T_T)。我給周圍轉web前端的朋友的建議都是,先把PC的布局搞定再去寫移動設備端的會輕松一點。

        1. 審“題”

        拿到設計需求就立馬打開PS做東西的事情,反正我是不干的,一般會事倍功半。同樣,拿到網頁設計稿也請不要立馬開始碼字,我們需要審題。

        告訴我你看上面那張圖片看到了幾塊吧?以前畫素描的時候,老師是不是告訴過你要瞇著眼睛看光影關系,因為人容易被一些細節所影響,所以先鋪大面,再摳細節,一張合格的素描才能被很好的完成。同樣,一個網頁,無論內容再多,分布也是從大到小慢慢摳出來的。

        好吧,說多了暈,來看看我的分法吧,這種思路可能跟你在設計時考慮怎么放東西有點相仿:

        首先,頭部的tab和下方為一塊,分好之后下面的分成兩塊,再然后……

        其實前端工程師差不多是這樣的思路,從上到下,從左到右寫。有的會把其中一個部分寫好再去寫下一個,有的會快速性寫幾個大塊,后面再補。要不是特殊原因,你的設計稿要是不對齊,你就等著他來質問你吧,或者他默認就給你寫對齊了。

        類似C3那里的藝術家模塊,工程師較稀飯了,哈哈哈……寫一段,然后ctrl C  ctrl V,ctrl V,ctrl V……

        廢話不多說,跟著來吧……

        我們按照有效區域1180px來寫,尺寸的話,自己去網站截來量 http://baike.baidu.com/art  。

        現在去看的話是沒有內容的,從上到小先把A1排出來

        好,現在的結構已經不是單獨的平行結構了。先進個div有了自己的孩子(注意換行縮格,這樣層級關系較明顯一些)即裝文字的五個div(也可用其他標簽裝,例如:a、p、span……)。為什么稱之為孩子,因為在html中有子標簽及父標簽一說。有時候子標簽會繼承父標簽的樣式,但大多是標簽所含的內容,而不是標簽本身,即如果給“title_tab”添加針對文本的樣式,那么子標簽內的文本也即將改變,除非子標簽擁有自己的 針對文本的樣式,然而不是所有時候都能成功繼承(誒……越講越多)。

        其代碼如下:

        紅色部分解析:

        (title的樣式那樣寫方便看,你們也可以這樣寫,只不過多了就顯得篇幅較長。)

        1)樣式提供多種書寫方式,不僅僅只有.className,可以帶標簽名 p{}、div{}……帶標簽名則不用前面加點,不過是針對當前html文件中所有p標簽和div標簽,所以你知道我為什么說類名盡量不要使用跟標簽名一樣的了吧?要是忘記寫點了,那畫面,簡直不敢想象。像文中“ *{ } ”的*號則代表所有,margin是間距屬性,每個瀏覽器的默認里面,margin是有值的,所以需要進行一些設置。

        2)padding是內邊距,margin為外邊距;

        當他們只有一個值時(例:padding:10px;margin:10px;),則默認為上下左右都為10px

        當有兩個值時(例:padding:10px  20px;),其代表的是  上下10px,左右20px;

        當有四個值時(例:padding:1px  5px  3px  6px;),則分別針對 :上 右 下 左 ,即順時針方向的值,注意,不是上下左右哦。

        較后,也可單獨針對一邊設置,例:padding-left:10px;  margin-top:20px;

        color設置字體顏色;font-size——字體大小;font-weight——字體粗細(bold、100、200、300……較大也就八九百的樣子,不帶單位);font-family:”微軟雅黑”; ……

        至于float的屬性,請參照上一篇;

        有很多屬性,可以自己去w3cschool慢慢找來試一試。

        好了,今天就講到這里了,你們看我寫的代碼都有點不一樣,就說明不是一天寫的啦,時間真是不夠用呢。下篇補充樣式內容,接著排版。

        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划