網頁設計的第一步是設計版面布局。就像傳統的報刊雜誌編輯一樣，將網頁看作一張報紙、一本雜誌來進行排版布局。雖然動態網頁技術的發展使得開始趨向於學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。
本章將結合**和文字，在css布局的頁面中，講解如何控制**之間的關係。
在出版物的應用中，一般比較重視**排版的樣式。文字排版一般有兩種形式，通欄排版和分欄排版。進行通欄排版是直接將段落文字放置於p或其他物件中，再對段落文字應用間距、行距、字型大小等樣式控制，便形成了排版雛形。
通欄排版主要是以新聞、法律以及文字內容為主的物件。
分欄排版是使之能夠像報紙一樣實現分欄顯示的排版。在css 2技術中，實現類似報紙的二欄或三欄式排版，必須借助於二列布局一樣的兩個div浮動定位而形成二列的空間，然後再將文字分別填充於二列之中。文字內容進行分欄排版的網頁如圖10-1所示。
圖10-1 採用分欄排版的網頁
本節將詳細介紹分欄的文字排版樣式的實現方法。
注意：css的基本布局將在第三篇重點介紹，二列布局便是基本布局中的一種。
div用於對某乙個區域的標識，而二列的布局，需要使用到兩個div。現在來使用二列布局的方法來製作分欄的文字排版，製作步驟如下。
（1）製作分欄排版頁面的xhtml**，如下。
[…][…]在以上**中，使用了兩個class為col的div的物件。現在所需要做的是，為它們指定寬度，然後讓兩個div在水平方向併排顯示，從而形成二列式布局。
（2）製作排版的css樣式，**如下。
p#layout
.col
圖10-2 背景**
在以上**中，首先使用標籤指定式選擇符定義了p元素的行高為180%，也就是字型高度的180%，並定義了字型大小、字型顏色。然後，為整個頁面#layout元素指定了寬度500px和高度300px，同時指定了背景**，背景平鋪，使頁面美觀，背景**如圖10-2所示，指定#layout居中於瀏覽器顯示。
最後，直接對用於分欄的.col元素編寫了寬度200px，內邊距上下為8px、左右為10px，目的是使欄與欄之間留出空隙，方便閱讀瀏覽。同時向左浮動，這樣從而實現了二欄式排版，預覽效果如圖10-3所示。
圖10-3 分欄排版預覽效果
在文章段落之中經常會需要插入**，在css布局之中，可以通過控制css**對**進行控制，實現**混排的效果。
在開始**排版之前，先來****和文字排版的幾種基本樣式。
（1）**混排基本樣式一
現在準備了乙個段普通的文章頁面，應用**只需將**插入到所有段落文字的最前面，xhtml**如下。
[…]在以上**中，為**新增了乙個div，是因為考慮到隨後在**上會增加一些細節排版，將**設計成乙個div包含，使用div來控制img物件。直接插入**後的預覽效果如圖10-4所示。
圖10-4 **混排基本樣式一
（2）**混排基本樣式二
現在的div物件保持著div佔據正行的顯示方式，嘗試改變影象居中。新增了css樣式，**如下。
.pimg
在以上**中，text-align屬性用於控制物件內的內容居中顯示，應用這個屬性之後，img物件在div之中也能夠保持居中狀態，修改後的預覽效果如圖10-5所示。
（3）**混排基本樣式三
在實際應用中，有時也會應用文字繞**的排版方式，這時可以使用浮動定位的方法，通過設定物件的float屬性來使文字內容流入物件的旁邊。修改css樣式，**如下。
.pimg
在以上**中，在**居左之後，為了使**與文字有一定的空間，我們使div物件具有了10px的內邊距，預覽效果如圖10-6所示。
圖10-5 **混排基本樣式二
圖10-6 **混排基本樣式三
採用單獨的div物件定位**與文字是目前**上非常普遍的做法，通過物件的定位能夠很好的形成乙個復合的排版布局，在頁面內容上也能給使用者帶來最大的方便。
圖10-7 焦點**
（1）製作**混排頁面的xhtml**，如下。
[…]在以上**中，使用乙個id為layout的div物件，放置了標題、**、文章正文內容的資訊具有複雜的結構用以顯示這些資訊。h3用以顯示標題，p物件用以顯示正文內容，而對於焦點**則放置於乙個div物件中用來控制其樣式，焦點**如圖10-7所示。
網頁xhtml結構預覽效果如圖10-8所示，在沒有新增任何樣式的情況下，屬於**混排基本樣式一的型別。
圖10-8 xhtml結構預覽效果
（2）製作#layout元素的css樣式，**如下。
#layout
在以上**中，為整個頁面定義了背景**，不平鋪，同時指定了背景的寬度和高度，保證背景**完整顯示；使用了類選擇符，還指定了內邊距，把主體內容顯示在頁面的正中位置，背景**如圖10-9所示。
圖10-9 背景**
此時預覽效果如圖10-10所示。
圖10-10 新增#layout樣式的頁面預覽效果
從圖10-10可以看出，文字主體仍然在背景區域之外，並且排版也不美觀，所以繼續新增css樣式。
（3）製作h3元素的css樣式，**如下。
h3{ color: #333333設定字型顏色*/
border-bottom: dotted 1px #b1b4b2設定邊框樣式*/
display: block設定塊狀元素顯示方式*/
width: 240px設定寬度*/
line-height: 30px設定行高*/
2019注安管理基礎版第10章
安全生產管理知識 考試大綱 一 考試目的 考查專業技術人員運用安全生產管理基礎理論和方法，辨識 評價和控制危險有害因素，組織開展隱患排查治理，改善生產作業環境，制定安全制度和規程，規範從業人員作業行為，增強安全管理的系統性和有效性，提高企業生產安全事故 預警和應急救援能力，提高生產安全事故調查 統計...
第7章床墊的製作工藝
本章重點 1.彈簧床墊生產工藝流程。2.彈簧軟床墊彈簧芯製作工藝。3.彈簧軟床墊絎縫層與圍邊製作工藝。4.彈簧床墊 工藝。7.1彈簧軟床墊的生產工藝過程 根據彈簧床墊的結構，床墊的生產工藝主要分為彈簧床芯生產 新增鋪墊料 絎縫層加工以及最終的 配四大工序。生產總流程圖與分車間流程圖如圖7 1 圖7 ...
第10章 第1講交流電的產生及描述
第十章第一講 一 選擇題 1 下列四幅圖是交流電的圖象，其中能正確反映我國居民日常生活所用交流電的是 答案 c 解析 我國居民日常生活所用的是正弦式交流電，其電壓的有效值是220v，最大值為311v，週期為0.02s，所以只有c正確 2 2009 蘇北四市聯考 矩形線框在勻強磁場內勻速轉動過程中，線...