• html响应式布局,css响应式布局,响应式布局入门


    html响应式布局,css响应式布局,响应式布局入门

    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    蕃薯耀 2016年7月25日 15:31:51 星期一

    http://fanshuyao.iteye.com/

    一、效果如下:

    1、当屏幕宽度大于或等于960px时,显示为:



     

    2、当屏幕宽度小于960px且大于640px时,显示为:




    3、当屏幕宽度小于640px时,显示为:



     

    二、代码:

    1、Html页面代码:

    需要注意的是引入的link:

    里面使用了Media属性:

    media="screen and (min-641px) and (max- 959px)"

     

    完整代码:

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>responsive 学习</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/responsive/index.css">
    <link rel="stylesheet" type="text/css" media="screen and (min-960px)" href="${pageContext.request.contextPath}/css/responsive/index-960.css">
    <link rel="stylesheet" type="text/css" media="screen and (min-641px) and (max- 959px)" href="${pageContext.request.contextPath}/css/responsive/index-641-959.css">
    <link rel="stylesheet" type="text/css" media="screen and (max-640px)" href="${pageContext.request.contextPath}/css/responsive/index-640.css">
    </head>
    <body>
    
    	<div class="container">
    		<div class="myheader">myheader</div>
    		<div class="mybody">
    			<div class="left">left</div>
    			<div class="middle">middle</div>
    			<div class="right">right</div>
    		</div>
    		<div class="myfooter">footer</div>
    	</div>
    
    </body>
    </html>

    2、Css代码:

    index.css

    默认样式。

    @CHARSET "UTF-8";
    body{
    	margin: 0;
    	padding: 0;
    }
    .container{
    	 960px;
    	font-size: 14px;
    	color: #fff;
    	margin: 5px auto;
    }
    .myheader{
    	background-color: gray;
    	height: 50px;
    }
    .left,.middle,.right{
    	height: 400px;
    }
    .left{
    	 100px;
    	background-color: green;
    	float: left;
    	margin-right: 10px;
    }
    .middle{
    	 640px;
    	background-color: #bbb;
    	float: left;
    }
    .right{
    	 200px;
    	background-color: maroon;
    	float: right;
    }
    .myfooter{
    	background-color: black;
    	height: 30px;
    	clear: both;
    }
    
    

    index-960.css

    表示大于等于960px显示的样式。

    这个和默认的css样式是一样的,没有区别,因为默认就是用浏览器查看,宽度大于大于等于960px,这样index-960.css可以省略。

    @CHARSET "UTF-8";
    body{
    	margin: 0;
    	padding: 0;
    }
    .container{
    	 960px;
    	font-size: 14px;
    	color: #fff;
    	margin: 5px auto;
    }
    .myheader{
    	background-color: gray;
    	height: 50px;
    }
    .left,.middle,.right{
    	height: 400px;
    }
    .left{
    	 100px;
    	background-color: green;
    	float: left;
    	margin-right: 10px;
    }
    .middle{
    	 640px;
    	background-color: #bbb;
    	float: left;
    }
    .right{
    	 200px;
    	background-color: maroon;
    	float: right;
    }
    .myfooter{
    	background-color: black;
    	height: 30px;
    	clear: both;
    }
    
    

    index-641-959.css

    表示大于640px且小于960px显示的样式。

    @CHARSET "UTF-8";
    .right{
    	display: none;
    }
    .middle{
    	 850px;
    }
    

    index-640.css

    表示小于或等于640px显示的样式。

    @CHARSET "UTF-8";
    .left,.right{
    	display: none;
    }
    .middle{
    	 100%;
    }
    
    

    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    蕃薯耀 2016年7月25日 15:31:51 星期一

    http://fanshuyao.iteye.com/

  • 相关阅读:
    对于CD翻录的一些记录
    暑期实践
    暑期实践
    垃圾处理器-CMS
    离合器半联动点的判断和技巧
    Win10+VS2019+OpenCV环境配置
    C++ 学习资料
    科目二起步原理
    道路交通安全违法行为记分分值分类总结
    NWERC 2020 题解
  • 原文地址:https://www.cnblogs.com/fanshuyao/p/6227109.html
Copyright © 2020-2023  润新知