响应式网页的编写

最新推荐文章于 2024-02-19 21:38:32 发布
最新推荐文章于 2024-02-19 21:38:32 发布
阅读量294 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41380430/article/details/82781892
版权

用bootstrap+css动画+html搭建响应式网页

index.html部分

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>中央厨房</title>
		<!--
			initial-scale=1.0//原始比例1.0
		    maxinum-scale=1.0//用户可以缩放的最大比例是1.0
		    user-scalable=no//用户是否能够缩放
		-->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link rel="stylesheet" href="css/mystyle.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script src="js/jquery-2.1.1.min.js"></script>
	</head>

<body>
		<div id="pageContain">
			<div class="page page1 current">
				<div class="container">
					<div class="row login">
						<div class="col-xs-12">
							<img src="img/logo_03.png" alt="" class="img1 img-responsive " style="margin-bottom:5%;" />
							<img src="img/select1_tit_03.png" alt="" class="img2 img-responsive" style="margin-bottom:50px;" />
							<form action="" class="form-horizontal img3">
								<div class="form-group">
									<div class="col-sm-6">
										<input type="text" class="form-control" placeholder="账号" />
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-6">
										<input type="text" class="form-control" placeholder="密码" />
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-6">
										<input type="text" class="form-control" placeholder="验证码" />
									</div>
								</div>
								<div class="checkbox" style="margin-bottom:20px;">
									<div class="col-sm-6">
										<label style="color:#fff">
											<input type="checkbox" />记住我
										</label>
									</div>
								</div>
								<div class="col-sm-6" style="padding:0">
									<button type="submit" class="btn btn-info btn-block">立即登录</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<div class="page page2">
					<img src="img/bg2_1_02.png" alt=""  class="img-responsive img5"/>
					<img src="img/bg2_2_02.png" alt=""  class="img-responsive img5"/>
					<div class="container">
						<img src="img/text1_03.png" alt="" class="img-responsive img4" />
						<img src="img/img10_03.png" alt="" class="img-responsive img6" />
						<img src="img/img2_03.png" alt="" class="img-responsive img7" />
					</div>
			</div>
			<div class="page page3">
				<div class="container">
					<div class="row">
						<img src="img/text2_07.png" alt="" class="img-responsive img11 col-md-4 col-sm-6 col-xs-12 text-left" />
					</div>
					<div class="row" >
						<div class="col-xs-4">
						<img src="img/image1_03.jpg" alt="" class=" img-responsive img8" />
						</div>
						<div class="col-xs-4">
						<img src="img/image2_03.jpg" alt="" class=" img-responsive img9" />
						</div>
						<div class="col-xs-4">
						<img src="img/image3_03.jpg" alt="" class="img-responsive img10" />
						</div>
					</div>
				</div>
			</div>
			<div class="page page4">
				<div class="container">
					<div class="row">
						<div class="col-sm-8 col-sm-offset-4">
							<img src="img/text8_03.png" alt="" class="img-responsive img12"/>
						</div>
					</div>
					<img src="img/img6_03.jpg" alt="" class="img-responsive img6"/>
					<img src="img/img7_03.jpg" alt="" class="img-responsive img13"/>
				</div>
			</div>
			<div class="page page5">
				<div class="container">
					<div class="row" style="margin-top: 10%">
						<div class="col-sm-6">
							<img src="img/text4_11.png" alt="" class="img-responsive img21"/>
						</div>
						<div class="col-sm-6">
							<img src="img/img8_03.jpg" alt="" class="img-responsive img22"/>
						</div>
					</div>
				</div>
			</div>
		</div>
		<ul id="navbar">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	
		<script src="js/fullPage.min.js"></script>
		<script>
			var runPage;
			runPage = new FullPage({
				id: 'pageContain',
				slideTime: 800,
				effect: {
					transform: {
						translate: 'Y'
					},
					opacity: [0, 1] // [起始透明度, 结束时透明度];
				},
				mode: 'wheel, touch, nav:navbar', // 转换模式，表示 '滚轮,触摸,导航条:导航条id';
				easing: 'ease' //规定慢速开始，然后变快，然后慢速结束的过渡效果

			});

			var bh = $("body").height();
			$(".container").css("height", "" + bh + "");
		</script>
	</body>
</html>
</script>

</body>
</html>

mystyle.css部分

