css 制作出窝旅行面试练习

<template>
	<div class="content">
		<h3 class="head">模块1</h3>
		<div class="mk1">
			<div class="left">
				<ul>
					<li>
						<span>菜单1</span>
						<div class="nav">1</div>
					</li>
					<li>
						<span>菜单2</span>
						<div class="nav">2</div>
					</li>
					<li>
						<span>菜单3</span>
						<div class="nav">3</div>
					</li>
				</ul>
			</div>
			<!--模块1-中间-->
			<div class="middle">
				<img src="../../assets/banner.jpg" />
			</div>

			<!--模块1-右边-->
			<div class="right">
				<div class="phone_move">
					<img src="../../assets/phone.png" />
				</div>
			</div>
		</div>

		<!--模块2-->
		<h3 class="head">模块2</h3>
		<div class="mk2">
			<div class="right">
				<img src="../../assets/b.jpg" />
				<div class="text">美丽风景图</div>
			</div>
			<ul>
				<li>
					<a>
						<img src="../../assets/a.jpg" />
					</a>
				</li>
				<li>
					<a>
						<img src="../../assets/a.jpg" />
					</a>
				</li>
				<li>
					<a>
						<img src="../../assets/a.jpg" />
					</a>
				</li>
				<li>
					<a>
						<img src="../../assets/a.jpg" />
					</a>
				</li>
			</ul>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">

	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		width: 80%;
	}

	.head {
		float: left;
	}

	.mk1 {
		display: flex;
		flex-direction: row;
		height: 300px;
		width: 100%;

		.left {
			width: 300px;
			height: 300px;
			background-color: red;
			font-size: 14px;
			border: 1px #ffffff solid;

			ul {
				width: 100%;
				height: 100%;
				display: flex;
				padding: 0;
				margin: 0;
				position: relative;
				flex-direction: column;
			}

			ul li {
				color: #ffffff;
				width: 100%;
				height: 100%;
				height: 65px;
				list-style: none;
				display: flex;
				align-items: center;
				border-bottom: 1px #ffffff solid;
				span{
					margin-left: 15px;
				}
			}

			ul li:hover{
				color: #000;
				background-color: yellow;
				.nav{
					display: block;
				}
				
			}
			
			.nav {
				height: 90px;
				width: 170px;
				background: #ffffff;
				position: absolute;
				z-index: 9999;
				right: -180px;
				display: none;
				border:1px rgba(0,0,0,0.3) solid;
			}
			
			.nav::before {
				  width: 25px;
				  height: 25px;
				  position: absolute;
				  content: "";
				  left: -13px;
				  top: 30px;
				  background-color: #ffffff;
				  transform: rotate(45deg);
				  border-left:1px rgba(0,0,0,0.3) solid;
				  border-bottom:1px rgba(0,0,0,0.3) solid;
				/*  border-top: 20px dashed transparent;
				  border-right: 20px solid #ffffff;
				  border-bottom: 20px dashed transparent; */
			}
			
		}

		.middle {
			flex: 1;//flex设置为1沾满剩余空间
			img {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			width: 200px;
			height: 100%;
			background-color: yellow;
			display: flex;
			justify-content: center;
			align-items: center;

			.phone_move {
				width: 80px;
				height: 80px;
				background-color: red;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			/*
			      turn : 定义的动画名称
			      1s : 动画时间
			      linear : 动画以何种运行轨迹完成一个周期
			      infinite :规定动画应该无限次播放
			     */
			.phone_move img {
				animation: turn 1s linear infinite;
			}

			@keyframes turn {

				5%,
				15%,
				30% {
					transform: rotate(10deg);
				}

				10%,
				20% {
					transform: rotate(-10deg);
				}

				40% {
					transform: rotate(0deg);
				}
			}
		}
	}




	.mk2 {
		display: flex;
		width: 100%;
		flex-direction: row-reverse;
		justify-content: space-between;

		.right {
			width: 200px;
			height: 400px;
			position: relative;
			overflow: hidden;
			width: 200px;
			height: 400px;

			img {
				width: 100%;
				height: 100%;
			}

			.text {
				width: 100%;
				position: absolute;
				bottom: 0;
				height: 30px;
				background: rgba(0,0,0,0.5);
				text-align: center;
				// opacity: 0.5;
				color: #fff;
				font-size: 14px;
				transition: all 1s;
			}

			.text:hover {
				padding-top: 5px;
				height: 50px;
			}

		}

		ul {
			flex: 1;
			//使用网格布局
			display: grid;
			grid-gap: 50px 5px; //上下 左右
			grid-template: 33% 33% 33% /33% 33% 33%; //两行 每行每个li占33%
			padding: 0;
			justify-items: center;
			align-items: center;
		}

		ul li {
			list-style: none;
			margin: 5px;
			height: 200px;

			border-radius: 10px;
			overflow: hidden;
			transition: all 1s;

			a img {
				height: 100%;
				width: 100%;
				display: block;
				transition: all 1s;
			}
		}

		ul li:hover {
			box-shadow: 5px -5px 15px rgba(0, 0, 0, 0.5); //x轴正数右侧偏，负值左偏 ； y轴 负值向上偏，正值向下；15px 投影范围
			transform: translateY(-10px); //向上移10px
			img{
				transform: scale(1.1); //图片放大为原来的1.1倍
			}
		}
	}


</style>