最新消息:本站所有跳转向bbs.ykit.cn的附件将全面停止,附件已转移到https://www.qingsj.com

css3响应式布局

CSS3 有客 937浏览 0评论

1.分栏布局,-webkit-column-width(定义每栏的宽度,会根据每栏宽度自动分成若干栏)

  • 复制代码
    <style>
        .wrap {width: 900px; border: 1px solid #000; font: 14px/28px "宋体";
    color: #000; text-indent2em; -webkit-column-width: 250px;}
    </style>
    <body>
        <div class="wrap">
            <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
             <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
             <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
             <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
             <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
             <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
             <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
             <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
        </div>
    </body>
    复制代码
  1. 分栏布局,-webkit-columen-count(定义总共分为几栏,会自动根据栏数计算每栏宽度)
    • 复制代码
      <style>
          .wrap {width: 900px; border: 1px solid #000; font: 14px/28px "宋体"; color: #000; text-indent2em; -webkit-column-count: 4;}
      </style>
      <body>
          <div class="wrap">
              <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
          </div>
      </body>
      复制代码
  2. 分栏布局,栏目距离column-gap(定义每栏之间的间隔)
    • 复制代码
      <style>
          .wrap {width: 900px; border: 1px solid #000; font: 14px/28px "宋体";
      color: #000; text-indent2em; -webkit-column-count: 4; -webkit-columen-gap: 30px;}
      </style>
      <body>
          <div class="wrap">
              <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
          </div>
      </body>
      复制代码
  3. 栏目分隔线,columen-rule(定义每栏之间的线的样式)
    • 复制代码
      <style>
          .wrap {width: 900px; border: 1px solid #000; font: 14px/28px "宋体"; color: #000; text-indent2em; -webkit-column-count: 4; -webkit-columen-gap: 30px; -webkit-columen-rule: 1px solid #000;}
      </style>
      <body>
          <div class="wrap">
              <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
               <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
          </div>
      </body>
      复制代码
  4. 响应式布局
    • 根据屏幕不同分辨率,采用不同的css文件,举例如下:
      • html文件内容,link中根据media来决定加载哪个css文件,最终根据屏幕分辨率会展现不同的样式
      • 复制代码
        <head>
            <link rel="stylesheet" type="text/css" href="indexa.css" media="screen and (min-width:800px)">
            <link rel="stylesheet" type="text/css" href="indexb.css" media="screen and (min-width:400px) and (max-width: 800px)">
            <link rel="stylesheet" type="text/css" href="indexc.css" media="screen and (max-width: 400px)">
        </head>
        <body>
            <div class="wrap">
                <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
                 <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
                 <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
                 <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
                 <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
                 <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
                 <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
                 <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p>
            </div>
        </body>
        复制代码
      • indexa.css内容
      • @charset "utf-8";
        /* CSS Document */
        .wrap{border:1px solid #000; font:14px/28px "宋体";color:#000; text-indent:2em; -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid #000;}
      • indexb.css内容
      • @charset "utf-8";
        /* CSS Document */
        .wrap{border:1px solid #000; font:16px/28px "宋体";color:#000; text-indent:2em; -webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:1px solid #000;}
      • indexc.css内容
      • @charset "utf-8";
        /* CSS Document */
        .wrap{border:1px solid #000; font:16px/28px "宋体";color:#000; text-indent:2em;}
  5. 响应式布局(横竖屏切换)
    • 根据屏幕的横竖屏情况来展现不同的样式,横屏展示indexb.css,竖屏展示indexa.css样式
      • 复制代码
        <head>
        <meta http-equiv="Content-Type" content="textml; charset=utf-8">
        <title>无标题文档</title>
        <link rel="stylesheet" media="all and (orientation:portrait)" href="indexb.css">
        <link rel="stylesheet" media="all and (orientation:landscape)" href="indexa.css">
        </head>
        <body>
        <div class="wrap">
            <p>按照淘宝首页的无缝图片切换做:第一张和最后一张复制,打开浏览器时ul的left是-520,然后走完最后一张,ul的left是-1040。这样实现无缝切换,我就是卡在这里了,它这么样实现到最后一个还是顺着到-1040,保证不是倒 ...</p>
            <p>按照淘宝首页的无缝图片切换做:第一张和最后一张复制,打开浏览器时ul的left是-520,然后走完最后一张,ul的left是-1040。这样实现无缝切换,我就是卡在这里了,它这么样实现到最后一个还是顺着到-1040,保证不是倒 ...</p>
            <p>按照淘宝首页的无缝图片切换做:第一张和最后一张复制,打开浏览器时ul的left是-520,然后走完最后一张,ul的left是-1040。这样实现无缝切换,我就是卡在这里了,它这么样实现到最后一个还是顺着到-1040,保证不是倒 ...</p>
            <p>按照淘宝首页的无缝图片切换做:第一张和最后一张复制,打开浏览器时ul的left是-520,然后走完最后一张,ul的left是-1040。这样实现无缝切换,我就是卡在这里了,它这么样实现到最后一个还是顺着到-1040,保证不是倒 ...</p>
            <p>按照淘宝首页的无缝图片切换做:第一张和最后一张复制,打开浏览器时ul的left是-520,然后走完最后一张,ul的left是-1040。这样实现无缝切换,我就是卡在这里了,它这么样实现到最后一个还是顺着到-1040,保证不是倒 ...</p>
            <p>按照淘宝首页的无缝图片切换做:第一张和最后一张复制,打开浏览器时ul的left是-520,然后走完最后一张,ul的left是-1040。这样实现无缝切换,我就是卡在这里了,它这么样实现到最后一个还是顺着到-1040,保证不是倒 ...</p>
            <p>按照淘宝首页的无缝图片切换做:第一张和最后一张复制,打开浏览器时ul的left是-520,然后走完最后一张,ul的left是-1040。这样实现无缝切换,我就是卡在这里了,它这么样实现到最后一个还是顺着到-1040,保证不是倒 ...</p>
        </div>
        </body>
        复制代码
  6. 响应式布局中的另外一种写法
    • 复制代码
      <style>
      @media screen and (min-width:800px) {        
          .wrap{border:1px solid #000; font:14px/28px "宋体";color:#000; text-indent:2em; -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid #000;}
      }
      
      @import url("indexc.css") screen and (min-width:400px) and (max-width:800px);
      
      @media screen and (max-width:400px) {        
          .wrap{border:1px solid #000; font:16px/28px "宋体";color:#000; text-indent:2em; -webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:1px solid #000;}
      }
      
      </style>
      复制代码

转载请注明:有客帮 » css3响应式布局

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址