关闭

响应式布局

151人阅读 评论(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>
0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4420次
    • 积分:184
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:4篇
    • 译文:0篇
    • 评论:0条
    文章分类