Web——day08——响应式布局

最新推荐文章于 2024-05-03 00:02:41 发布
最新推荐文章于 2024-05-03 00:02:41 发布
阅读量274 收藏
点赞数
分类专栏： Web学习 文章标签： web css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45792414/article/details/119298538
版权

响应式布局

响应式布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				margin: 0;
			}
			@media screen and ( max-width : 500px) {
				div{
					background-color: red;
				}
			}
			@media screen and (min-width : 600px ) and ( max-width : 800px) {
				div{
					background-color: green;
				}
			}
			@media screen and (min-width : 800px) {
				div{
					background-color: yellow;
				}
			}
		</style>
	</head>
	<body>
		<!-- 需求：在500下：背景色是红色  600-800：背景色是绿色  800以上背景色改成黄色 -->
		<div>hello</div>
	</body>
</html>

代码的运行结果：
在这里插入图片描述
在这里插入图片描述

单位（1）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{font-size: 2em;}
		</style>
	</head>
	<body style="font-size: 16px;">
		<!-- 单位
		
			px  固定像素
			em  相对单位   相对于直接父元素的文字大小  font-size
			rem  相对单位  相对于html的相对大小，补充em的特点，与父元素无任何关系
		-->
		
		hello! 你好！  123  16
		<p >hello! 你好！  123   32 </p>
		
		<div style="font-size: 32px;">
			hello! 你好！  123  48
			<p >hello! 你好！  123   32 </p>
		</div>
		
		<div>
			hello! 你好！  123  16
			<p >hello! 你好！  123   32 </p>
		</div>
		
		<!--  -->
	</body>
</html>

代码的运行结果：
在这里插入图片描述

单位（2）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html{/*font-size: 32px;*/font-size: 3rem;}
			p{font-size: 2rem;}
		</style>
	</head>
	<body style="font-size: 16px;">
		<!-- 如果body没有设置，主要看浏览器的设定，一般浏览器默认为16px -->
		<!-- 单位
		
			px  固定像素
			em  相对单位   相对于直接父元素的文字大小  font-size
			rem  相对单位  相对于html的相对大小，补充em的特点，与父元素无任何关系
			响应式网站一般使用rem较为方便
		-->
		
		hello! 你好！  123  16
		<p >hello! 你好！  123   96 </p>
		
		<div style="font-size: 32px;">
			hello! 你好！  123  32
			<p >hello! 你好！  123   96 </p>
			<!-- 相对于html，p中字符的大小不会改变 -->
		</div>
		
	</body>
</html>

代码的运行结果：
在这里插入图片描述

