六、响应式网站布局实例
1、简单的响应式网站布局
DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>title>
<style>
*{
box-sizing: border-box;
}
body{ margin: 0;padding: 0;}
.header{
background-color: #F1F1F1;padding: 20px;text-align: center;
}
ul{
list-style-type: none;background-color: #333333;margin: 0;padding: 0;
overflow: hidden;
}
li a{
text-decoration: none;color: white;padding: 10px;
display: block;
}
li{
float: left;
}
li a:hover{
background-color: #CBC8C8;color: black;
}
.column{
float: left;
padding: 10px;
}
.column.side,.column.main{
width: 100%
}
.row::after{
content: "";
clear: both;
display: table;
}
.footer{
background-color: #F1F1F1;text-align: center;padding: 30px;
}
@media only screen and (min-width:769px) {
.column.side{
width: 25%;
}
.column.main{
width: 50%;
}
}
style>
head>
<body>
<div class="header">
<h1>Headerh1>
<p>请调整浏览器窗口的大小以查看响应效果。p>
div>
<ul class="topnav">
<li><a href="#">Linka>li>
<li><a href="#">Linka>li>
<li><a href="#">Linka>li>
ul>
<div class="row">
<div class="column side">
<h2>Sideh2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..p>
div>
<div class="column main">
<h2>Main Contenth2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.p>
div>
<div class="column side">
<h2>Sideh2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..p>
div>
div>
<div class="footer">
<h3>Footerh3>
div>
body>
2、一个网站的实例
DOCTYPE html>
<html>
<head>
<title>Page Titletitle>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* 设置 body 元素的样式 */
body {
font-family: Arial;
margin: 0;
}
/* 标题 / LOGO */
.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
}
/* 设置顶部导航栏样式 */
.navbar {
display: flex;
background-color: #333;
}
/* 设置导航条链接演示 */
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
/* 更改鼠标悬停时的颜色 */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* 列容器 */
.row {
display: flex;
flex-wrap: wrap;
}
/* 创建并排的非等列 */
/* 侧栏 / 左侧列 */
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* 主列 */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
/* 伪图像，仅供示例 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 页脚 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* 响应式布局 - 当屏幕小于 700 像素宽时，让两列堆叠而不是并排 */
@media screen and (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
}
style>
head>
<body>
<div style="background:yellow;padding:5px">
<h4 style="text-align:center">请调整浏览器窗口来查看响应效果。h4>
div>
<div class="header">
<h1>我的网站h1>
<p>拥有 <b>弹性b> 布局。p>
div>
<div class="navbar">
<a href="#">Linka>
<a href="#">Linka>
<a href="#">Linka>
<a href="#">Linka>
div>
<div class="row">
<div class="side">
<h2>关于我h2>
<h5>我的照片：h5>
<div class="fakeimg" style="height:200px;">图像div>
<p>Some text about me in culpa qui officia deserunt mollit anim..p>
<h3>More Texth3>
<p>Lorem ipsum dolor sit ame.p>
<div class="fakeimg" style="height:60px;">图像div><br>
<div class="fakeimg" style="height:60px;">图像div><br>
<div class="fakeimg" style="height:60px;">图像div>
div>
<div class="main">
<h2>标题h2>
<h5>标题描述，2021 年 1 月 1 日h5>
<div class="fakeimg" style="height:200px;">图像div>
<p>一些文本..p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.p>
<br>
<h2>标题h2>
<h5>标题描述，2021 年 1 月 2 日h5>
<div class="fakeimg" style="height:200px;">图像div>
<p>一些文本..p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.p>
div>
div>
<div class="footer">
<h2>页脚h2>
div>
body>
html>
3、用弹性盒创建响应式网站
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>title>
<style>
*{ box-sizing: border-box;}
body{ margin: 0;padding: 0;font-family: Arial, Helvetica, sans-serif;}
.header{
background-color: #1ABC9C;color: white;text-align: center;padding: 60px;
}
.topnav{
list-style-type: none;margin: 0;padding: 0;background-color: #333333;
overflow: hidden;
}
.topnav li a{
text-decoration: none; color: white;padding: 20pX;display: block;text-align: center;
}
.topnav li a:hover{
background-color: whitesmoke;color: black;
}
/*.topnav li{ float: left;}*/
.row{
display: flex;
flex-direction: column;
}
.column.side{ padding: 20px; background-color: #F1F1F1; flex: 100%;}
.column.main{ padding: 20px; flex: 100%;}
.column.side .cart{
padding: 20px 0;
}
.column.side .cart .image{
background-color: #AAAAAA;padding: 15px;margin:20px 0; height: 200px;
}
.column.main .cart{
padding: 20px 0;
}
.column.main .cart .image{
background-color: #AAAAAA;padding: 15px;margin:20px 0; height: 200px;
}
.footer{
background-color: #DDDDDD;padding: 20px;text-align: center;
}
@media only screen and (min-width:769px){
.topnav li{ float: left;}
.row{
display: flex;
flex-direction: row;
}
.column.side{ flex: 30%;}
.column.main{ flex: 70%;}
}
style>
head>
<body>
<div class="header">
<h1>我的网站h1>
<p>拥有<b>弹性b>布局。p>
div>
<ul class="topnav">
<li><a href="#">Linka>li>
<li><a href="#">Linka>li>
<li><a href="#">Linka>li>
<li><a href="#">Linka>li>
ul>
<div class="row">
<div class="column side">
<div class="cart">
<h2>关于我h2>
<h5>我的照片：h5>
<div class="image">图像div>
<p>Some text about me in culpa qui officia deserunt mollit anim..p>
div>
<div class="cart">
<h2>More Texth2>
<p>Lorem ipsum dolor sit ame.p>
<div class="image" style="height: 50px;">图像div>
<div class="image" style="height: 50px;">图像div>
<div class="image" style="height: 50px;">图像div>
div>
div>
<div class="column main">
<div class="cart">
<h2>标题h2>
<h5>标题描述，2021 年 1 月 1 日h5>
<div class="image">图像div>
<p>一些文本..p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.p>
div>
<div class="cart">
<h2>标题h2>
<h5>标题描述，2021 年 1 月 2 日h5>
<div class="image">图像div>
<p>一些文本..p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.p>
div>
div>
div>
<div class="footer">
<h1>页脚h1>
div>
body>
html>
4、用弹性盒创建响应式的图片库
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initical-scale=1.0">
<title>title>
<style>
*{ box-sizing: border-box;}
body{margin: 0; padding: 0;}
.header{ padding: 60px;text-align: center;}
.row{
display: flex;
flex-direction: column;
}
.column{
flex: 100%;
max-width: 100%;/*1、加上这个，来限制每列最大的宽度*/
}
.column img{
padding: 5px;
width: 100%;/*2、加上这个，来限制图片的宽度，和父元素同宽*/
}
@media only screen and (min-width:600px){
.row{
display: flex;
flex-flow: row wrap;
}
.column{
flex: 50%;
max-width: 50%;/*1、加上这个，来限制每列最大的宽度*/
}
}
@media only screen and (min-width:769px){
.row{
display: flex;
flex-direction: row;
}
.column{
flex: 25%;
max-width: 25%;/*1、加上这个，来限制每列最大的宽度*/
}
}
style>
head>
<body>
<div class="header">
<h1>响应式图像网格h1>
<p>请调整浏览器窗口，来查看响应效果。p>
div>
<div class="row">
<div class="column">
<img src="https://www.w3school.com.cn/i/photo/tulip-red.jpg">
<img src="https://www.w3school.com.cn/i/photo/tulip-yellow-2.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-2.jpg">
<img src="https://www.w3school.com.cn//i/photo/tulip-yellow.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-3.jpg">
<img src="https://www.w3school.com.cn/i/photo/tulip.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-1.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-4.jpg">
div>
<div class="column">
<img src="https://www.w3school.com.cn/i/photo/tulip-yellow-2.jpg">
<img src="https://www.w3school.com.cn/i/photo/tulip.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-3.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-1.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-4.jpg">
<img src="https://www.w3school.com.cn/i/photo/tulip-red.jpg">
<img src="https://www.w3school.com.cn/i/photo/tulip-yellow.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-2.jpg">
div>
<div class="column">
<img src="https://www.w3school.com.cn/i/photo/tulip-red.jpg">
<img src="https://www.w3school.com.cn/i/photo/tulip-yellow-2.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-2.jpg">
<img src="https://www.w3school.com.cn/i/photo/tulip-yellow.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-3.jpg">
<img src="https://www.w3school.com.cn/i/photo/tulip.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-1.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-4.jpg">
div>
<div class="column">
<img src="https://www.w3school.com.cn/i/photo/tulip-yellow-2.jpg">
<img src="https://www.w3school.com.cn/i/photo/tulip.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-3.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-1.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-4.jpg">
<img src="https://www.w3school.com.cn/i/photo/tulip-red.jpg">
<img src="https://www.w3school.com.cn/i/photo/tulip-yellow.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower-2.jpg">
div>
div>
body>
html>
5、响应式网格视图
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initical-scale=1.0">
<title>title>
<style>
*{ box-sizing: border-box;}
body{ font-family: Arial, Helvetica, sans-serif;color: white;}
.header{
background-color: #9933CC;padding: 20px;
}
.row{
padding: 14px 16px;
}
.row::after{
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
/*针对手机设备*/
[class*="col-"]{
width: 100%;
}
/*针对平板设备*/
@media screen and (min-width:600px){
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
/*针对桌面设备*/
@media only screen and (min-width:769px){
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
.topnav{
list-style-type: none;margin: 0;padding: 0;
overflow: hidden;
}
.topnav li a{
text-decoration: none;background-color: #33B5E5;color: white;
display: block;padding: 5px;
}
.topnav li a:hover{
background-color: #0091FF;
}
.topnav li{
margin: 5px;
}
.main{
color: black;
}
.aside{
background-color: #33B5E5;text-align: center;
}
.footer{
background-color: #33B5E5;padding: 20px;text-align: center;
}
style>
head>
<body>
<div class="header">
<h1>Shanghaih1>
div>
<div class="row">
<ul class="col-3 col-s-2 topnav">
<li><a href="#">交通a>li>
<li><a href="#">文化a>li>
<li><a href="#">旅游a>li>
<li><a href="#">美食a>li>
ul>
<div class="col-6 col-s-10 main">
<h2>欢迎来到上海h2>
<p>上海市，简称沪，别称申，是中华人民共和国直辖市，中国的经济、金融、贸易和航运中心，世界著名的港口城市，是中国人口第二多的城市。p>
div>
<div class="col-3 col-s-12 aside">
<h3>历史h3>
<p>最晚在新石器时代，上海地区已经有先民聚居。春秋时代，上海由吴国管辖，战国时代则是楚国领土 ...p>
<h3>位置h3>
<p>上海位于中国东部弧形海岸线的正中间，长江三角洲最东部，东临东海，南濒杭州湾，西与江苏、浙江两省相接 ...p>
<h3>环境h3>
<p>上海地处江南水乡，并位于长江入海口，亦不处于主要地震带上，因此如地震、洪水以及地质类灾害鲜有发生 ...p>
div>
div>
<div class="footer">
<p>请调整浏览器窗口的大小，以查看内容如何响应调整大小。p>
div>
body>
html>