小测错题本

最新推荐文章于 2024-09-21 21:39:30 发布

qq_47764627

最新推荐文章于 2024-09-21 21:39:30 发布

阅读量138

点赞数

文章标签： visual studio code visual studio

本文链接：https://blog.csdn.net/qq_47764627/article/details/119383183

版权

题目：

一、根据以下效果图，任选两种效果，实现代码

根据不用的尺寸设置限定的宽高，用rem来换算实现各种设备打开体现出来不同的样式，但是这些都写在了一个css里面


	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	@media screen and (max-width:768px) {

	body,
	html {
	font-size: 30px;
	}

	.mbox div {
	width: 2.66666667rem;
	height: 2.66666667rem;
	background-color: white;
	border-radius: 50%;
	}

	.fox {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	width: 9rem;
	}

	}

	@media screen and (min-width:768px) {

	body,
	html {
	font-size: 24px;
	}

	.mbox div {
	width: 2.0833333rem;
	height: 2.0833333rem;
	background-color: white;
	border-radius: 50%;
	}

	.fox {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	width: 14rem;
	}

	}

	@media screen and (min-width:922px) {

	body,
	html {
	font-size: 24px;
	}

	.mbox div {
	width: 2.0833333rem;
	height: 2.0833333rem;
	background-color: white;
	border-radius: 50%;
	}

	.fox {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	width: 19rem;
	}

	}


	@media screen and (min-width:1200px) {

	body,
	html {
	font-size: 16px;
	}

	.mbox div {
	width: 1.875rem;
	height: 1.875rem;
	background-color: white;
	border-radius: 50%;
	}

	.fox {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	}

	}

	.mbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	.fox {
	margin: 0 auto;
	background-color: pink;
	}
	</style>
	</head>

	<body>

	<div class="fox">
	<div class="mbox">
	<div></div>
	<p>我是个头像</p>
	</div>

	<div class="mbox">
	<div></div>
	<p>我是个头像</p>
	</div>

	<div class="mbox">
	<div></div>
	<p>我是个头像</p>
	</div>

	<div class="mbox">
	<div></div>
	<p>我是个头像</p>
	</div>

	<div class="mbox">
	<div></div>
	<p>我是个头像</p>
	</div>

	<div class="mbox">
	<div></div>
	<p>我是个头像</p>
	</div>
	</div>


	</body>

	</html>

二、根据以下效果图，任选两种效果，实现代码

自动换行
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	body {
	background-color: rgb(11, 0, 73);
	}

	.fbox {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid white;
	position: relative;

	}

	.shi {
	width: 3px;
	height: 20px;
	background-color: white;
	transform-origin: 0px 20px;
	left: 50%;
	top: 3px;
	border-radius: 0 0 25% 25%;
	transform: translateX(-50%);
	position: absolute;
	animation: run 3s;
	}

	.fen {
	width: 1px;
	height: 23px;
	background-color: white;
	left: 50%;
	top: 0px;
	transform: translateX(-50%);
	position: absolute;
	transform-origin: 0px 23px;
	animation: run1 3s;
	border-radius: 0 0 25% 25%;
	}

	.dian {
	width: 5px;
	height: 5px;
	background-color: white;
	border-radius: 50%;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	position: absolute;
	}

	@keyframes run {
	0% {
	transform: rotateZ(0deg);
	}

	100% {
	transform: rotateZ(50deg);
	}
	}

	@keyframes run1 {
	0% {
	transform: rotateZ(0deg);
	}

	100% {
	transform: rotateZ(360deg);
	}
	}

	.dianchi {
	display: flex;
	align-items: center;
	}

	.qita {
	background-color: white;
	width: 30px;
	height: 60px;
	}

	.bian {
	width: 130px;
	height: 120px;
	border: 1px solid white;
	}
	.jindu{
	width: 0px;
	height: 120px;
	animation: identifier 3s;
	background-color: white;
	}
	@keyframes identifier {
	0%{}
	100%{
	width: 100%;
	}
	}
	</style>
	</head>

	<body>
	<div class="fbox">
	<div class="shi"></div>
	<!-- <div class="dian"></div> -->
	<div class="fen"></div>
	</div>

	<div class="dianchi">
	<div class="bian">
	<div class="jindu"></div>
	</div>
	<div class="qita"></div>
	</div>

	</body>

	</html>