作业：双十一页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="viewport" content="width=device-width,user-scalable=no,
		initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" >
		<title></title>
		<style>
			body{
				width: 100%;
			}
			div{
				box-sizing: border-box;/*盒子模型改成css3盒子模型*/
			}
			ul{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			*{
				margin: 0;
			}
			ol{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			@media screen and ( max-width : 800px) {
				.header{
					background-color: orange;
					width: 100%;
					height: 15%;
					padding-bottom: 20%;
				}
				.header a{
					text-decoration: none;
					color: white;
				}
				.ul2>li>a{
					color: #000000;
				}
				.hhh{
					width: 15%;
					float: left;
					margin-left: 3%;
					font-size: 14px;
					margin-top: 2%;
				}
				.ul2{
					width: 300%;
					text-align: center;
					height: 5%;
					display: none;
					background-color: white;
				}
				.ul2>li{
					width: 30%;
					background-color: yellow;
					float: left;
				}
				.ul1:hover .ul2{
					display: block;
				}
				.menu{
					display: none;
				}
				.spe{
					width: 2rem;
					height: 2rem;
					margin-right: 5%;
					margin-left: 5%;
					background: url(./img/classify.png);
					background-repeat: no-repeat;
					background-position: 0px 0px;
					display: inline-block;
					background-size: 32px auto;
				}
				.sppe{
					margin-left: 5%;
				}
				.sea{
					float: left;
					width: 82%;
					margin-top: 5%;
				}
				.sea>input{
					border-radius: 15px;
					border-color: #C0C0C0;
					padding-left: 10px;
					width: 80%;
					padding: 1%;
					float: left;
				}
				.onl{
					text-decoration: none;
					color: white;
					float: right;
					margin-right: 5%;
				}
				.ggif{
					width: 100%;
				}
				.add{
					width: 100%;
				}
				.ad{
					margin: 0;
					padding: 0;
				}
				.ad1{
					width: 32%;
				}
				.ad2{
					width: 32%;
				}
				.ad3{
					width: 32%;
				}
				.specify{
					width: 100%;
				}
				.specify>ul{
					width: 100%;
					text-align: center;
					float: left;
				}
				.specify>ul>li{
					width: 20%;
					float: left;
				}
				.specify>ul>li>a>img{
					width: 50%;
				}
				.specify>ul>li>div>a{
					text-decoration: none;
					text-align: center;
					color: #000000;
				}
			}
			@media screen and (min-width : 800px) {
				.header{
					background-color: orange;
					width: 100%;
					height: 10%;
					padding-bottom: 10%;
				}
				.header a{
					text-decoration: none;
					color: white;
				}
				.hhh{
					display: none;
				}
				.sea{
					float: left;
					width: 100%;
					height: 15%;
					margin-top: 3%;
				}
				.sea>input{
					border-radius: 15px;
					border-color: #C0C0C0;
					padding-left: 10px;
					width: 90%;
					height: 100%;
					padding: 1%;
					float: left;
				}
				.onl{
					text-decoration: none;
					color: white;
					font-size: 1rem;
					float: right;
					margin-right: 2rem;
					margin-bottom: 2%;
				}
				.menu{
					float: left;
					width: 100%;
					height: 10%;
					padding-top: 1%;
					padding-bottom: 1%;
					background-color: yellow;
				}
				.menu>ul>li>a{
					text-decoration: none;
					color: black;
				}
				.ull{
					width: 100%;
				}
				.ull>li{
					text-align: center;
					width: 30%;
					float: left;
				}
				.ggif{
					width: 100%;
					height: auto;
				}
				.add{
					width: 100%;
					height: auto;
				}
				.ad{
					margin: 0;
					padding: 0;
					height: auto;
				}
				.ad1{
					width: 32.5%;
					height: auto;
				}
				.ad2{
					width: 32.5%;
					height: auto;
				}
				.ad3{
					width: 32.5%;
					height: auto;
				}
				.specify{
					margin-top: 3%;
					width: 100%;
					height: auto;
				}
				.specify>ul{
					text-align: center;
					width: 100%;
					float: left;
				}
				.specify>ul>li{
					width: 20%;
					float: left;
				}
				.specify>ul>li>a>img{
					text-align: center;
					width: 50%;
				}
				.specify>ul>li>div>a{
					text-decoration: none;
					text-align: center;
					color: #000000;
				}
			}
			
		</style>
	</head>
	<body>
		<!-- 800px以上  首页登录注册  800以下折叠为分类 -->
		<div class="header">
			<div class="hhh">
				<a href="#">
					<div class="spe"></div>
				</a>
				<div class="sppe">
					<ul class="ul1">
						<li class="ulll"><a href="#">分类</a></li>
						<ul class="ul2">
							<li><a href="#">首页</a></li>
							<li><a href="#">登录</a></li>
							<li><a href="#">注册</a></li>
						</ul>
					</ul>
				</div>
			</div>
			<div class="sea" >
				<input type="search" placeholder="厨卫保暖季 哒哒哒~" />
				<a href="#" class="onl"><span>登录</span></a>
			</div>
		</div>	
			<div class="menu">
				<ul class="ull">
					<li><a href="#">首页</a></li>
					<li><a href="#">登录</a></li>
					<li><a href="#">注册</a></li>
				</ul>
			</div>
			
		<div class="ggif">
			<a href="#"><img src="img/banner.gif" class="add" /></a>
			<div class="ad">
				<a href="#"><img src="img/ad1.gif" class="ad1" /></a>
				<a href="#"><img src="img/ad2.gif" class="ad2" /></a>
				<a href="#"><img src="img/ad3.gif" class="ad3" /></a>
			</div>
			
		</div>
		<div class="specify">
			<ul>
				<li>
					<a href="#"><img src="img/nav1.png"></a>
					<div><a href="#">爆款手机</a></div>
				</li>
				<li>
					<a href="#"><img src="img/nav1.png"></a>
					<div><a href="#">爆款手机</a></div><div>
				</li>
				<li>
					<a href="#"><img src="img/nav1.png"></a>
					<div><a href="#">爆款手机</a></div><div>
				</li>
				<li>
					<a href="#"><img src="img/nav1.png"></a>
					<div><a href="#">爆款手机</a></div>
				</li>
				<li>
					<a href="#"><img src="img/nav1.png"></a>
					<div><a href="#">爆款手机</a></div>
				</li>
			</ul>
			<ul>
				<li>
					<a href="#"><img src="img/nav1.png"></a>
					<div><a href="#">爆款手机</a></div>
				</li>
				<li>
					<a href="#"><img src="img/nav1.png"></a>
					<div><a href="#">爆款手机</a></div>
				</li>
				<li>
					<a href="#"><img src="img/nav1.png"></a>
					<div><a href="#">爆款手机</a></div>
				</li>
				<li>
					<a href="#"><img src="img/nav1.png"></a>
					<div><a href="#">爆款手机</a></div>
				</li>
				<li>
					<a href="#"><img src="img/nav1.png"></a>
					<div><a href="#">爆款手机</a></div>
				</li>
			</ul>
		</div>
	</body>
</html>

代码的运行结果：
请添加图片描述
请添加图片描述

——The End

子曰礼
关注
专栏目录
WEB-响应式布局
weixin_44908855的博客
07-01 910
1. 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式设置，从而达到适配不同设备的目的 2. 响应式布局容器 响应式需要一个父级作为布局容器，来配合自己元素实现变化效果 原理就是在不同宽度的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小， 从而实现不同屏幕下，看到不同页面布局和样式变化 常见的响应式尺寸划分 超小屏幕（手机，小于768px）：设置宽度为100% 小屏幕（平板，大于等于768px）：设置宽度为750px 中等屏幕（桌面显示器，大于等于99
响应式布局
sjs1766349405的博客
11-13 551
一、响应式开发原理 1.响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的 设备的划分情况: 小于768的为超小屏幕(手机) 768-992之间的为小屏设备(平板) 992-1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 2.响应式布局容器 响应式就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。 父容器版心的尺寸划分 超小
web响应式布局
Ares_song的博客
04-30 1268
随着4G的普及，越来越多的人使用手机上网。 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件...
响应式web布局
做一个有趣的妞儿
08-25 722
响应式web： 2010年，Ethan Marcotte提出（媒体查询+栅格布局+弹性图片） 设计理念： 1）一个网页设计，多个设备使用； 2）移动优先 用户体验： 经过精心筛选，有选择性的显示页面内容。 技术层面： 1）HTML5+CSS3基础网页设计 2）HTML5的viewport提供可视化窗口 3）CSS3媒体查询（@med...
Web前端开发中响应式布局
xiaoxiaote的博客
03-20 722
响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境(屏幕大小、输入方式、设备/浏览器能力)而变化。本文主要介绍一些响应式布局容易忽略但又很重要的知识点。 一、视口 移动前端中常说的 viewport (视口)就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。手机端与PC端视口存在差异，电脑端的视口宽度等于分辨率，而移动端的视口宽度跟分辨率没有关系,宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率
移动web——学习笔记整理
Thaley的博客
01-22 3708
学习笔记整理——移动web(黑马的)
HTML网页设计制作——响应式网页影视动漫资讯bootstrap网页(9页)
QQ_____365392777的博客
08-20 959
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
Web前端————微博主页模仿
weixin_41460135的博客
08-08 2192
文章目录Web前端————微博主页模仿CSS部分HTML部分index主体部分 Web前端————微博主页模仿 CSS部分 /*! * Bootstrap v3.3.4 (http://getbootstrap.com) * Copyright 2011-2015 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/boot...
ASP.NET源码——[聊天留言]第八日.net留言板.zip
10-10
最后，考虑到用户体验，界面设计和响应式布局也是关键。ASP.NET 提供的 ASP.NET MVC 或 ASP.NET Core 框架支持 HTML、CSS 和 JavaScript 的灵活组合，创建出美观且适应不同设备的网页。在这个案例中，HTML 和 CSS ...
黑马毕向东Java课程笔记（35天day29-1——28-19）HTML
LKJgdut的博客
10-25 835
1、HTML概述   Html就是超文本标记语言的简写，是最基础的网页语言。Html语言的特点如下： 1、 Html是通过标签来定义的语言，代码都是由标签所组成； 2、Html代码不用区分大小写； 3、Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>...
移动WEB开发-响应式布局
qq_52822043的博客
03-16 214
1. 响应式开发 1）原理 原理：通过媒体查询针对不同宽度的设备进行布局和样式的设置，从而使配不同设备的目的。 2）响应式布局容器 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。 原理：在不同屏幕下通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现在不同屏幕下看到不同的页面布局和样式变化。 2. 3. ...
移动WEB开发之响应式布局
m0_72220120的博客
03-14 448
Bootstrap来自Twitter，是目前最受欢迎的前端框架，Bootstrap是基于HTML，CSS和JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。中文官网：官网：推荐使用：顾名思义就是一套框架，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库，组件和插件。使用者要按照框架所规定的某种规范进行开发。1. 优点标准化的html+css编码规范提供了一套简洁、直观、强悍的组件有自己的生态圈，不断的更新迭代让开发更简单，提高了开发的效率2. 版本。
移动WEB开发五、响应式布局
李宥的博客
02-20 908
响应式开发，就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
响应式布局作业
qq_52475404的博客
10-29 315
响应式布局 之前忙些事务，忘发了，被好友提醒了下 图片自带 <dd><img src="...." width =100% height=20%/></dd> 总代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g
WEB前端响应式布局之BootStarp使用
杨校的博客
05-27 4033
目录 1.Bootstrap简介： 2. 快速入门 3.演示案例 4. 响应式布局 5. CSS样式和JS插件 1.Bootstrap简介： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品...
移动Web学习08-响应式布局&bootstrap的使用
沉睡的猫的博客
04-20 1334
2、响应式布局 2.1、什么响应式布局 响应式布局是一种网页设计的方法，能够使网站在不同的设备上（如桌面电脑、平板电脑、手机等）呈现出最佳的用户体验。其核心思想是使网页能够根据用户的设备和屏幕尺寸自动调整布局和内容，以适应不同的屏幕大小和分辨率。 根据获取屏幕的宽度、调整页面布局、其核心就是利用媒体查询、让对应的css生效、来达到响应式的效果 例如 https://alloyteam.com/ 腾讯全端这个网站、他只有一个页面、在不同设备下、进行来回的相应。 市面上如京东、淘宝、他们都是有两个团队、开发了两
web前端之响应式布局的几种方式
最新发布
陈二狗的博客
05-03 2448
web前端之响应式布局的几种方式，简单易懂
到底什么是响应式布局,响应式布局如何去写
热门推荐
gaoqiang1112的博客
09-08 1万+
即第一个问题--如何解决浏览器的兼容性被我们处理了之后,我们开始学习,如何解决响应式布局,到底什么是响应式布局 其实响应式布局.说的通俗点,就是浏览你写的网站或者说页面的容器不同,大小不同,有人用手机.有人用平板,有人用笔记本电脑,有人用台式.由于你写的代码,在初期 测试的时候,都是根据你的电脑尺寸设计的,所以,当浏览你写的页面的人的电脑和你的不一样时,页面就会发生变化,从而导致页面崩溃.那么
如何完成响应式布局，有几种方法？看这个就够了
m0_62360527的博客
10-04 2363
如何完成响应式布局，有几种方法？看这个就够了
软件工程基本路径测试法实验——NextDay问题
“软件工程实验四”是一个关于白盒测试的实验，主要针对NextDay问题，即给定一个日期（年，月，日），计算它的下一天。实验要求日期范围为1000年至3000年，1月至12月，1日至31日。实验内容包括使用基本路径测试法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值