题目详情
填空题 阅读下列说明、效果图和HTML代码,进行静态网页开发,填写(1)至(10)代码. 【说明】 这个某项目中的其中一部分,应用HTML5和css3技术完成页面的布局.项目包含主页index.html、style.css和img.要求鼠标经过翻转出现遮罩层,根据效果图和已有的代码补全(1)-(10)的代码 【效果图】
【代码:主页index.html】此页代码在此省略,请在"实操代码"中第二题查看 【代码:style.css】 .clearfix:after{ display:block; content:''; ____(1)_____;/*清除浮动*/ } .clearfix{ zoom:1; ____(2)_____;/*文字居中*/ } .fl{ float:left; } .fr{ float:right; } .part5 .tBox{ width: 1154px; height: 430px; margin: 30px auto 0; position: relative; } .part5 .tBox .picBox{ width: 1000px; margin: 0 auto;/*盒子居中*/ height: 100%; ______(3)_____;/*溢出隐藏*/ position: relative; } .part5 .tBox .picBox .roll{ position: relative; margin-right: 24px; perspective: 1000px; ___(4)______;/*鼠标经过变小手状态*/ } /*最后一个元素*/ .part5 .tBox .picBox .roll:last-child{ margin-right:0; } .part5 .tBox .picBox li .bg{ width: 100%; height: 65px; background:____(5)_____; /*背景黑色透明80%*/ position: absolute; left: 0; bottom: 0; } .part5 .tBox .picBox li h3{ position: absolute; left: 0; bottom: 0; width: 100%; height: 65px; text-align: left; padding-left: 13px; } .part5 .tBox .picBox li .tName{ font-size: 18px; color: #fff; padding-top: 13px; margin-bottom: 5px; } .part5 .tBox .picBox li .tTitle{ font-size: 12px; color: #b4b4b4; } .roll .box-content{ width: 100%; height: 480px; position: absolute; top: 0; left: 0; background: ____(5)_______; transform: ____(6)____;/*Y轴旋转90度*/ transition: all 0.50s ease-in-out 0s;/*过渡效果*/ overflow: hidden; } .roll .box-img{ transform: rotateY(0); transition: all 0.50s ease-in-out 0s;/*过渡效果*/ } .roll:hover .box-img{ transform: ___(7)_____;/*Y轴旋转-90度*/ } .roll:hover .box-content{ transform: ___(8)_____;/*Y轴旋转0度*/; } .roll .box-content .t1{ font-size: 20px; ___(9)____: bold;/*文字加粗*/ color: #fff; padding-top: 50px; } .roll .box-content .t2{ font-size: 16px; color: #fff; padding-top: 12px; } .roll .box-content .t3{ width: 190px; height: 1px ; background: #fff; margin: 20px auto 0; } .roll .box-content .t4{ font-size: 14px; width: 182px; ____(10)______;/*文字两端对齐*/ color: #fff; margin: 20px auto 0; } 【问题】(20分,每空2分) 进行静态页开发,补全代码,在(1)至(10)处填入正确的内容.
第二题.rar

学科:响应式Web开发
时间:2026-05-21 22:58:46
