廊坊网络公司网站,php 开发手机网站,广告营销平台,江门网站开发多少钱首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下: !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle*{mar… 首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下: !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle*{margin: 0;}.title{background-color: #2b99ff;height: 50px;line-height: 50px;text-align: center;color: #3d2fa2;}.user{width: 180px;height: 50px;margin-left: 20px;background-color: #7a7b50;cursor: auto;}.user .msg{display: none;width: 200px;height: 40px;float: left;border: 1px solid red ;background-color: #787b53;z-index: 2;position: relative;}.user .msg a:hover{cursor: pointer;}.clearfix:after{content:0;display: block;clear: both;visibility: hidden;height: 0;}.user:hover .msg{display: block;}.text{font-size: 30px;color: black;background-color: #99aecb;height: 800px;position: absolute;width: 1500px;z-index: 1;}/style
/head
bodydiv classtitlediv classuser clearfix用户div classmsga博客/a/divdiv classmsga闪存/a/divdiv classmsga积分/a/divdiv classmsga评论/a/divdiv classmsga关注/a/div/divdiv classtext文档内容/div/div
/body
/html 实现的方法: 首先先做一个html的标签,做个基本的样式出来,我们想把用户这个框鼠标触摸后有下拉菜单 做好后的效果: 要实现这个功能是要注意几个细节的 不然会做的四不像. 1,代码实现首先需要注意清除float的浮动.这样才能让下拉框的背景饱满 撑起来 这时候要看CSS中的 .clearfix:afttr 的方法 这个是固定内容 ,用来清除float. 2 , .user .msg 的display: none 这是首先用来隐藏下拉的几个标签 随后hover的时候 display会重新覆盖block;使其出现 3 这里注意,下拉菜单完成后 继续写后面的text菜单时弹出的画面其实是会被下方的text 标签覆盖的..这时候要注意text会覆盖弹出画面 显示不出来,因为他们是兄弟标签,所以我们可以给他们加上z-index的属性来改变层级,让前面的覆盖后面,(z-index必须要和position配合) 4 text这里加上了个positionabsolute,如果不加 弹出菜单会影响文档流,让文档内容改变位置. 转载于:https://www.cnblogs.com/laoguiaabb/p/8066234.html
