css 制作出窝旅行面试练习

喜欢ヅ旅行 2022-09-02 04:27 187阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWp1Y2Fp_size_16_color_FFFFFF_t_70]

<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>
    			
    			<div class="middle">
    				<img src="../../assets/banner.jpg" />
    			</div>
    
    			
    			<div class="right">
    				<div class="phone_move">
    					<img src="../../assets/phone.png" />
    				</div>
    			</div>
    		</div>
    
    		
    		<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWp1Y2Fp_size_16_color_FFFFFF_t_70]: /images/20220829/7b15973c6a1241fdb304765cd9b3aac2.png