Contoh pertanyaan multimedia CSS3
Dalam bab ini kami akan menunjukkan beberapa contoh pertanyaan multimedia untuk anda.
Contoh:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 媒体查询</title>
<style type="text/css">
body { margin: 20px 0; }
.clear{ clear:both}
#container { width: 960px; margin: auto; }
#wrapper { width: 740px; float: left; }
.height { line-height: 168px; text-align: center; font-weight: bold; font-size: 1em; margin: 0 0 20px 0; }
#main { width: 520px; float: right; background: yellow; }
#left { width: 200px; float: left; background: orange; }
#right { width: 200px; float: right; background: green; }
/* 窗口宽度在1000px以上 */
@media screen and (min-width: 1000px) {
/* 3栏显示*/
#container { width: 1000px; }
#wrapper { width: 780px; float: left; }
#main { width: 560px; float: right; }
#left { width: 200px; float: left; }
#right { width: 200px; float: right; }
}
/* 窗口宽度在640px-999px */
@media screen and (min-width: 640px) and (max-width: 999px) {
/* 2栏显示 */
#container { width: 640px; }
#wrapper { width: 640px; float: none; }
.height { line-height: 200px; }
#main { width: 420px; float: right; }
#left { width: 200px; float: left; }
#right { width: 100%; float: none; clear: both; line-height: 100px; }
}
/* 窗口宽度在639px以下 */
@media screen and (max-width: 639px) {
/* １栏显示 */
#container { width: 100%; }
#wrapper { width: 100%; float: none; }
body { margin: 20px; }
.height { line-height: 300px; }
#main { width: 100%; float: none; }
#left { width: 100%; float: none; line-height: 100px; }
#right { width: 100%; float: none; line-height: 100px; }
}
/*CSS3随分辨率改变当前样式显现*/
.wrapper {padding: 5px 100px; margin:8px auto;width:70%; text-align: center; border: solid 1px #999; color: #999; }
.viewing-area{ text-align:center}
.viewing-area span { color: #666; display: none; }
@media screen and (max-width: 600px) {
.one { background: red; border: solid 1px #000; color: #fff; }
span.ppi600 { display: inline-block; }
}
@media screen and (min-width: 900px) {
.two { background: red; border: solid 1px #000; color: #fff; }
span.ppi900 { display: inline-block; }
}
@media screen and (min-width: 600px) and (max-width: 900px) {
.three { background: red; border: solid 1px #000; color: #fff; }
span.ppi600-900 { display: inline-block; }
}
@media screen and (max-device-width: 480px) {
.iphone { background: #ccc; }
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="main" class="height">主栏</div>
<div id="left" class="height">左栏</div>
</div>
<div id="right" class="height">右栏</div>
</div>
<div class="clear"></div>
<p class="viewing-area"><strong>当前视图宽度:</strong><span class="ppi600">小于600px</span><span class="ppi600-900">在600 - 900px之间</span><span class="ppi900">大于900px</span></p>
<div class="wrapper one">窗口宽度小于600像素</div>
<div class="wrapper two">窗口宽度大于900像素</div>
<div class="wrapper three">窗口宽度介于600像素到900像素之间</div>
<div class="wrapper iphone">IE iPhone设备，最大宽度为480像素。</div>
</body>
</html> 700 hingga 1000px - akan menambah latar belakang Warna
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background-color:yellow;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "name : ";
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>改变浏览器窗口大小，查看效果!</h1>
<ul>
<li><a href="#">Doe</a></li>
<li><a href="#">Moe</a></li>
<li><a href="#">Panda</a></li>
</ul>
</body>
</html> Lebih daripada 1151px Lebar - Tambahkan latar belakang
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
ul li a {
padding-left: 30px;
background-color:pink;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "name: ";
font-style: italic;
color: #666666;
}
}
@media screen and (min-width: 1001px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>改变浏览器窗口大小，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">Doe</a></li>
<li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Moe</a></li>
<li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Panda</a></li>
</ul>
</body>
</html>
fail baharu
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 媒体查询</title>
<style type="text/css">
body { margin: 20px 0; }
.clear{ clear:both}
#container { width: 960px; margin: auto; }
#wrapper { width: 740px; float: left; }
.height { line-height: 168px; text-align: center; font-weight: bold; font-size: 1em; margin: 0 0 20px 0; }
#main { width: 520px; float: right; background: yellow; }
#left { width: 200px; float: left; background: orange; }
#right { width: 200px; float: right; background: green; }
/* 窗口宽度在1000px以上 */
@media screen and (min-width: 1000px) {
/* 3栏显示*/
#container { width: 1000px; }
#wrapper { width: 780px; float: left; }
#main { width: 560px; float: right; }
#left { width: 200px; float: left; }
#right { width: 200px; float: right; }
}
/* 窗口宽度在640px-999px */
@media screen and (min-width: 640px) and (max-width: 999px) {
/* 2栏显示 */
#container { width: 640px; }
#wrapper { width: 640px; float: none; }
.height { line-height: 200px; }
#main { width: 420px; float: right; }
#left { width: 200px; float: left; }
#right { width: 100%; float: none; clear: both; line-height: 100px; }
}
/* 窗口宽度在639px以下 */
@media screen and (max-width: 639px) {
/* １栏显示 */
#container { width: 100%; }
#wrapper { width: 100%; float: none; }
body { margin: 20px; }
.height { line-height: 300px; }
#main { width: 100%; float: none; }
#left { width: 100%; float: none; line-height: 100px; }
#right { width: 100%; float: none; line-height: 100px; }
}
/*CSS3随分辨率改变当前样式显现*/
.wrapper {padding: 5px 100px; margin:8px auto;width:70%; text-align: center; border: solid 1px #999; color: #999; }
.viewing-area{ text-align:center}
.viewing-area span { color: #666; display: none; }
@media screen and (max-width: 600px) {
.one { background: red; border: solid 1px #000; color: #fff; }
span.ppi600 { display: inline-block; }
}
@media screen and (min-width: 900px) {
.two { background: red; border: solid 1px #000; color: #fff; }
span.ppi900 { display: inline-block; }
}
@media screen and (min-width: 600px) and (max-width: 900px) {
.three { background: red; border: solid 1px #000; color: #fff; }
span.ppi600-900 { display: inline-block; }
}
@media screen and (max-device-width: 480px) {
.iphone { background: #ccc; }
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="main" class="height">主栏</div>
<div id="left" class="height">左栏</div>
</div>
<div id="right" class="height">右栏</div>
</div>
<div class="clear"></div>
<p class="viewing-area"><strong>当前视图宽度:</strong><span class="ppi600">小于600px</span><span class="ppi600-900">在600 - 900px之间</span><span class="ppi900">大于900px</span></p>
<div class="wrapper one">窗口宽度小于600像素</div>
<div class="wrapper two">窗口宽度大于900像素</div>
<div class="wrapper three">窗口宽度介于600像素到900像素之间</div>
<div class="wrapper iphone">IE iPhone设备，最大宽度为480像素。</div>
</body>
</html>
Pratonton
Clear
- Cadangan kursus
- Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~
Pelajar yang telah menonton kursus ini juga sedang belajar
Mari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP
Pengenalan pantas kepada pembangunan bahagian hadapan web
Pembangunan Tianlongbabu praktikal skala besar bagi rangka kerja MVC versi Mini meniru laman web ensiklopedia perkara yang memalukan
Bermula dengan Pembangunan Praktikal PHP: Penciptaan PHP Pantas [Forum Perniagaan Kecil]
Pengesahan log masuk dan papan mesej klasik
Pengumpulan pengetahuan rangkaian komputer
Mula Pantas Node.JS Versi Penuh
Kursus bahagian hadapan yang paling memahami anda: HTML5/CSS3/ES6/NPM/Vue/...[Asal]
Tulis rangka kerja PHP MVC anda sendiri (40 bab secara mendalam/butiran besar/mesti dibaca untuk pemula untuk maju)