CSS設計制作長度高度不一樣的網頁區塊

2024-07-11 09:04:33

字體：大中小

來源：轉載

供稿：網友

武林網(www.survivalescaperooms.com)文章簡介：網頁每個區域模塊的長度和高度不一,用css怎么實現這種類似組件讓其具有擴展性呢?

經常在網站上會發現如下圖這樣的常用組件模塊,這也是我最近做的一個網站項目,我把我的做法整理出來與大家分享一下.

CSS設計制作長度高度不一樣的網頁區塊

每個區域模塊的長度和高度不一,用css怎么實現這種類似組件讓其具有擴展性呢?

CSS設計制作長度高度不一樣的網頁區塊

先看模塊的title部分,先做一張足夠區域的title背景圖片,如下圖:(bg_title.gif)

1.定義title的背景和高度.讓圖片從右邊開始顯示.

.title { background:url(bg_title.gif) no-repeat top right; height:26px}

2.定義標題部分,我們用h1標簽,同樣定義標題的背景和高度及其他樣式.讓圖片從底部開始顯示.

.title h1 { margin:0; padding:0; background:url(bg_title.gif) no-repeat left bottom; height:26px; line-height:26px; text-align:center; color:#000; font-weight:700}

3.根據實際需要定義title背景的寬度和h1標題的寬度

.title_width1 { width:300px}
.h1_width1 { width:80px}

再看圓角的內容部分,切成兩張圖片,一張從右邊圓角開始的足夠大的圖片(bg1.gif)

CSS設計制作長度高度不一樣的網頁區塊

一張左邊圓角細線圖片(bg2.gif)

1.定義內容區域的寬度、和背景圖片(bg1.gif)。
2.定義左邊圓角細線圖片背景(bg2.gif)。我們這里用p標簽。

.box { background:url(bg1.gif) right bottom; margin-bottom:15px}
.box p { margin:0; padding:10px; background:url(bg2.gif) no-repeat left bottom; line-height:20px;}
.box_width1 { width:300px}

實現原理同理title部分

全部示例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>網站常用組件的擴展性做法</title>
<style type="text/css">

</style>
</head>
<body>
<div class="title title_width1">
<h1 class="h1_width1">四字標題</h1>
</div>
<div class="box box_width1">
   <p>我們站的流量在短短4個月內增加了3倍，廣告盈利也翻倍了。很高興得到易聞公司的服務，希望易聞在搜索引擎營銷的道路上越走越好！</p>
</div>
<div class="title title_width2">
<h1 class="h1_width2">六字標題標題</h1>
</div>
<div class="box box_width2">
   <p>我們站的流量在短短4個月內增加了3倍，廣告盈利也翻倍了。很高興得到易聞公司的服務，希望易聞在搜索引擎營銷的道路上越走越好！我們站的流量在短短4個月內增加了3倍，廣告盈利也翻倍了。很高興得到易聞公司的服務，希望易聞在搜索引擎營銷的道路上越走越好！</p>
</div>
<div class="title title_width3">
<h1 class="h1_width3">八個字長度的標題</h1>
</div>
<div class="box box_width3">
   <p>我們站的流量在短短4個月內增加了3倍，廣告盈利也翻倍了。很高興得到易聞公司的服務，希望易聞在搜索引擎營銷的道路上越走越好！我們站的流量在短短4個月內增加了3倍，廣告盈利也翻倍了。很高興得到易聞公司的服務，希望易聞在搜索引擎營銷的道路上越走越好！我們站的流量在短短4個月內增加了3倍，廣告盈利也翻倍了。很高興得到易聞公司的服務，希望易聞在搜索引擎營銷的道路上越走越好！</p>
</div>
</body>
</html>