HTML+CSS技术实现网页推拉门效果

时间：2023-04-03 01:16:44 HTML

1、什么是推拉门？你经常在网页中看到这样的导航效果。因为它的使用频率很广，所以广大程序员给它取了个名字叫滑动。门。在了解推拉门之前，您首先需要了解什么是推拉门。小米官网，网页滑门效果二、实现滑门需要的技术简单的HTML基础知识简单的CSS基本样式CSS定位三、如何实现滑门1、准备一段HTML代码

移动卡
这是我的第一扇推拉门

手机卡

手机名片

2.在当前HTML结构中添加一些样式<样式>正文,ul,li,div{边距:0;填充：0；}ul{列表样式：无；填充：20像素0像素；宽度：234px；背景：rgba(0,0,0,.6)；/*作为父母的位置*/position:relative;}ulli{高度：42px；行高：42px；padding-left:20px;}ulli:hover{背景：#ff6700;}ullia{颜色：#fff;文字修饰：无；字体大小：14px；}3.利用定位实现推拉门效果/*Slidingdoor*/ul.div1,.div2,.div3{width:800px;高度：460px；背景：天蓝色；学javaJiaweiX了解更多java8733*/position:absolute;顶部：0；左：234px；显示：无；}/*当鼠标悬停在内容上时，显示相应的代码块*/ulli:hover.div1{显示：块；宽度：800px；不透明度：1；}ulli:hover.div2{显示：块；背景：粉色；宽度：600px；高度：460px；}按照上面的步骤，一个简单的推拉门就可以实现效果了，快去试试吧4.推拉门的例子以下例子作为课后作业。详情请参考上海尚学堂官网http://www.shsxt.com/

上一篇：问我Chrome浏览器的渲染原理（6000字长文）

下一篇：js轮询和踩过的坑

HTML+CSS技术实现网页推拉门效果相关文章