html {
	overflow: hidden;
}
#pageContain {
	overflow: hidden;
}
.page {
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
.contain {
	width: 100%;
	height: 100%;
	display: none;
	position: relative;
	z-index: 0;
}
.current .contain, .slide .contain {
	display: block;
}
.current {
	display: block;
	z-index: 1;
}
.slide {
	display: block;
	z-index: 2;
}
.swipe {
	display: block;
	z-index: 3;
	transition-duration: 0ms !important;
	-webkit-transition-duration: 0ms !important;
}
.page1 {
	background: url(../images/bg_01_01.jpg) no-repeat;
	background-size: cover;
}
.page2 {
	background: #fff;
	position: relative;
}

.page3 {
	background: #fff;
}
.page4 {
	background: #fff;
}
.page5 {
	background: #fff;
}

#navBar {
	z-index: 3;
	position: absolute;
	top: 34%;
	right: 3%;
	list-style: none;
}
#navBar .active {
	background: url(../images/dot.png) no-repeat bottom;
	width: 21px;
	height: 21px;
}
#navBar li {
	cursor: pointer;
	margin-bottom: 10px;
	width: 21px;
	height: 21px;
	background: url(../images/dot.png) 5px 5px no-repeat
}
.container{
	position: relative;
	min-height: 650px;
}
.login{
	margin-top: 2%;
}
.form-group input{
	font-size: 18px;
	line-height: 50px;
	height: 50px;
}
.img1{
	animation: .6s box1 linear backwards;

}
.img2{
	animation: .6s box1 linear backwards;
	animation-delay: 0.6s;
	-webkit-animation-delay: 0.6s;
}
.img3{
	animation: .8s box1 linear backwards;
	animation-delay: 1.2s;
	-webkit-animation-delay: 1.2s;
}
@keyframes box1 {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.img4{
	animation:2s box4 linear backwards;
	position: absolute;
	top:5%;
	right: 0;
	z-index: 10;
}
@keyframes box4 {
	from{
		opacity: 0;
		right: -10%;
	}
	to{
		opacity: 1;
		right: 0%;
	}
}
.img5{
	animation:2s box5 linear backwards;
	position: absolute;
	bottom:20%;
	left: 0;
	z-index: 1;
	-webkit-transform:scaleY(1);
	-moz-transform:scaleY(1);
	-o-transform:scaleY(1);
	transform:scaleY(1);
}

@keyframes box5 {
	from{
		opacity: 0;
		-webkit-transform:scaleY(0);
		-moz-transform:scaleY(0);
		-o-transform:scaleY(0);
		transform:scaleY(0);
	}
	to{
		opacity: 1;
		-webkit-transform:scaleY(1);
		-moz-transform:scaleY(1);
		-o-transform:scaleY(1);
		transform:scaleY(1);
	}
}
.img6 {
	animation: 1s box6 linear backwards;
	width: 50%;
	position: absolute;
	bottom: 15%;
	left:10%;
	z-index: 5;

	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.img6:hover{
	-webkit-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
	z-index: 9;
}
@keyframes box6 {
	from{
		opacity: 0;
		left: -5%;
	}
	to{
		opacity: 1;
		left: 10%;
	}
}

.img7 {
	animation: 1s box7 linear backwards;
	width: 50%;
	position: absolute;
	bottom: 15%;
	right:10%;
	z-index:8;

	animation-delay: 0.8s;
	-webkit-animation-delay: 0.8s;

	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.img13{
	width: 40%;
	animation: 1s box7 linear backwards;
	position: absolute;
	bottom:15%;
	right:10%;
	z-index:8;
	animation-delay: 0.8s;
	-webkit-animation-delay: 0.8s;

	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.img7:hover,.img13:hover{

	-webkit-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
}
@keyframes box7 {
	from{
		opacity: 0;
		right: -5%;
	}
	to{
		opacity: 1;
		right: 10%;
	}
}
.img8{
	animation: 0.5s box8 linear backwards;
	width: 80%;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
}
@keyframes box8 {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.img9{
	animation: 0.5s box9 linear backwards;
	width: 80%;
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
}
@keyframes box9 {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.img10{
	width: 80%;
	animation: 0.5s box10 linear backwards;
}
@keyframes box10 {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.img11,.img12{
	animation: 1.5s box11 linear backwards;
}
@keyframes box11 {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.img21{
	transform: translateX(0);
	animation: 1s box21 linear backwards;
	width: 80%;
}
@keyframes box21 {
	from{
		opacity: 0;
		transform: translateX(100%);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}
.img22{
	transform: translateX(0);
	animation: 1s box22 linear backwards;
	width: 80%;
}
@keyframes box22 {
	from{
		opacity: 0;
		transform: translateX(-100%);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}html {
	overflow: hidden;
}
#pageContain {
	overflow: hidden;
}
.page {
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
.contain {
	width: 100%;
	height: 100%;
	display: none;
	position: relative;
	z-index: 0;
}
.current .contain, .slide .contain {
	display: block;
}
.current {
	display: block;
	z-index: 1;
}
.slide {
	display: block;
	z-index: 2;
}
.swipe {
	display: block;
	z-index: 3;
	transition-duration: 0ms !important;
	-webkit-transition-duration: 0ms !important;
}
.page1 {
	background:url(../img/bg_01_01.jpg) no-repeat;
	background-size: cover;
}
.page2 {
	background: #fff;
	position: relative;
}

.page3 {
	background: #fff;
}
.page4 {
	background: #fff;
}
.page5 {
	background: #fff;
}


.container{
	position: relative;
	min-height: 650px;
}
.login{
	margin-top: 2%;
}
.form-group input{
	font-size: 18px;
	line-height: 50px;
	height: 50px;
}
.img1{
	animation: .6s box1 linear backwards;

}
.img2{
	animation: .6s box1 linear backwards;
	animation-delay: 0.6s;
	-webkit-animation-delay: 0.6s;
}
.img3{
	animation: .8s box1 linear backwards;
	animation-delay: 1.2s;
	-webkit-animation-delay: 1.2s;
}
@keyframes box1 {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.img4{
	animation:2s box4 linear backwards;
	position: absolute;
	top:5%;
	right: 0;
	z-index: 10;
}
@keyframes box4 {
	from{
		opacity: 0;
		right: -10%;
	}
	to{
		opacity: 1;
		right: 0%;
	}
}
.img5{
	animation:2s box5 linear backwards;
	position: absolute;
	bottom:20%;
	left: 0;
	z-index: 1;
	-webkit-transform:scaleY(1);
	-moz-transform:scaleY(1);
	-o-transform:scaleY(1);
	transform:scaleY(1);
}

@keyframes box5 {
	from{
		opacity: 0;
		-webkit-transform:scaleY(0);
		-moz-transform:scaleY(0);
		-o-transform:scaleY(0);
		transform:scaleY(0);
	}
	to{
		opacity: 1;
		-webkit-transform:scaleY(1);
		-moz-transform:scaleY(1);
		-o-transform:scaleY(1);
		transform:scaleY(1);
	}
}
.img6 {
	animation: 1s box6 linear backwards;
	width: 50%;
	position: absolute;
	bottom: 15%;
	left:10%;
	z-index: 5;

	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.img6:hover{
	-webkit-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
	z-index: 9;
}
@keyframes box6 {
	from{
		opacity: 0;
		left: -5%;
	}
	to{
		opacity: 1;
		left: 10%;
	}
}

.img7 {
	animation: 1s box7 linear backwards;
	width: 50%;
	position: absolute;
	bottom: 15%;
	right:10%;
	z-index:8;

	animation-delay: 0.8s;
	-webkit-animation-delay: 0.8s;

	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.img13{
	width: 40%;
	animation: 1s box7 linear backwards;
	position: absolute;
	bottom:15%;
	right:10%;
	z-index:8;
	animation-delay: 0.8s;
	-webkit-animation-delay: 0.8s;

	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.img7:hover,.img13:hover{

	-webkit-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
}
@keyframes box7 {
	from{
		opacity: 0;
		right: -5%;
	}
	to{
		opacity: 1;
		right: 10%;
	}
}
.img8{
	animation: 0.5s box8 linear backwards;
	width: 80%;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
}
@keyframes box8 {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.img9{
	animation: 0.5s box9 linear backwards;
	width: 80%;
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
}
@keyframes box9 {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.img10{
	width: 80%;
	animation: 0.5s box10 linear backwards;
}
@keyframes box10 {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.img11,.img12{
	animation: 1.5s box11 linear backwards;
}
@keyframes box11 {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.img21{
	transform: translateX(0);
	animation: 1s box21 linear backwards;
	width: 80%;
}
@keyframes box21 {
	from{
		opacity: 0;
		transform: translateX(100%);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}
.img22{
	transform: translateX(0);
	animation: 1s box22 linear backwards;
	width: 80%;
}
@keyframes box22 {
	from{
		opacity: 0;
		transform: translateX(-100%);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}


#navbar {
	z-index: 3;
	position: absolute;
	top: 34%;
	right: 3%;
	list-style: none;
}

#navbar li {
	cursor: pointer;
	margin-bottom: 10px;
	width: 21px;
	height: 21px;
	background: url(../images/dot.png) 5px 5px no-repeat
}

#navbar .active {
	background: url(../images/dot.png) no-repeat bottom;
	width: 21px;
	height: 21px;
}
一纸情深
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现响应式网页设计
m0_49551563的博客
09-02 3790
利用 CSS 和 JavaScript 自动根据设备屏幕尺寸调整页面的布局和样式的网页，主要解决固定宽度和影响布局的元素的问题。
响应式布局开发
HXL521666的博客
11-14 1014
一、响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适合不同设备的目的。 设备划分 小区间 超小屏幕（手机） < 768 像素 小屏设备（平板） >= 768px ~ < 992px 半屏幕（屏幕显示器） >= 992px ~ < 1200px 宽屏设置（大桌面显示器） >= 1200 像素 1.2 响应式布局组件 响应式需要一个父级作为布局容器，来配合子级元素来
响应式页面的实现方式
xiaolong446的博客
01-24 1167
响应式网页设计，指的是，利用 CSS 或 JavaScript，让同一个网页，能根据屏幕的大小，自动调整布局和样式，包括对容器元素、布局、图片和字体的响应式调整。要注意的是，原生的 HTML 元素，在没有编写任何 CSS 的情况下，本身就是响应式的，不过每个网页都避免不了使用 CSS 设置样式，响应式则主要针对设置了固定宽度，或者影响布局的元素进行调整。之后，网页的可视区域（视口）就会取移动设备屏幕的宽度，设置了 initial-scale 为 1.0 之后，就会使用正常的缩放比例，即 1 倍，不缩放。
响应式网页开发(自适应页面)
桃之夭夭的博客
02-19 1490
1 响应式的概念(自适应页面)随着移动终端的兴起，多种页面规格出现，用户各种需求增加，我们需要通过响应式让用户在不同的终端看到接近相同的内容。响应式也叫作”自适应页面”，可以根据浏览设备的不同，改变不同的布局 文本 图片等的效果特点：使用一套html结构，根据终端检查变化(宽度),同时使用”媒体查询”,将不同宽度的CSS加入到不同的媒体查询中，随着页面宽度的变化，改变布局样式2. 设备的宽度。
页面响应式设计
newbie_ling的博客
09-20 2841
1.响应式布局 一个网站能够兼容多个终端(指不同分辨率，不同 Dpi 的显示设备)，而不是为每一个终端做一个特定的版本，这样的网站布局方式即称为响应式布局。 响应式布局结合多种布局方式，从而确保一个页面能够适应不同终端的显示。 常见的动态布局方式： （1）自适应布局是指当视口分辨率改变时，页面的元素位置会自动调整以适应视口的布局方式。 （2）流式布局是指当视口分辨率改变时，页面元素的宽度...
响应式网页编写经典入门教程（老外写的）.zip
10-29
响应式网页设计是一种现代网页开发技术，旨在提供跨设备、跨屏幕尺寸的无缝用户体验。它通过灵活的布局、媒体查询和可适应的图像及其他元素，确保网页在不同设备上（如桌面电脑、平板电脑和手机）都能保持良好的显示...
Bootstrap响应式星巴克网页
09-22
Bootstrap响应式设计是一种广泛应用于网页开发的技术，它使得网页能够在不同设备上自适应显示，无论是桌面电脑、平板还是手机，都能提供优秀的用户体验。Bootstrap是由Twitter开发并开源的前端框架，包含了一系列...
多种类型列表响应式网页模板
01-22
使用这样的响应式网页模板，开发者可以节省大量时间，不必从零开始编写布局代码。同时，由于模板已经过优化，能够确保在各种设备上一致的性能和外观。对于初学者来说，通过研究和修改这些模板，也能学习到响应式设计...
钢铁配件响应式网页模板
01-21
"钢铁配件响应式网页模板"是一个专为展示和销售钢铁配件设计的网页模板，它具有适应不同设备屏幕尺寸的能力，确保在手机、平板电脑和桌面电脑上都能提供良好的浏览体验。响应式设计是现代网页开发的关键特性，因为它...
牛排西餐厅响应式网页模板
01-23
【牛排西餐厅响应式网页模板】是一种专为牛排西餐厅设计的，能够自适应不同设备屏幕尺寸的网页布局方案。响应式设计是现代网页设计的重要趋势，它确保网页在手机、平板电脑和桌面电脑等不同设备上都能提供良好的用户...
20分钟成功编写bootstrap响应式页面 就这么简单
11-23
最近发现一个叫 Bootstrap 的好东西，Bootstrap 是现在最流行的响应式 CSS 框架，它以移动设备优先，能够快速适应不同设备。使用它编写响应式页面快捷、方便，而且屏蔽了浏览器差异。使用了 Bootstrap 后，再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了。 经过学习，我发现自己也具备了分分钟开发出一个高大上的页面的能力。本文将会为大家介绍 Bootstrap，并且带领大家一起实现一个响应式页面。 图 1. 移动优先，适应不同设备 一、安装 最简单的方式是直接在网页中引用内容分发网络（CDN）提供的 Bootstrap，当用户访问网页时，会从就近的服务器上获取资
一个响应式网站的前端所有功能
02-16
这是一个基于前端的响应式网站，适合开发的模板，可以在前端页面进行修改使用，很方便。
如何实现页面的响应式布局？
weixin_34357436的博客
06-20 144
所谓响应式布局，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。他的好处我们不用写多套屏幕模板而只需要写一个就可以实现，现在用的比较多的就是bootstrap的响应式布局，而他实现的原理就是，他会为一个元素设置多个类，然后通过媒体查询会根据当前屏幕分辨率来选择适合的类进行渲染。 bootstrap主要是利用栅格式布局的原理，会自动将屏幕分为12列，然后我们可以根据需要分类，并且...
移动Web（四）-响应式（BootStrap）
qq_54054566的博客
05-19 313
1、媒体查询 目标：能够根据设备宽度的变化，设置差异化样式 l min-width（从小到大） l max-width（从大到小） l 需求 Ø 默认网页背景色是灰色 Ø 屏幕宽度在768-992之间, 网页背景色是粉色 Ø 屏幕宽度在992-1200之间, 网页背景色是skyblue Ø 屏幕宽度大于1200, 网页背景色是绿色 ...
响应式页面
lv_suri的博客
07-14 981
同一套静态页面代码，在不同的设备中展现出不同的效果，并且可以自适应
编写响应式网站的几点要素
06-29 1677
编写响应式网站的几点要素(1) 在HEAD标签中声明viewport元标签    &lt;meta name="viewport" content="width=device-width,init-scale=1,user-scalable=0" /&gt;(2) 不使用绝对的宽度,元素的宽度使用百分比    margin,padding 影响不大(3) 字体,要使用倍率, em    e.g  ...
编写一个响应式网页过程
weixin_30809333的博客
04-27 308
手机能自动适配需要加上下面这句话 (1)声明元标签 viewport (手机适配) <meta name="viewport" content="width=device-width,initial-scale=1.0"> width=device-width 表示视口宽度就是设备宽度 initial-scale=1.0 表示视口宽度是否缩放1.0...
如何用一简单的CSS制作响应式HTML网页
热门推荐
hzp666的博客
12-12 2万+
如何用简单的CSS制作响应式HTML网页#故事前端开发在这篇文章中，我将教你如何使用CSS网格来创建一个超级酷的图像网格，它随着屏幕的宽度而改变列的数量。最赞的一点就是：这个响应式效果只需要添加一行CSS。这意味着我们不必给HTML取很乱的类名（即col-sm-4，col-md-8），或者为每一个屏幕大小创建媒体查询。现在让我们开始吧！设置对于本文，我们将继续使用我们在第一篇CSS Grid文章中...
响应式页面代码
liu709127859的专栏
05-03 9385
html 页面中不同分辨率引用不同css、 &lt;link rel="stylesheet" type="text/css" media="only screen and (max-width: 767px)" href="css/jzbk_style_sm.css"&gt; &lt;link rel="stylesheet" type="text/css"
html响应式网页制作模板
最新发布
06-04
使用Bootstrap，开发者可以快速创建响应式网页，而无需编写大量的代码。 另外，值得一提的是，现在许多主流的网站构建工具如Wix、WordPress等也提供了响应式网页模板，让用户可以更加方便地制作响应式网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值