                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /企業(yè)網(wǎng)站綜合布局實戰(zhàn)

布局的時候這兩項怎樣做才更方便呢

1、寫一部分內(nèi)容跟著寫樣式；（比如寫完header內(nèi)容就寫樣式）

2、寫完所有內(nèi)容，再設(shè)置樣式；

怎樣做才更合理呢

蘇慕然

2015-12-31

源自：企業(yè)網(wǎng)站綜合布局實戰(zhàn) 3-3

關(guān)注問題我要回答

729

操作

收起

3 回答

redrain_lin
2015-12-31

額。流程上應(yīng)該先寫完結(jié)構(gòu)再寫樣式。這樣算是統(tǒng)領(lǐng)全局吧。速度上也算快的。如果一邊寫結(jié)構(gòu)一邊寫樣式，沒有全局意識很容易后面寫的樣式對前面產(chǎn)生干擾。而且來回的看結(jié)構(gòu)與樣式我覺得很浪費時間，純粹是我的工作體會。不具代表性，你應(yīng)該能在實際工作中理解才對。

0 回復有任何疑惑可以回復我~

收起回答

augushong
2015-12-31

一般來講在用代碼做網(wǎng)頁的時候，

首先考慮頁面樣式的布局（這個地方是什么內(nèi)容、那個地方是什么內(nèi)容，心里有個樣子，）但不考慮樣式的實現(xiàn)（不寫任何代碼）；（就是說心里有個數(shù)，簡單從紙上畫幾個框框就行，一般來你的方案書里都已經(jīng)有了簡單的布局，我想你是問的“邊開發(fā)邊設(shè)計邊實現(xiàn)”這樣自己折騰著制作方式。）

然后考慮頁面內(nèi)容的結(jié)構(gòu)（這個地方是題目、那個地方作者信息）并以<div></div>的方式表示出這些結(jié)構(gòu) 但不考慮<div></div>容器內(nèi)的實際內(nèi)容；（就是說找一堆大小不一樣的瓶子——特指<div>容器，把瓶子放好，哪個小瓶子在哪個大瓶子里面，瓶子不需要填充內(nèi)容，也可以稍微填一下描述性的東西，類似于：“這里是個標題”、“這里是作者信息”?，F(xiàn)在建立html文檔，在文檔里放置<div>，對每個<div>元素設(shè)置類名稱或id，便于知道每個容器的內(nèi)容是什么，也便于用css控制。）

當你把頁面內(nèi)容的結(jié)構(gòu)設(shè)計完成，便往每個容器里填入描述性的文字，比如：“這是一個標題”、“這是主要內(nèi)容這是主要內(nèi)容這是主要內(nèi)容這是主要內(nèi)容這是主要內(nèi)容這是主要內(nèi)容這是主要內(nèi)容這是主要內(nèi)容這是主要內(nèi)容這是主要內(nèi)容”。

現(xiàn)在另建立一個css文檔并引入到該html里，兩個文檔同時打開，開始控制每個容器樣式。

舉個例子：

第一步：

一個神奇的頁面布局計劃書登場

1：文章標題

2：文章內(nèi)容

3：作者信息

P.S.有很多框框，有很多編號，用很多對編號的解釋，好吧，不多，就三個

第二步：

一堆html代碼，但我省略了很多，你知道我省略了哪些

......
<body>
????<div?id="title">
????????這里是要放文章的標題的
????</div>
????<div?id="main_contents">
????????<div?id="passage">
????????????這里是要放文章的內(nèi)容的這里是要放文章的內(nèi)容的這里是要放文章的內(nèi)容的
????????????這里是要放文章的內(nèi)容的
????????</div>
????????<div?id="info_abot_wtr">
????????????這里是要放作者的信息的
????????</div>
????</div>
</body>

注：我是先寫了標簽，然后寫了id,然后填充的描述性內(nèi)容。

可以標簽和id一起寫，但我個人覺得一起寫很不爽，既要考慮結(jié)構(gòu)，又要給每個結(jié)構(gòu)起名字，不如先把東西擺好，然后再給起名，這樣還可以檢查一下剛剛的結(jié)構(gòu)有沒有不合理的地方。

有的人會發(fā)現(xiàn)在方案圖里，只有三個框框，為什么代碼用了四個<div>容器呢？是這樣的，搞設(shè)計的人可能不太了解html頁面內(nèi)容的結(jié)構(gòu)，只是把內(nèi)容的位置畫了出來，而在html結(jié)構(gòu)里，我們認為2和3是統(tǒng)一級的（同一個層次），所以要把2和3在結(jié)構(gòu)上放到同一級，所以在2和3外還有一個容器。

用圖解釋，是這樣的：甲圖是表示單純的理解方案圖，乙圖是按照頁面內(nèi)容結(jié)構(gòu)的表示