响应式布局的简单案例介绍-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

响应式布局的简单案例介绍

高洛峰

Mar 07, 2017 pm 02:14 PM

Susun atur responsif

响应式布局

响应式布局在面对不同分辨率设备灵活性强，在平时的网页设计中基本上都要用到响应式布局设计，它给我们提供了良好的用户浏览页面，能带给我们更好的客户体验，下面给大家分享下我做的一个简单的响应式的布局：

响应式布局的简单案例介绍

不同的页面会适用不同大小浏览器页面，它会随着分辨率的变化而变化。代码展示如下：

<!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="img/rag.png" />
　　</header>
　　<aside id="left">
　　　　<img src="img/logo-bg.png" id="logo-bg"/>
　　　　<img src="img/logo.png" id="logo" />
　　　　<hr />
　　　　<p>THE</p>
　　　　<h4>WEBLOCUE</h4>
　　　　<hr />
　　　　<p>THE</p>
　　　　<h4>WEBLOCUE</h4>
　　　　<hr />
　　　　<p>THE</p>
　　　　<h4>WEBLOCUE</h4>
　　　　<hr />
　　</aside>
　　<article id="right">
　　　　<h2>“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="img/1.jpg" />
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img src="img/2.jpg" />
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img src="img/3.jpg" />
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img src="img/4.jpg" />
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img src="img/5.jpg" />
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img src="img/6.jpg" />
　　　　　　<p>SETCOME</p>
　　　　　　<h4>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中文网！

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Peringatan sedikit bahawa elemen pseudo adalah kanak -kanak, agak.Apr 19, 2025 am 11:39 AM

Di sini ' s sebuah bekas dengan beberapa elemen kanak -kanak:

Menu dengan 'kawasan hit dinamik'Apr 19, 2025 am 11:37 AM

Menu Flyout! Yang kedua anda perlu melaksanakan menu yang menggunakan acara hover untuk memaparkan lebih banyak item menu, anda ' di wilayah rumit. Untuk satu, mereka sepatutnya

Meningkatkan kebolehcapaian video dengan webvttApr 19, 2025 am 11:27 AM

"Kuasa web berada dalam kesejagatannya. Akses oleh semua orang tanpa mengira kecacatan adalah aspek penting."- Tim Berners-Lee

Berita Platform Mingguan: CSS :: Penanda Pseudo-Element, Komponen Web Pra-Rendering, Menambah Webmention ke Laman AndaApr 19, 2025 am 11:25 AM

Dalam roundup minggu ini: DatePickers memberikan kepala kepala pengguna keyboard, kompilasi komponen web baru yang membantu melawan Fouc, kami akhirnya mendapatkan tangan kami pada penanda item senarai gaya, dan empat langkah untuk mendapatkan webment di laman web anda.

Membuat lebar dan item fleksibel bermain bagus bersamaApr 19, 2025 am 11:23 AM

Jawapan ringkas: flex-shrink dan flex-basis mungkin apa yang anda cari.

Kedudukan melekit dan tajuk mejaApr 19, 2025 am 11:21 AM

Anda tidak boleh meletakkan kedudukan: melekit; a

Berita Platform Mingguan: Pemeriksaan HTML dalam Konsol Carian, Skop Skrip Global, Babel Env Menambah Pertanyaan LalaiApr 19, 2025 am 11:18 AM

Pada minggu ini, melihat seluruh dunia berita platform web, konsol carian google memudahkan untuk melihat markup merangkak, kami mengetahui bahawa sifat tersuai

Indieweb dan WebmentionsApr 19, 2025 am 11:16 AM

Indieweb adalah satu perkara! Mereka ' VE mendapat persidangan yang datang dan segala -galanya. New Yorker juga menulis tentangnya:

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang laluByDDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang laluByDDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang laluByDDD

Penjimatan di R.E.P.O. Dijelaskan (dan simpan fail)

1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - Cara Mencari Orang Panda

4 minggu yang laluByDDD

Tunjukkan Lagi

Alat panas

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.