<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=
"http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8" />
<title>无标题文档</title>
<meta content=
"width=device-width, initial-scale=1.0" name=
"viewport">
<style type=
"text/css">
.header{width:980px;
background-
color:#C00;
margin:0 auto;}
.content{width:980px;
background-
color:#F36;
margin:0 auto;}
.contentl{width:400px;
float:left;
}
.contentr{width:400px;
float:right;}
@media screen and (max-
width:980px){
.header{width:94%
;
height:auto;}
.content{width:94%
;
height:auto;}
.contentl{width:50%
;}
.contentr{width:50%
;}
}
@media screen and (max-
width:500px){
.header{width:auto;
height:auto;}
.content{width:auto;
height:auto;}
.contentl{width:auto;
float:none;}
.contentr{width:auto;
float:none;}
@media screen and (max-
width:480px){
.img2{width:95%
;
height:auto;}
.img1{width:95%
;
height:auto;}
}
</style>
</head>
<body><div
class=
"header"></div>
<div
class=
"content">
<div
class=
"contentl"><img
class=
"img1" src=
"../images/00.jpg" /></div>
<div clas=
"contentr"><img
class=
"img2" src=
"../images/02.jpg"/></div>
</div>
</body>
</html>
无标题文档
转载于:https://www.cnblogs.com/shangfang/p/3441529.html
