css3动画、响应式布局、flex、bootstrap

最新推荐文章于 2021-05-14 22:34:37 发布

别狗了

最新推荐文章于 2021-05-14 22:34:37 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/weixin_43010586/article/details/104333101

版权

<style>
艺术字调用
@front-face{
	font-family:name;  --起名字
	src: url(sansation_light.woff);  --艺术字路径
}
div{
	font-family:name   --直接用艺术字名字
}
</style>

<html>
<head>
	<title></title>
	 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

	<style type="text/css">
		.box{width: 100px;height: 100px;margin:10px auto; background-color: red;transition:/* width 1s,height 1s,background 1s*/ all 1s;}
		.box:hover{width: 200px;height: 200px;background-color: yellow;transform: rotateX(70deg);}

		@keyframes name{
			25%{
				width: 100px;height: 100px;background-color: blue
			}
			50%{
				width: 200px;height: 200px;background-color: green;
			}
		}
		.box2{width: 100px;height: 100px;background-color: yellow; animation: name 2s;}

		/*屏幕大于1200px时候的样式*/
		@media screen and (min-width: 1200px){
			.box3{width: 200px;height: 200px;background-color: grey;}
		}
		/*屏幕小于1200px时候的样式*/
		@media screen and (max-width: 1200px){
			.box3{width: 100px;height: 100px;background-color: black;}
		}
		.box4{width: 100px;height: 100px;background-color: #238869;display: flex;justify-content:center;align-items:stretch;}
		.box4>div{width: 10px;height: 10px;background-color:#888769;margin:0 5;}
		.s{flex-grow: 2}
	</style>
</head>
<body>
	<!-- 
		2D转换 transform:
			旋转：rotate(--deg)
			偏移:translate(横坐标,纵坐标 --不脱离文档流
			缩放：scale(2,3) --横向扩张2倍，纵向变为3倍,不会改变css的样式，数据还是原来的数据
			倾斜：skew(--deg,--deg) --x轴，y轴

		3D转换 transform:
			旋转：ratete3d(x,y,z) rotateX() rotateY() rotateZ()
			偏移：translate3d()
			缩放：scale3d()
		
		过渡（框架里不能用jq，就用css3）
			transition：
		
		css3动画
			@keyframes name{50%{现在的样式}25%{之后的样式}}
			.class{animation:name 1s}

		响应式布局
			@media screen and (min/max-width:1200px){.class{}}
			min--大于这个数值时候的样式
			max--小于这个数值时候的样式

			flex
			https://www.runoob.com/w3cnote/flex-grammar.html
			.box{display:flex;
			横向：justify-content:flex-strat|flex-end|center|space-between(项目之间距离相同)|space-around(项目周围距离相同);
			纵向：align-items:flex-strat|flex-end|center|baseline(文字在同一水平线)|stretch(没有设置高度或auto的时候，拉满整个高度);
			.order{order:-1} --按照class里给的order值进行排序
			}

			boostrap样式库
			https://v3.bootcss.com/css/  --起步-基本样式
			与jq类似，封装了样式，引用的时候把link和script都引用尽力

		 -->
	<div class="box">hello</div>
	<div class="box2"></div>
	<div class="box3">11</div>
	<div class="box4">
		<div>3</div>
		<div class="s">4</div>
		<div>1</div>
	</div>
	<button type="button" class="btn btn-primary" id="btn">btn</button><br>
	<span id="con">confirm</span>

	<script type="text/javascript">
		$("#btn").click(function(){
			var r = confirm("button")
			if(r==true){
				$("#con").text("yes")
			}else{
				$("#con").css("color","red")
			}
		})
		
	</script>
</body>
</html>

别狗了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画、响应式布局、flex、bootstrap

<style>艺术字调用@front-face{ font-family:name; --起名字 src: url(sansation_light.woff); --艺术字路径}div{ font-family:name --直接用艺术字名字}</style><html><head> <title>&lt...
复制链接

扫一扫