響應式佈局的簡單案例介紹
響應式佈局
響應式佈局在面對不同解析度裝置彈性強，在平時的網頁設計中基本上都要用到響應式佈局設計，它給我們提供了良好的用戶瀏覽頁面，能帶給我們更好的客戶體驗，下面給大家分享下我做的一個簡單的響應式的佈局：
不同的頁面會適用不同大小瀏覽器頁面，它會隨著解析度的變化而改變。程式碼顯示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p{
font-size: 12px;
}
header{
width: 100%;
}
header img{
width: 100%;
}
@media (min-width: 1300px) and (max-width:1400px) {
#left{
float: left;
width: 30%;
margin: 0px 50px;
}
#left #logo-bg{
margin: 10% 10%;
width: 80%;
position: relative;
}
#left #logo{
float: left;
width: 12%;
position: absolute;
left: 13%;
top: 230px;
}
#left p{
margin-bottom: -20px;
}
#left p,h4{
text-align: center;
color: red;
}
#right{
float: left;
width: 60%;
margin: 15% 0px;
}
#right h2{
text-align: center;
}
#right fieldset{
text-align: center;
border-left: none;
border-right: none;
border-bottom: none;
}
#right fieldset legend{
padding: 0px 20px;
}
#fen{
width: 100%;
-webkit-column-count: 6;
-moz-column-count: 6;
-o-column-count: 6;
-ms-column-count: 6;
column-count: 6;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
-o-column-gap: 1em;
-ms-column-gap: 1em;
column-gap: 1em;
}
#fen img{
width: 100%;
border-radius: 10px 10px 10px 10px;
}
#fen p,h4{
text-align: center;
color: red;
}
#fen p{
margin-bottom: -20px;
}
#di p{
text-align: center;
}
#di p span{
color: red;
}
}
@media (min-width: 1000px) and (max-width:1300px){
#left{
float: left;
width: 30%;
margin: 0px 50px;
}
#left #logo-bg{
margin: 10% 10%;
width: 80%;
position: relative;
}
#left #logo{
width: 12%;
position: absolute;
left: 14%;
top: 190px;
}
#left p{
margin-bottom: -20px;
}
#left p,h4{
text-align: center;
color: red;
}
#right{
float: left;
width: 60%;
margin: 15% 0px;
}
#right h2{
text-align: center;
}
#right fieldset{
text-align: center;
border-left: none;
border-right: none;
border-bottom: none;
}
#right fieldset legend{
padding: 0px 20px;
}
#fen{
width: 100%;
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
-ms-column-count: 3;
column-count: 3;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
-o-column-gap: 1em;
-ms-column-gap: 1em;
column-gap: 1em;
}
#fen img{
width: 100%;
border-radius: 10px 10px 10px 10px;
}
#fen p,h4{
text-align: center;
color: red;
}
#fen p{
margin-bottom: -20px;
}
#di p{
text-align: center;
}
#di p span{
color: red;
}
}
</style>
</head>
<body>
<header>
<img src="/static/imghw/default1.png" data-src="img/rag.png" class="lazy" / alt="響應式佈局的簡單案例介紹" >
</header>
<aside id="left">
<img src="/static/imghw/default1.png" data-src="img/logo-bg.png" class="lazy" id="logo-bg"/ alt="響應式佈局的簡單案例介紹" >
<img src="/static/imghw/default1.png" data-src="img/logo.png" class="lazy" id="logo" / alt="響應式佈局的簡單案例介紹" >
<hr />
<p>THE</p>
<h4 id="WEBLOCUE">WEBLOCUE</h4>
<hr />
<p>THE</p>
<h4 id="WEBLOCUE">WEBLOCUE</h4>
<hr />
<p>THE</p>
<h4 id="WEBLOCUE">WEBLOCUE</h4>
<hr />
</aside>
<article id="right">
<h2 id="Give-nbsp-me-nbsp-problems-nbsp-give-nbsp-me-nbsp-work">“Give me problems, give me work.”</h2>
<p>In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course.</p>
<p>In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course.</p>
<fieldset><legend>victors</legend></fieldset>
<p id="fen">
<img src="/static/imghw/default1.png" data-src="img/1.jpg" class="lazy" / alt="響應式佈局的簡單案例介紹" >
<p>SETCOME</p>
<h4 id="HOLEMES">HOLEMES</h4>
<img src="/static/imghw/default1.png" data-src="img/2.jpg" class="lazy" / alt="響應式佈局的簡單案例介紹" >
<p>SETCOME</p>
<h4 id="HOLEMES">HOLEMES</h4>
<img src="/static/imghw/default1.png" data-src="img/3.jpg" class="lazy" / alt="響應式佈局的簡單案例介紹" >
<p>SETCOME</p>
<h4 id="HOLEMES">HOLEMES</h4>
<img src="/static/imghw/default1.png" data-src="img/4.jpg" class="lazy" / alt="響應式佈局的簡單案例介紹" >
<p>SETCOME</p>
<h4 id="HOLEMES">HOLEMES</h4>
<img src="/static/imghw/default1.png" data-src="img/5.jpg" class="lazy" / alt="響應式佈局的簡單案例介紹" >
<p>SETCOME</p>
<h4 id="HOLEMES">HOLEMES</h4>
<img src="/static/imghw/default1.png" data-src="img/6.jpg" class="lazy" / alt="響應式佈局的簡單案例介紹" >
<p>SETCOME</p>
<h4 id="HOLEMES">HOLEMES</h4>
</p>
<fieldset><legend>*</legend></fieldset>
<p id="di">
<p>In the year 1878 I took <span>Suing table</span> dogree of Doctor</p>
<p>What the year 2016 I took dogree <span>Ruing roid</span> of Doctor</p>
</p>
</article>
</body>
</html>做的不夠嚴謹，因為時間問題，請見諒。
以上這篇響應式佈局的簡單案例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。
更多響應式佈局的簡單案例介紹相關文章請關注PHP中文網！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用HTML和CSS建立響應式部落格清單佈局
Oct 21, 2023 am 10:00 AM
如何使用HTML和CSS創建一個響應式部落格清單佈局在當今的數位時代，部落格已經成為了人們分享自己觀點和經驗的重要平台。而為了吸引更多讀者，一個漂亮且響應式的部落格清單佈局是至關重要的。在本文中，我們將學習如何使用HTML和CSS建立一個簡單又實用的響應式部落格清單版面。首先，我們需要準備一些基本的HTML程式碼。以下是一個簡單的部落格清單佈局的HTML結構：<
響應式佈局設計的單位選擇指南
Jan 27, 2024 am 08:26 AM
隨著行動裝置的普及和技術的發展，響應式佈局成為了設計師必備的技能之一。響應式佈局旨在為不同尺寸的螢幕提供最佳的使用者體驗，讓網頁在不同裝置上都能自動調整佈局，確保內容的可讀性和可用性。選擇合適的單位是響應式佈局設計的關鍵步驟之一。本文將介紹一些常用的單位，並提供選擇單位的建議。像素（px）：像素是螢幕上的最小單位，它是一種絕對單位，不會隨著螢幕尺寸的改變而自動
如何使用HTML和CSS建立響應式部落格佈局
Oct 21, 2023 am 10:54 AM
如何使用HTML和CSS創建一個響應式部落格佈局在當今互聯網時代，部落格已經成為人們分享知識、經驗和故事的重要平台。設計一個吸引人且具有響應式佈局的博客，可以讓你的內容更好地展示在不同尺寸和設備上，提升用戶體驗。本文將介紹如何使用HTML和CSS來建立響應式部落格佈局，同時提供具體的程式碼範例。一、HTML結構首先，我們需要搭建部落格的基本HTML結構。以下是一個
探究最佳響應式版面框架：競爭激烈！
Feb 19, 2024 pm 05:19 PM
響應式佈局框架大比拼：誰是最佳選擇？隨著行動裝置的普及和多樣化，網頁的響應式佈局變得越來越重要。為了滿足使用者不同的設備和螢幕尺寸，在設計和開發網頁時採用響應式佈局框架是必不可少的。然而，面對眾多的框架選擇，我們不禁要問：哪個才是最佳選擇？以下將對目前較流行的三種響應式佈局框架進行比較評價，它們分別是Bootstrap、Foundation和Tailwind
HTML的響應式佈局設計指南之實作方法
Jan 27, 2024 am 08:26 AM
如何利用HTML實現響應式佈局設計隨著行動裝置的普及和互聯網的快速發展，響應式佈局成為了設計師必備的技能。響應式佈局可讓網站在不同的裝置上自動適應不同的螢幕尺寸和分辨率，使用戶可以獲得更好的瀏覽體驗。本文將介紹如何利用HTML實現響應式佈局設計，並提供具體的程式碼範例。使用@media查詢@media查詢是CSS3中的一個功能，它可以根據不同的媒體條件來應用
CSS佈局教學：實現兩欄響應式佈局的最佳方法
Oct 18, 2023 am 11:04 AM
CSS佈局教學：實現兩欄響應式佈局的最佳方法簡介：在網頁設計中，響應式佈局是一種非常重要的技術，它能使網頁根據用戶設備的螢幕大小和解析度自動調整佈局，提供更好的使用者體驗。在本教程中，我們將介紹如何使用CSS來實作一個簡單的兩欄響應式佈局，並提供具體的程式碼範例。一、HTML結構：首先，我們需要建立一個基本的HTML結構，如下所示：<!DOCTYPEht
在響應式佈局中使用HTML固定定位的實用技巧
Jan 20, 2024 am 09:55 AM
HTML固定定位在響應式佈局中的應用技巧，需要具體程式碼範例隨著行動裝置的普及和使用者對響應式佈局的需求增加，開發人員在網頁設計中遇到了更多的挑戰。其中一個關鍵問題是如何實現固定定位，以確保在不同螢幕尺寸下，元素能夠固定在頁面的特定位置。本文將介紹HTML固定定位在響應式佈局中的應用技巧，並提供具體程式碼範例。 HTML中的固定定位是透過CSS的position屬
如何使用HTML和CSS建立響應式相簿展示佈局
Oct 19, 2023 am 08:51 AM
如何使用HTML和CSS建立響應式相簿展示佈局相簿展示佈局是網站中常見的一種頁面佈局類型，可以用於展示圖片、照片、圖像等內容。在今天行動裝置普及的環境下，一個好的相簿展示佈局需要具備響應式設計，能夠適應不同尺寸的螢幕，並且在不同裝置上具有良好的顯示效果。本文將介紹如何使用HTML和CSS來建立響應式相簿展示佈局，並提供具體的程式碼範例。希望讀者能透過示
