`

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-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/

  • 大小: 4.9 KB
  • 大小: 5 KB
  • 大小: 4 KB
1
4
分享到:
评论
1 楼 蕃薯耀 2016-07-25  
html响应式布局,css响应式布局,响应式布局入门


>>>>
蕃薯耀

相关推荐

    响应式布局入门教程

    本入门教程的文档"响应式布局入门.docx"应该包含了更详尽的步骤和示例,帮助你从零开始学习这一关键的Web开发技能。请仔细阅读并动手实践,相信很快你就能掌握响应式布局的精髓,并能自如地应用于你的项目中。

    响应式布局,可做入门了解

    这个压缩包提供的资源是两个响应式布局页面,对于初学者来说,是一个很好的入门学习材料。 首先,我们要理解响应式布局的核心理念——“流式布局”。传统的网页设计往往是固定宽度的,而响应式布局则打破了这种限制...

    响应式布局入门

    CSS3的媒体查询(Media Queries)是实现响应式布局的核心工具,它可以根据设备特性,如视口宽度、设备像素比等,来应用不同的CSS样式。 在CSS2时代,媒体类型(Media Types)如`screen`、`print`、`handheld`等被...

    Web-前端html+css从入门到精通 208. 响应式布局之两种操作模式.zip

    响应式布局主要依赖于CSS3的Media Queries(媒体查询)和Flexible Box(弹性盒模型)这两种操作模式。Media Queries允许我们根据设备的特性,如宽度、高度、分辨率等,来应用不同的CSS样式。这样,网页的布局可以...

    响应式布局入门共4页.pdf.zip

    本资料“响应式布局入门共4页.pdf”是一个压缩包文件,虽然名称提及4页,但实际内容未给出,不过我们可以基于响应式布局这一主题来深入探讨相关的知识点。 1. **响应式设计的基本原理**: 响应式设计的核心理念是...

    Web-前端html+css从入门到精通 207. 响应式布局之媒体查询语法.zip

    响应式布局是现代网页设计的关键技术,它使得网站在不同设备和屏幕尺寸下都能提供良好的用户体验。本课程聚焦于响应式布局中的一个核心组件——媒体查询(Media Queries),它是实现设备适应性的重要工具。通过学习...

    HTML+CSS网页设计与布局从入门到精通 PDF

    传统的方法包括表格布局,但现代网页设计更倾向于使用流式布局(使用百分比单位)、响应式布局(根据设备屏幕尺寸调整布局)以及Flexbox和Grid。Flexbox提供了一种更为灵活的方式处理一维布局(行或列),可以轻松地...

    基于Bootstrap3的响应式布局网站教程源码(五)

    基于Bootstrap3的响应式布局网站教程源码(五),基础入门,适合新手,有齐全的注释,详细教程参考我的博文。除了博文所写之外,我还更新了许多实用的源码。 为了防止有些人不知道怎么用,我还不厌其烦的讲解下,...

    Div+CSS布局入门+实例教程

    4. **布局模式**:详细介绍流体布局、固定布局、响应式布局等,以及Flexbox和Grid布局系统,这些都是Div+CSS布局中的重要部分。 5. **定位技术**:讲解相对定位、绝对定位和固定定位,理解它们在布局中的作用。 6....

    基于Bootstrap3的响应式布局网站教程源码(二)

    基于Bootstrap3的响应式布局网站教程源码(二),基础入门,适合新手,有齐全的注释,详细教程参考我的博文。除了博文所写之外,我还更新了如何制作BOX的源码。 为了防止有些人不知道怎么用,我还不厌其烦的讲解下...

    Div+CSS网页样式与布局从入门到精通 实例

    响应式布局则根据设备屏幕尺寸动态调整布局,常用媒体查询实现。 3. **Flexbox布局**:现代CSS提供了Flexbox(弹性盒布局),它为复杂的一维布局提供了强大支持,如中心对齐、自适应间距等。理解Flexbox的属性,如...

    html5+css3从入门到精通

    HTML5和CSS3是现代Web开发的基石,它们极大地扩展了网页设计和开发的可能性,使得开发者可以构建功能丰富、响应式且视觉上引人入胜的网站。本教程"html5+css3从入门到精通"针对前端新手,旨在帮助初学者快速掌握这两...

    HTML+CSS入门案例实战(网站首页布局)

    例如,你可以使用`display: flex`或`grid`属性来实现响应式布局,适应不同屏幕尺寸。Flexbox用于一维布局(行或列),而CSS Grid则适合二维布局,可以轻松地管理网页的行和列。 在CSS中,选择器是关键,它们帮助...

    Div+CSS布局入门教程(一二三四)

    【Div+CSS布局入门教程详解】 Div+CSS布局是网页设计中的重要技术,它通过分离样式和内容,使得网页设计更加灵活、可维护性更强。本教程将带你一步步入门Div+CSS布局,从基础概念到实际操作,帮助你掌握这种布局...

    Web入门初学者纯静态页面练习 HTML+CSS 布局、浮动练习

    布局在Web设计中至关重要,常见的布局方式有流式布局、网格布局、响应式布局等。在描述中提到的“布局练习”,很可能是让你通过CSS的`display`属性,比如`block`、`inline`、`flexbox`或`grid`,来实现不同类型的...

    响应式布局-BootStrap从基础到项目实战 (高级篇)

    响应式布局与Bootstrap是前端开发中极其重要的技术概念,它能够帮助开发者设计出能够适应不同屏幕尺寸和分辨率的网页,提升用户在不同设备上的浏览体验。Bootstrap作为一款广泛使用的前端框架,提供了丰富的组件、类...

    HTML5+CSS3+JS入门教程 + 源代码 pdf

    2. CSS3的基本选择器、布局模型和动画效果:掌握如何定义样式,实现响应式布局,以及创建动态效果。 3. JavaScript基础:了解变量、数据类型、控制流程、函数等概念,以及DOM操作和事件处理。 4. JavaScript进阶:...

    Div+CSS布局入门教程

    4. **布局模式**:在Div+CSS布局中,常见的布局模式有流式布局、网格布局和响应式布局。流式布局适合窄屏幕设备,网格布局常用于大型网站,而响应式布局则能适应不同尺寸的屏幕,提供良好的用户体验。 5. **浮动与...

Global site tag (gtag.js) - Google Analytics