简单的响应式布局的实现

最新推荐文章于 2023-04-24 10:50:12 发布

weixin_30618985

最新推荐文章于 2023-04-24 10:50:12 发布

阅读量76

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/shangfang/p/3441529.html

版权

<!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

weixin_30618985

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的响应式布局的实现

<!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><...
复制链接

扫一扫