位置:首页 > 软件操作教程 > 编程开发 > HTML > 问题详情

常用HTML代码解释10

提问人:刘团圆发布时间:2020-10-10

47、禁止鼠标右键,把Demo的图片全都设为表格的背景,表格的大小与图片的大小一样。这样做看起来是一样的,主要是防止鼠标经过图片时会出现另存的按钮。禁止鼠标右键的代码很简单:<script. LANGUAGE="JavaScript"> function click() { if (event.button==2) {alert('呵呵,不好意思,你甭想使用右键下载图片:)'); } } document.onmousedown=click</script>

 

 

 

CSS网页布局入门教程13:下拉及多级弹出式菜单

  下拉及弹出式菜单是网站设计中常用导航形式,这种菜单形式能够充分利用页面现在空间隐藏与显示更多内容,并能对内容进行合理的分类显示,是一种非常优秀的导航形式。
  早期的下拉或弹出式菜单通过隐藏的layerdiv来实现内容的隐藏,通过JavaScript脚本来响应用户的操作,目前也采用JavaScript+div或其它元素的形式来制作此类导航,不同的是整个导航都将使用符合标准的css布局来打造,不再使用表格来制作菜单,下拉式菜单是上面提到的横向导航与纵向导航的结合,而且通过css对于属性的众多支持,同一个菜单不再需要多个div相互配合完成,使用css布局来制作下拉菜单,甚至可以直接控制ulli元素,现在来尝试一个最简单的下拉菜单的制作,需要补充的是,下拉式菜单的实现利用了很多JavaScript技术,在这里对JavaScript技术不作过多的语法上的综合了解,只想通过现有的实例来告诉大家由于css元素属性的灵活性,而使用制作网页上的元素更加简单方便。先看一下目前所设计的导航的XHTML部分代码:

<ul id="nav">
    <li><a href="">文章</a>
        <ul>
            <li><a href="">CSS教程</a></li>
            <li><a href="">DOM教程</a></li>
            <li><a href="">XML教程</a></li>
            <li><a href="">FLASH教程</a></li>
        </ul>
    </li>
    <li><a href="">参考</a>
        <ul>
            <li><a href="">XHTML</a></li>
            <li><a href="">XML</a></li>
            <li><a href="">CSS</a></li>
        </ul>
    </li>
    <li><a href="">BLOG</a>
        <ul>
            <li><a href="">全部</a></li>
            <li><a href="">网页技术</a></li>
            <li><a href="">UI技术</a></li>
            <li><a href="">FLASH技术</a></li>
        </ul>
    </li>
</ul>
<ul>
    <li><a href="">摇滚</a></li>
    <li><a href="">纯音乐</a></li>
    <li><a href="">古典金曲</a></li>
    <li><a href="">电影原声</a></li>
</ul>

  一个标准的采用ul结构的菜单构成,但与前面所不同的是,这里的代码结构涉及嵌套,在第一层的li之间插入了另一个ul的结构,这就是多级菜单的一个代码构成模式,XHTML代码允许通过嵌套元素来实现想要的效果或者结构。下一步,我们尝试编写一些简单的css样式让菜单变成所希望的横向式:

ul { padding:0; margin:0; list-style:none;}
li { float:left; width:100px;}

  第一步,对导航系统所有ul元素进行基本设置,list-style:none属性能够帮助我们去掉ul中的所有圆点标识。list-style属性拥有其它更丰富的使用方法,将在后面的列表元素中重点了解。
  我们希望导航是横向的通过对li设置float:left属性,将所有的li向左浮动,形成了横向的布局,并尝试使用每个li的宽度为100px,继续编写代码:

li ul { display:none;}

  li ul的定义在这里所指的是所有li下面的ul元素,除了顶级的ul元素外,所有li下面定义的ul元素都将受到这部分样式的定义。使用display:none让这部分被隐藏起来。css中的的有元素基本上都可以使用display属性来控制显示还是隐藏。

li:hover ul,.over ul { display:block;}

  li:hover ul定义了li元素下的ul元素。通过逗号分隔,让这两种情况下都能使用display:block属性,display:block属性和display:none属性刚好相反,一个是隐藏,一个是显示,当设置为display:block时,不仅其指派的元素将显示,而且还显示成一个块状,如果不进行display:block时,元素只会按自己的内容在屏幕上占有的区域进行显示,而使用display:block时,元素将自己形成一个广块作为自己的点位符,这种设置对于做大按钮来说是非常方便的。

  在最下边的预览内代码你可以看到,里边加上了一段js代码,它是用来控制在IE浏览器下显示下拉菜单的,本来li:hover ul这句是可以的,但IEcss的支持还还完善,所以需要借助JS来控制。
  下面我们尝试给下拉菜单增加一些样式:

ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decoration:none; color:#777;}

