HTML——响应式布局+Vue简介

最新推荐文章于 2024-07-06 15:15:56 发布

Jhinhua

最新推荐文章于 2024-07-06 15:15:56 发布

阅读量262

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104967383

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

响应式布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        //下载bootstrap.min.css
		<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
		
	</head>
	<body>
		<!-- 
		把一行分成12列
			不同屏幕尺寸时候 元素占12份中的几分  按照设计完成不同屏幕的
			样式设计
		 -->
		<div class="container">
			<div class="row">
				<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic16.jpg" />
				<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic17.jpg" />
				<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic18.jpg" />
				<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic19.jpg" />
			</div>                                   
			<div class="row">                        
				<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic20.jpg" />
				<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic21.jpg" />
				<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic22.jpg" />
				<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic23.jpg" />
			</div>
			
		</div>
		
		
		<script>
			
			window.onresize = function(){
				var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
				console.log(w)
			}
		</script>
		
	</body>
</html>

Vue简介

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js"></script>
	</head>
	<body>
		<div id="box">
			<!-- {{ 字段名 }}来获取Vue的数据段中该字段对应的数据 -->
			<p>{{ content }}</p>
			<!-- v-text绑定数据 -->
			<h3 v-text="title"></h3>
		</div>
		
		<script>
			
			var vue = new Vue({
				// 挂载 --- 跟要设置数据的容器挂钩 通过id来进行挂载的
				el:"#box",
				// 数据段 包含的要渲染的数据
				data:{
					content:"我是Vue渲染的",
					title: "木兰辞"
				}
			})
			
		</script>
	</body>
</html>

Jhinhua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML——响应式布局+Vue简介

响应式布局 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1, maximu...
复制链接

扫一扫