好用的网站模板,咨询服务类网站建设,做图片类型的网站要怎么做,有几个网站打不开#x1f345; 作者主页#xff1a;Java李杨勇 #x1f345; 简介#xff1a;Java领域优质创作者#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我#xff0c;都给你】 #x1f345; 欢迎点赞 #x1f44d; 收藏 ⭐留言 #x1f… 作者主页Java李杨勇 简介Java领域优质创作者、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我都给你】 欢迎点赞 收藏 ⭐留言 效果演示 文末获取源码联系方式 代码目录 主要代码实现 css样式
* {padding: 0;margin: 0;
}ul {list-style: none;
}.list {width: 1000px;height: 500px;margin: 150px auto 0;
}.list li {/* float:left; 可以使块级元素宽度可以被内容撑开*/float: left;/* 不给宽高是因为内容会被撑开 */max-width: 700px;height: 500px;box-shadow: 0 0 10px #ccc;
}/* 未选中时可以点击范围 */input {/* poacity:0点击框透明度为0 */opacity: 0;/* cursor:pointer鼠标变为小手标记 */cursor: pointer;width: 100px;height: 500px;/* 点击时过渡效果 */transition: 0.2s;
}/* 选中是宽700px */input:checked {width: 700px;
}/* 背景图no-repeat不要平铺不要重复 center/cover居中/覆盖整个li */.list li:nth-child(1),
.list ul :nth-child(1) .bj {background: url(../img/1.jpg) no-repeat center/cover;
}.list li:nth-child(2),
.list ul :nth-child(2) .bj {background: url(../img/2.jpg) no-repeat center/cover;
}/*
.list li:nth-child(1)和.list ul :nth-child(1)都是选择同一个元素啥原理不清楚
*/.list ul :nth-child(3),
.list ul :nth-child(3) .bj {background: url(../img/3.jpg) no-repeat center/cover;
}.list ul :nth-child(4),
.list ul :nth-child(4) .bj {background: url(../img/4.jpg) no-repeat center/cover;
}.list li .bj {/* 让全部.bj的背景变透明不显示于页面之上 */opacity: 0;position: absolute;top: 0;left: 0;/* 100vw100%视口高度100vh100%视口宽度*/width: 100vw;height: 100vh;/* 此时背景层级太高盖住.list了用z-index让层级变成负数 */z-index: -1;/* css3滤镜效果 */filter: blur(2.3px);
}/* 当点击input的时候inpu的兄弟.bj的背景就不透明了显示于页面之上 */input[nameswith]:checked~.bj {opacity: 1;
}
html :
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title手风琴/titlelink relstylesheet href./css/style.css
/headbodydiv classlistulliinput typeradio nameswithdiv classbjdiv/div/div/liliinput typeradio nameswith checkeddiv classbjdiv/div/div/liliinput typeradio nameswithdiv classbjdiv/div/div/liliinput typeradio nameswithdiv classbjdiv/div/div/li/ul/div
/body/html 源码获取 大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取~ 打卡 文章 更新 44 / 100天 精彩推荐更新中 HTML5大作业实战案例《100套》 Java毕设项目精品实战案例《100套》