ul li a:hover { background-color:#ddd;}


继续查找其他问题的答案?

发表评论(共0条评论)
请自觉遵守互联网相关政策法规,评论内容只代表网友观点,发表审核后显示!

2021年国家电网校园招聘考试直播课程通关班

  • 讲师:刘萍萍 / 谢楠
  • 课时:160h
  • 价格 4580

特色双名师解密新课程高频考点,送国家电网教材讲义,助力一次通关

配套通关班送国网在线题库一套

课程专业名称
讲师
课时
查看课程

2020年解放军文职招聘考试全程直播课

杜老师139课时试听目录

2021级国家电网招聘考试管理专业知识精讲班直播课

黎老师160小时试听目录

2021级国家电网招聘考试其它工学类专业题海练习班直播课

贺老师160小时试听目录

2021级国家电网招聘考试金融专业知识精讲班直播课

钟老师140小时试听目录

2021级国家电网招聘考试计算机专业知识精讲班直播课

杜老师160小时试听目录

2021级国家电网招聘考试通信专业知识精讲班直播课

李老师350小时试听目录

2021级国家电网招聘考试财会专业知识精讲班直播课

王老师120小时试听目录

2021级国家电网招聘考试研究生题海班直播课程

严老师180小时试听目录

2021级国家电网招聘考试研究生电气专业知识精讲班直播课

彭老师160小时试听目录

2021级国家电网招聘考试本科电气专业考前押题班录播课

蒋老师168h试听目录

2021级国家电网招聘考试本科电气专业题海训练班直播课

谷老师165小时试听目录

2021级国家电网招聘考试本科电气专业知识精讲班直播课

严老师160小时试听目录

2021级国家电网招聘考试专科电气专业考前押题班直播课

王老师150小时试听目录

2021级国家电网招聘考试专科电气专业知识题海训练直播课

杨老师146小时试听目录

2021级国家电网招聘考试专科电气专业知识精讲班直播课

崔老师180小时试听目录

2020年湖南中烟公司招聘考试技术工人二岗直播课

刘老师140小时试听目录

2020年湖南中烟公司招聘考试生成车间工人考试直播课

王老师125小时试听目录

2020年湖南中烟公司招聘考试技术工人一岗直播课

李老师140小时试听目录

2020年湖南中烟公司招聘直播课程(协议班)

崔莹莹168h试听目录

2020湖南农村信用社招聘笔试培训(协议保过班)

谢楠200h试听目录

2020军队文职招聘考试面试培训(协议保过班)

刘萍萍124h试听目录

2021国家电网招聘考试录播视频课程

  • 讲师:崔莹莹 / 刘萍萍
  • 课时:180h
  • 价格 3580

特色解密新课程高频考点,免费学习,助力一次通关

配套全套国网视频课程免费学习

课程专业名称
讲师
课时
查看课程

2021级国家电网招聘考试管理类专业知识精讲班录播课

王老师150小时试听目录

2021级国家电网招聘考试其它工学类专业题海练习班录播课

谷老师148小时试听目录

2021级国家电网招聘考试其它工学类专业知识精讲班录播课

夏老师150小时试听目录

2021级国家电网招聘考试其它专业题海练习班录播课

刘老师125小时试听目录

2021级国家招聘考试其它专业题海练习班录播课

李老师140小时试听目录

2021级国家电网招聘考试其它专业知识精讲班录播课

贾老师120小时试听目录

2021级国家电网招聘考试金融专业知识精讲班录播课

王老师140小时试听目录

2021级国家电网招聘考试通信专业知识精讲班录播课

黄老师188小时试听目录

2021级国家电网招聘考试计算机专业知识精讲班录播课

谷老师120小时试听目录

2021级国家电网招聘考试财会专业考前押题班录播课

夏老师15小时试听目录

2021级国家电网招聘考试财会专业题海练习班录播课

杨老师180小时试听目录

2021级国家电网招聘考试财会专业知识精讲班录播课

蒋老师156小时试听目录

2021级国家电网招聘考试研究生电气考前押题班录播课

谷老师12小时试听目录

2021级国家电网招聘考试研究生电气专业题海练习班录播课

李老师170小时试听目录

2021级国家电网招聘考试研究生电气专业知识精讲班录播课

崔老师150试听目录

2021级国家电网招聘考试本科电气专业考前押题班录播课

王老师120小时试听目录

2021级国家电网招聘考试本科电气题海练习班录播课

王老师158小时试听目录

2021级国家电网招聘考试本科电气专业知识精讲班录播课

谷老师170小时试听目录

2021级国家电网招聘考试专科电气专业考前押题班录播课

蒋老师12小时试听目录

2021级国家电网招聘考试专科电气专业题海练习班录播课

崔老师150小时试听目录

2021级国家电网招聘考试专科电气专业知识精讲班录播课

王老师180小时试听目录

在线题库
在线报名
  • 报考专业:
    *(必填)
  • 姓名:
    *(必填)
  • 手机号码:
    *(必填)
返回顶部