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-width:641px) and (max-width: 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-width:960px)" href="${pageContext.request.contextPath}/css/responsive/index-960.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:641px) and (max-width: 959px)" href="${pageContext.request.contextPath}/css/responsive/index-641-959.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: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{
width: 960px;
font-size: 14px;
color: #fff;
margin: 5px auto;
}
.myheader{
background-color: gray;
height: 50px;
}
.left,.middle,.right{
height: 400px;
}
.left{
width: 100px;
background-color: green;
float: left;
margin-right: 10px;
}
.middle{
width: 640px;
background-color: #bbb;
float: left;
}
.right{
width: 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{
width: 960px;
font-size: 14px;
color: #fff;
margin: 5px auto;
}
.myheader{
background-color: gray;
height: 50px;
}
.left,.middle,.right{
height: 400px;
}
.left{
width: 100px;
background-color: green;
float: left;
margin-right: 10px;
}
.middle{
width: 640px;
background-color: #bbb;
float: left;
}
.right{
width: 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{
width: 850px;
}
index-640.css
表示小于或等于640px显示的样式。
@CHARSET "UTF-8";
.left,.right{
display: none;
}
.middle{
width: 100%;
}
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2016年7月25日 15:31:51 星期一
http://fanshuyao.iteye.com/
相关推荐
CSS3有了个更为实用的 media query。而移动终端的浏览器基本已经完全支持了css3.他可以为你获取各种终端的数据。
Web-前端html+css从入门到精通 207. 响应式布局之媒体查询语法.zip
Web-前端html+css从入门到精通 208. 响应式布局之两种操作模式.zip
基于Bootstrap3的响应式布局网站教程源码（五），基础入门，适合新手，有齐全的注释，详细教程参考我的博文。除了博文所写之外，我还更新了许多实用的源码。 为了防止有些人不知道怎么用，我还不厌其烦的讲解下，...
基于Bootstrap3的响应式布局网站教程源码（二），基础入门，适合新手，有齐全的注释，详细教程参考我的博文。除了博文所写之外，我还更新了如何制作BOX的源码。 为了防止有些人不知道怎么用，我还不厌其烦的讲解下...
标题长度标签响应式布局挑战CSS，布局，响应式响应式布局挑战作为前端开发人员，您通常会从设计师那里获得补偿，然后由他们来构建。 您将需要能够获取图形文件并使用代码重新创建它。 这意味着您必须能够思考如何将...
HTML5与CSS3基础教程（中文第8版） 本书自第1版至今，一直是讲解HTML和CSS入门知识的经典畅销书，全面系统地阐述HTML5和CSS3 基础知识以及实际运用技术，通过...素、 CSS3的奇幻效果、响应式Web设计以及各种最佳实践。
《响应式Web图形设计》以创建响应式Web的角度，介绍了基础的HTML和CSS语法，并深入研究了响应式Web设计中色彩、布局、图像、排版、动画、视频和音频等方面的内容。, 《响应式Web图形设计》结构整、轻松易懂，能够...
文件已上传到百度网盘，附件中是下载地址。真正免积分免费完整版，绝不出现仅下载到部分章节，书中广告页要求QQ联系支付宝... 新手学DIV+CSS商业网站布局从入门到精通(朱印宏) 朱印宏(著) | 中国铁道 | 9787113173548 |
为了帮助你快速入门响应式Web设计，我写了一篇快速入门教程。我保证你通过三步就可以学会响应式设计的基本逻辑和媒体查询(media query)(假设你有基本的CSS知识)。 第一步：Meta标签（看demo） 大部分移动浏览器会...
CSS库，用于构建响应式和可自定义的页面布局 文献资料 有关完整文档，请访问 入门 您可以使用NPM或Yarn安装CSS专业版 NPM npm install css-pro-layout 纱 yarn add css-pro-layout 将css-pro-layout.css导入模块 ...
HTML5与CSS3基础教程(第8版)》自第1版至今... 通过学习《HTML5与CSS3基础教程(第8版)》，零起点读者即可创建网站，而中高级水平的开发人员也可以快速了解HTML5新元素、CSS3的奇幻效果、响应式Web设计以及各种最佳实践。
(自适应手机端)HTML5响应式手机应用教程网站源码 APP应用软件下载pbootcms网站模板 安装教程：www.diyiyuanma.cn/100.html 快速收录推送工具：www.diyiyuanma.cn/122.html 效果演示：diyiyuanma.lxsjfx.cn/a/008/886...
((自适应手机端)HTML5响应式蓝色营销型机械设备网站源码 磁电设备网站pbootcms模板 安装教程：www.diyiyuanma.cn/100.html 快速收录推送工具：www.diyiyuanma.cn/122.html 效果演示：diyiyuanma.lxsjfx.cn/a/004/511...
(自适应手机端)响应式HTML5高端瓷砖卫浴网站源码 品牌建材瓷砖类pbootcms网站模板 安装教程：www.diyiyuanma.cn/100.html 快速收录推送工具：www.diyiyuanma.cn/122.html 效果演示：diyiyuanma.lxsjfx.cn/a/006/751 ...
(自适应手机端)新闻资讯博客网站pbootcms模板 html5响应式新闻博客网站源码下载pbootcms内核开发的网站模板，该模板适用于新闻资讯网站、新闻博客网站等企业，当然其他行业也可以做，只需要把文字图片换成其他行业的...
入门级学习响应式网站.用html5+css3编写的一个静态网站。可以通过这个网站了解响应式布局和移动webapp的开发。
(自适应手机端)响应式HTML5美容养生会所网站源码 美容美体类网站pbootcms模板 安装教程：www.diyiyuanma.cn/100.html 快速收录推送工具：www.diyiyuanma.cn/122.html 效果演示：diyiyuanma.lxsjfx.cn/a/100/1078 ...
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址： 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...
轻量级的SASS mixin库和响应式CSS布局引擎。 目录 入门 您可以下载的副本，也可以通过NPM安装。 npm install rocket-propel SASS实施 首先将必要的文件导入到您自己的SASS文件中，并包括所需的mixins。 萨斯 @...