HTML網頁設計範例-左圖右字 - Web4Theme

2025-01-20

文章推薦指數： 80 %

投票人數：10人

想要將圖文左右排版，主要是定位或者浮動 Skiptocontent HTML網頁設計範例-左圖右字 228月,2021 Alex zerocomment 網頁設計範例在做頁面開發的時候，有很多的排版方式，如果用代碼將其一一實現，那就需要點耐心了，今天我們使用代碼來做個圖文排版的頁面，左側是圖片區，右側是文字解釋區。

這是很常見的排版，最終效果圖如下：首先先準備圖片素材和文字語言，在body中的手工輸入基本的HTML結構，如下：

網頁範例-左圖右字

生日快樂

也許你並不是為我而生，可我卻有幸與你相伴。

希望在我有生之年，年年為你點燃生日的燭焰。

在你生日這一天，也留下我的願望，願你快樂每一天!

HTML文件名為index.html，相片是從網上找的免費相片，放在index.html所在的文件夾即可。

現時預覽是這樣的：開始添加CSS樣式修飾，指定圖片與文字位置。

最外面的大框添加寬度居中；下面的圖片和文字設置現在的圖文是這樣排版，如圖網頁範例-左圖右字

生日快樂

也許你並不是為我而生，可我卻有幸與你相伴。

希望在我有生之年，年年為你點燃生日的燭焰。

在你生日這一天，也留下我的願望，願你快樂每一天!

想要將圖文左右排版，主要是定位或者浮動，對圖片塊和文字塊都添加了浮動效果後，如圖，添加浮動後，文字部分因為文字太長超出了他所用那的範圍，所以被擠到到了下行的右側，加個overflow:hidden就正常同時將文字區域設置下寬度，不讓他超過最大範圍就行了，示例設置為width:430px 然後再預覽效果圖，加些padding調整一下左右空間，感覺就好看多了。

完整代碼如下：網頁範例-左圖右字

生日快樂

也許你並不是為我而生，可我卻有幸與你相伴。

希望在我有生之年，年年為你點燃生日的燭焰。

在你生日這一天，也留下我的願望，願你快樂每一天!

彩蛋我感覺看到這裏的都已經很認真學習，所以我在這個html範例上再加多了文字圍繞文字的例子，如果有心學習，可以在這裏看頁面代碼（右鍵選擇查看源碼可看到頁面源碼，在相片右鍵點擊可選擇下載到本地，將頁面源碼與相片放在相同位置，就可以用chrome直接預覽），效果如下：更多資料: mailto 語法和常見用法免費開發模板Bootstrap介紹 Alex 發佈留言取消回覆發佈留言必須填寫的電子郵件地址不會公開。

必填欄位標示為*留言*顯示名稱* 電子郵件地址* 個人網站網址 Δ 目錄索引最終效果圖如下：首先先準備圖片素材和文字語言開始添加CSS樣式修飾想要將圖文左右排版，主要是定位或者浮動完整代碼如下：彩蛋關於我們(About) Web4Theme提供一站式網頁設計服務，可提供設計圖或由我們出效果，網站開發遇到的HTML5、Wordpress、伺服器、域名等我們統統搞定。

您只要選擇喜歡的效果就可以，剩下的我們搞定！提供付費技術諮詢服務，伺服器(IIS,Nginx,Ubuntu,Centos)、網站搭建、域名、郵箱等技術問題都可以。

請發郵件至[email protected]或QQ824756152