响应式布局

原创 2015年11月21日 10:15:03

随着显示屏幕大小的变化,网页所显示的效果也不一样。如下:
当屏幕在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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

响应式布局

  • 2015-03-23 15:32
  • 11.01MB
  • 下载

响应式布局

响应式布局

响应式布局简介由于移动互联网的快速发展,为了能给不同终端的用户提供更加舒适的界面和更好的用户体验,人们提出了响应式布局。响应式布局优缺点优点:能够适应多屏幕缺点代码太繁杂, 兼容各种设备工作量大,效...

web杂谈之响应式布局

什么叫做响应式布局? 也即是响应式Web设计。响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本...

响应式布局.pdf

  • 2013-10-12 00:28
  • 11.01MB
  • 下载

响应式布局通用

@charset "utf-8"; body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,b...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)