放一个方框,然后放图片在下方,仅显示方框内的图片

首先放好方框,

然后放图片在方框上方

ctrl+alt+g 或者右键剪切蒙版就可以了。

好的,您需要一个网页,网页应该有一个导航条和四个矩形方框方框应该均匀分布,以相同的距离置,每个方框应该由两个部分组成,分别是序号1和宿舍,序号2和让家人。方框的背景颜色应该分为白色和灰色,白色在上方,灰色在下方。当鼠标悬停在其中一个块时,方框内灰色变为黑色。 这是一个示例代码,您可以根据需要进行修改和扩展: ```html <!DOCTYPE html> <html> <head> <title>网页标题</title> <style type="text/css"> * { margin: 0; padding: 0; box-sizing: border-box; } nav { background-color: #333; color: #fff; display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 20px; } nav ul { display: flex; list-style: none; } nav ul li { margin-right: 20px; } nav ul li a { color: #fff; text-decoration: none; font-weight: bold; font-size: 18px; } .content { display: flex; justify-content: space-between; margin-top: 50px; padding: 20px; } .box { width: 23%; background-color: #fff; padding: 20px; border: 1px solid #ccc; transition: background-color 0.3s ease-in-out; } .gray { background-color: #ccc; } .black { background-color: #000; color: #fff; } .split-line { height: 1px; background-color: #ccc; margin: 20px 0; } </style> </head> <body> <nav> <h1>网页标题</h1> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> </ul> </nav> <div class="content"> <div class="box"> <h2>1.宿舍</h2> <p>这里是宿舍的内容。</p> </div> <div class="box"> <h2>2.让家人</h2> <p>这里是让家人的内容。</p> </div> <div class="box gray"> <div class="split-line"></div> <h2>1.宿舍</h2> <p>这里是宿舍的内容。</p> </div> <div class="box gray"> <div class="split-line"></div> <h2>2.让家人</h2> <p>这里是让家人的内容。</p> </div> </div> <script type="text/javascript"> var boxes = document.querySelectorAll('.box'); for (var i = 0; i < boxes.length; i++) { boxes[i].addEventListener('mouseover', function() { this.classList.add('black'); }); boxes[i].addEventListener('mouseout', function() { this.classList.remove('black'); }); } </script> </body> </html> ``` 这个示例代码包括一个导航条和四个方框。每个方框由两个部分组成,分别是序号1和宿舍,序号2和让家人。方框的背景颜色分为白色和灰色,白色在上方,灰色在下方。当鼠标悬停在其中一个块时,方框内灰色变为黑色。 您可以在此基础上进行进一步的修改和扩展,以满足您的具体需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值