HTML+CSS技术实现网页滑动门效果
一、什么是滑动门
大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门。
小米官网,网页滑动门效果
二、实现滑动门所需技术
- 简单HTML基础知识
- 简单的CSS基础样式
- CSS定位
三、如何实现滑动门
1.准备好一段HTML代码
<div class="bg">
<ul>
<li>
<a href="#">手机 电话卡</a>
<div class="div1">
<p>这是我的第一个滑动门</p>
<img src="img/海贼.jpg" alt="" width="100%" height="100%">
</div>
</li>
<li>
<a href="#">手机 电话卡</a>
<div class="div2"></div>
</li>
<li>
<a href="#">手机 电话卡</a>
<div class="div3"></div>
</li>
<li>
<a href="#">手机 电话卡</a>
<div class="div3"></div>
</li>
</ul>
</div>
2.给当前HTML结构添加一些样式
<style>
body,ul,li,div{
margin:0;
padding:0;
}
ul{
list-style: none;
padding:20px 0px;
width: 234px;
background: rgba(0,0,0,.6);
/*定位 作为父级使用*/
position: relative;
}
ul li{
height: 42px;
line-height: 42px;
padding-left: 20px; }
ul li:hover{
background: #ff6700;
}
ul li a{
color: #fff;
text-decoration: none;
font-size: 14px;
}
</style>
3.使用定位实现滑动门效果
/*滑动门*/
ul .div1,.div2,.div3{
width: 800px;
height: 460px;
background: skyblue; /*使用定位实现滑动门-------重要步骤*/ /*上海尚学堂java
加薇心 java8733 了解更多获取资料
*/
position: absolute;
top:0;
left:234px;
display: none;
}
/*当鼠标悬停在内容上是显示对应的代码块*/
ul li:hover .div1{
display: block;
width:800px;
opacity: 1;
}
ul li:hover .div2{
display: block;
background: pink;
width:600px;
height: 460px;
}
根据上面步骤,就可以实现简单的滑动门效果,快去试试吧。
四、滑动门实例
下面这个实例作为课下作业,详情请参考上海尚学堂官网http://www.shsxt.com/
HTML+CSS技术实现网页滑动门效果的更多相关文章
- JS切割图片-滑动门效果
转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- CSS 小结笔记之滑动门技术
所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...
- html+css第八篇滑动门和可爱的css精灵
滑动门: 滑动门并不是一项全新的技术,它是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果. CSS精灵 CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处 ...
- asp.net实现数据库版动态网页滑动门
前端: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="滑动门.aspx.c ...
- DIV+CSS滑动门效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS实现滑动门效果
html部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin ...
- [Js]滑动门效果
描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未 ...
- [Jquery]滑动门效果
$(function(){ var $box=$("#box"); var $img=$box.find("img"); var imgWid ...
- 【原生JS】滑动门效果
效果图: 思路:通过每次鼠标移动至目标上使所有图片重置为初始样式再向左移动目标及其左侧每个图片隐藏部分距离即实现. HTML: <!DOCTYPE html> <html> & ...
随机推荐
- Oracle 存储过程笔记.
业务说明: 主要用于计算采购加权平均价.入参为年份和月份,首先判断输入的年月是否已经结账,如果已经结账就将所有物料和供应商的采购加权平均价返回. 要点说明: 1.如何在存储过程中定义临时表 答:ora ...
- server 打开失败
server:An unexpected exception was thrown. 当server服务器遇到这样遇到不能料想的错误导致打开失败的情况下,我们可以找到一个com.genuitec.ec ...
- Linux驱动之内核自带的S3C2440的LCD驱动分析
先来看一下应用程序是怎么操作屏幕的:Linux是工作在保护模式下,所以用户态进程是无法象DOS那样使用显卡BIOS里提供的中断调用来实现直接写屏,Linux抽象出FrameBuffer这个设备来供用户 ...
- hdu3307 欧拉函数
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3307 Description has only two Sentences Time Limit: 3 ...
- CSL的字符串
链接:https://ac.nowcoder.com/acm/contest/551/D 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 524288K,其他语言1048 ...
- p2p技术之n2n源码核心简单分析一
首先在开篇之前介绍下内网打洞原理 场景:一个服务器S1在公网上有一个IP,两个私网机器C1,C2 C1,C2分别由NAT1和NAT2连接到公网,我们需要借助S1将C1,C2建立直接的TCP连接,即由C ...
- appium sendkeys 输入数字丢失问题
参考:https://blog.csdn.net/rainshine1190/article/details/82814503
- 上传本地文件到github
第一步:创建新的仓库 勾选Initialize this repository with a README选项,自动创建REAMDE.md文件. 第二步: $ git config --global ...
- Beta冲刺吐槽&&获小黄衫心得
引 个人感觉本次Beta冲刺最大的槽点还是--反向延长 "冲刺周期" 做的不一样很容易,做的更好才是非常困难的 遗留的问题 经历了Alpha冲刺,组内大多数同学也大都对实践感到些许 ...
- mysql 慢日志分析
mysql 调优首先需要找到那些有问题的SQL语句. 怎么找到这些语句呢? mysql 提供了很方便的功能. 1.慢日志 在my.cnf 文件中,增加如下配置 log-error ...