响应式布局

最新推荐文章于 2023-09-26 22:47:59 发布

cindy_rain

最新推荐文章于 2023-09-26 22:47:59 发布

阅读量309

点赞数

分类专栏： css作业

本文链接：https://blog.csdn.net/cindy_rain/article/details/49962305

版权

css作业专栏收录该内容

4 篇文章 0 订阅

订阅专栏

随着显示屏幕大小的变化，网页所显示的效果也不一样。如下：
当屏幕在980px以上时：

这里写图片描述

当屏幕在980Px和560px之间时：

这里写图片描述

响应式布局可以参考：媒体查询
代码奉上：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css响应式设计</title>
<style>
    *{margin:0;padding:0;}
    .content{width:980px;margin:0 auto;background-color:#b1fffc;overflow:hidden;}
    .content ul{list-style:none;}
    .content li{width:200px;height:200px;float:left;margin:20px;background:#ffccf7;}
    @media screen and(min-width:650px) and (max-width:980px){
        .content{width:96%;}
        .content li{margin-right:20px;}
        .box3,.box6,{margin-right:30px;}
    }
</style>
</head>

<body>
<div class="content">
  <ul>
    <li class="box1">box1</li>
    <li class="box2">box2</li>
    <li class="box3">box3</li>
    <li class="box4">box4</li>
    <li class="box5">box5</li>
    <li class="box6">box6</li>
    <li class="box7">box7</li>
    <li class="box8">box8</li>
  <ul>
</div>
</body>
</html>

cindy_rain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局

随着显示屏幕大小的变化，网页所显示的效果也不一样。如下：当屏幕在980px以上时：当屏幕在980Px和560px之间时：响应式布局可以参考：媒体查询代码奉上：<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=
复制链接

扫一扫

专栏目录