靜態網頁製作

網頁製作最終目的是展示給客戶，服務的物件以客戶為主，所以網頁製作中布局結構非常重要，通常我們使用劃分網頁，使其形成基礎的上下與左右布局，瀏覽器預設情況下使用上下自動排版，所以主要設定左右布局,左右布局在設定時需要使這兩個板塊浮動，通過float這個屬性創造我們需要的樣式。

.youhh_left

.youhh_right

結合網頁的尺寸合理使用margin設定寬度間距，完成基礎的左右排布

布局之後需要填充內容，內容的選取以需求為主，使用css樣式對靜態網頁內容屬性進行設定，使其排布樣式合理，**效果舒適

由於板塊的高度需要根據內容高度自適應，所以不能設定固定高度，但是其子元素浮動時不能使其撐開，所以使用 overflow:hidden;屬性使其撐開，這個屬性在這個樣式試用下必須固定搭配子元素的浮動，構造出超過其本身定義下的樣式

.youhh .youhh_left .youhh_right

通常情況下某一div劃分的版塊內需要繼續排版，通過div劃分結構。對這些內容屬性設定可以直接使用class屬性，新增類名稱，每乙個元素可以有多個類名，同乙個類名也可以賦給很多個元素。例：

.demo

div下通常包含很多子元素，子元素標籤可以是各類標籤，選取子元素時需要選擇器

例：div p {}；

div, p, span,a {}

；div>p

...div p {}

; div>p{}這兩個樣式在使用中需要區別的是div p{}是直接選擇div下邊的所有p, div>p{}是作用於div下直接子元素的p,不是直接子元素的p不受影響

div, p, span,a {}

使用逗號連線時，給這些標籤下的元素設定同樣的樣式

根據課程學習中所發現使用較多的效果為懸浮時出現某乙個顏色一定程度的透明層與邊框，這個效果來加強表示我們懸浮此項的效果，所以層是我們人為定義的概念，可以有不同的表示。

懸浮某個子元素時使其出現這個「層」，這種效果可以直接給其新增統計div元素，對這個同級的div進行樣式設定，來達到滑鼠懸停時顯示「層」。

設定「層」時需要使其隱藏在該元素下方，使用display對滑鼠懸停時顯示和正常情況下「層」的隱藏進行設定。如下左右對比圖：

.youhh_ceng

.youhh_left_bottom:hover .youhh_ceng

懸浮只能讓子集顯示，所以選擇「層」的位置對於顯示效果有影響，例如當「層」與img同級時，懸浮img顯示「層」的效果不能出現，使用div包裹img不留間隙,然後設定img同級層，實際上懸浮img出現「層」效果在設定時還是懸浮的他的父元素，當img與其父元素div同樣大小時出現想要的效果

與懸浮顯示「層」同樣的會有顯示異色邊框的效果，直接給div設定其邊框屬性，在頁面上相鄰的div會出現邊框相鄰顯示的線條較粗，看起來比較突兀。也可以給其設定對稱位置單邊框顏色，但是就會在邊框接連處出現斷點，如果直接只設定乙個邊框，那麼懸浮時要出現全邊框就會出現晃動，增大了間距，懸浮時，某一邊位置固定，就會向另一邊擠來放下懸浮邊框，所以會出現晃動。

與「層」的概念相同，「層」是設定乙個div，對其背景進行顏色與透明度進行設定，異色邊框與其類似，設定div邊框即可，其他屬性與「層」相似。

「層」是設定div之後的效果，所以這個div內部可以新增並設定子元素，如下左右效果對比顯示，上部分出現透明層，下方為帶文字描述的非透明層。

上述為瀏覽時發現較多出現的樣式，使用常用的css樣式完成的效果。

靜態網頁製作

靜態網頁製作

使用html製作靜態網頁

靜態網頁的製作步驟

靜態網頁製作

靜態網頁製作

使用html製作靜態網頁

靜態網頁的製作步驟

相關推薦