css右键再按一次有出现原本右键

2024-08-30

CSS3之重新定义鼠标右键

效果图: html: <div id="rightkey"> <ul> <li><img src="images/xmgl.png" alt="" /><div>项目管理</div></li> <li><img src="images/bbzx.png" alt="" /><div>我的项

今天尝试写了下前端页面,费了不少时间,做出的结果仍然惨不忍睹,感觉很简单的几个页面,在现有框架多个样式混杂下就是感觉很不自在随意,晚上回来又看了些div+css方面的基础知识. 1.CSS的class和id的区别: 在CSS样式中以小写的“点”及“.”来命名如: .css5{属性:属性值;} ,而在html页面里则以class="css5" 来选择调用,命名好的CSS又叫css选择器.如: .css5{属性:属性值;} 选择器在html调用为“<div class="c

css的再深入7（更新中···）

1.transparent 透明的 2.placeholder 提示语写页面搞清结构层次, 保证模块化,让他们之间不能受到影响 (1) 元素性质 (2) 标准流浮动带来的脱离文档流撑不起父级的高度的问题可以采用清除浮动的方式消除影响,absolute和fixed带来的脱离文档流撑不起父级的高度,使用子元素设置高强制撑起父级. 1.css可以继承的属性有哪些? Font 系列 text系列 color line-height 2.border-radius的值的问题四个值的顺序是左上

css的再深入6（更新中···）

background-position 雪碧图我们的html和css中有三个属性可以向服务器发送请求,src href url. overflow (1) 值hidden 超出就隐藏 (2) 值scroll 出现滚动条 visibility:hidden; 可见的 (消失但是占用位置) display:none;消失但不占用位置为什么使用雪碧图? 因为我们使用雪碧图之后,本来需要多次请求的图片,我们一次就请求过来了,然后使用background-position调位置,从而减少了该页面

CSS的再深入2（更新中···）

在上一章中,我们又引出了一个知识点: margin的问题 margin:0 auto:(上下为0,左右自适应)会解决元素的居中问题(auto 自适应)前提是给这个元素设置width 同时,我们又要学习新的知识: CSS的两个性质和一个标准 1.继承性:后代会继承父系的一些属性(font系列.color.text系列.line-height),这种现象叫做继承现象. 2.层叠行 (1)选不中的情况下,走继承性.继承性的权重为0. 如果这个元素有多个父级设置了这样的样式,走就近原则,即哪个父级离它最

css的再深入9（更新中···）

一单位 1.px 就是一个基本的单位像素 2.em 也是一个单位用父级元素的字体大小乘以em前面的数字.如果父级没有就继承上一个父级直到body,如果body没有那就默认是16px. 3.rem 也是一个单位,只跟根节点<html>的字体大小有关,如果没有默认是16px. 4.line-height 行高 line-height:2; 行高值是当前数字2乘以元素字体大小. 二浏览器浏览器和浏览器之间是由差距的,这个差距是由浏览器自身的内核决定的. 每个浏览器都有自己的前缀,主要解决

css的再深入8（更新中···）

1.去滚动条的属性 overflow:hidden; overflow-x:hidden; 水平超出的隐藏. 2.z-index 层次叠加元素重叠谁的值大谁在上面 (1) 父级出现position:relative:时候z-index失效 (2) 层叠元素出现float的时候会失效 (3) 层叠元素也得设置position:absolute/fixed. 3.background-position属性的三种属性值: background-position:100px 300px; backg

CSS的再深入5（更新中···）

页面布局结构层:搭我们的页面框架. 布局层:针对框架内部结构进行排版. 不需要使用浮动解决的问题尽量不用. 使用浮动之后会使该元素脱标,并且该元素的margin. div 盒子模型 : 就是一个容器,可以装任何标签. 盒子实际占用的空间盒子的实际宽高和高度如何理解盒子模型细节性的问题块级元素的宽如果没有设置宽度,就是父级的宽,如果没有设置高度根据内容而定. 结构选择器 (同一父级下子标签同级同标签名时使用,用法标签名:nth-of-type(序号/或者说是第几个) div:nth-o

css的再深入4（更新中···）

两种居中的方式: Margin:0 auto;和text-align:center; Margin的居中是对自身,text-align对元素内部的文本来说. 隐藏的两种方式: visibility:hidden:和display:none; visibility 隐藏了还占用着空间,display隐藏了之后不占用空间了. Position位置只要使用定位,必须要有一个相对的参照物.即relative 具体定位的那个元素需要加position:absolute;绝对的绝对的 :就是具体到某一个

CSS的再深入3（更新中···）

在前面,我们学习了标准文档流,但在实际制作的过程中,用标准文档流书写显然是不现实的,因此,我们来了解几种脱离标准文档流的方法: 1.float 浮动 float:left/right:(左浮/右浮) 效果:元素都加浮动,后面的元素紧跟前面的元素并排排列第一个加了float,脱离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位.而第一个依然存在,所以就会叠加. 行级加float A.只要加了float,这个元素就会脱离标准文档流:行级元素加了float

CSS的再深入（更新中···）

在上一章我们提到了一个新的概念,叫做块级样式,讲到这里就要科普一下: 标签又分为两种: (1)块级标签元素特征:会独占一行,无论内容多少,可以设置宽高··· (2)内敛标签(又叫做行内标签) 元素特征:根据内容的多少占用空间大小,它的上下margin不起作用 (块级:P h1- h6 div ul ol dl li···) (内敛:span img i b a em icon···) 有时,我们会使用块级标签,有时会使用内敛标签,但老是改标签是不是太麻烦了呢?有没有其它的方法呢? 答案是:有

CSS的再一次深入（更新中···）

全面我们学了6个选择器,今天再来学习两个选择器,分别是通配符选择器和并集选择器: 1.通配符选择器: *{ } 表示body里所有的标签都被选中 2.并集选择器: 选中的标签之间用逗号隔开,表示这几个标签都被选中 *选择器有好处也有弊端好处就是省事,弊端,就是因为太省事了,加大了浏览器的负荷. 解决办法按需选择. 再来学习几个列表标签 1.无序列表 ul (1)内部必须有子标签<li></li> (2)ul天生自带内外边距(天生自带内外边距的还有p,hi-h6,ol)

自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]

许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单首先来创建JSP页面 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <head> <title>右键菜单</title> <script src=

喝咖啡写脚本,顺便再加一点点CSS语法糖 2.五分钟学会Less

CoffeeScript + Html5 + Less这个新组合,看上去Less更容易拿下,先尝尝糖吧. Less这么小个东西,竟然要FQ,真是没有天理,简直不可理喻,先不管那么多了,那就看这个吧.http://www.lesscss.net/ 这个Less,比起CSS,就是要更少的代码,更多的动态,更多的重用.提供了变量,继承,运算,函数等,我们就来看看吧. 首先是这玩意最后怎么生成CSS, 两种用法,我们先用一秒钟选择最容易的,就是网站提供的生成CSS功能.学了就可以使用了.然后当然也可以在

【前端优化之拆分CSS】前端三剑客的分分合合

几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试</div> 慢慢的,我们发现这样做的很多弊端,单就样式一块,改一个样式会涉及到多处调整,所以慢慢的dom标签中的css全部去了一个独立的css文件再后来,交互变得异常复杂,onclick也不好使了,所以js也分离开了,经典的html+css+javascript结构分离逐步清晰,三种代码各司其职

jquery右键菜单

点击这里体验效果如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html> <head> <title>jQuery右键菜单,上下文菜单-柯乐义</title> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquer

CSS网页布局全精通

在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则稍后在"技巧延伸"中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕过它的方法.也将分享一个以CSS达成等宽栏位的简单秘密. 要如何以CSS作出两栏版面布局? 答案是有好几种方法,为了带领你起步,同时帮助你了解两种常见方法的差异(浮动与定位),因此先把焦点放在四种不同的

一起学HTML基础-CSS样式表-基本概念、分类、选择器

一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. Style,样式,即目标显示出来的风格样式,作用是美化页面. 二.样式表分类: 内联式样式表.内嵌式样式表.外联式样式表. 1.内联式样式表:直接写在标签内部,使用Style属性设置样式.例如:设置div及span背景颜色及宽和高,会发现span是无法设置宽和高的,因为默认内容有多少就占用多少,无

CSS中id与class命名规则及编码最佳习惯

一.用class_name方式写类名. 以前喜欢用class-name写,不过好像两样也没什么差别.但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度.但是id我会写成驼峰式,理由见下一条. 二.样式都用class而不用id. 有三个理由. 1,id不可以重复,所以用class的话,可以肆无忌惮的用无数次. 2,id的优先级太高,若是写了一个#page_contenta{color:#f60},那你完蛋了,里面要改链接颜色,都必须加上#page_content才

less文件转换为css文件

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 本文主要介绍less文件如何转化为css文件. 1.首先,你要确认你的电脑已经安装了node. 2.然后,进入需要转换的less文件的目标位置. 3.最后,你只需输入以下两条命令: npm install -g less lessc less文件名.less 生成的css文件名.css 此时再看你的文件夹,是不是已经有了对应的css文件了呢~

Html+css 练习写页面发现的错误及解决办法。

最近开始模仿写一些静态页面,今天模仿的是中华咨询网.写了一个简单的js(功能:当鼠标hover一级菜单的时候,设置二级菜单为显示,当鼠标hover二级菜单的选项时候,二级菜单不收回.当鼠标移出菜单一级或者二级,二级菜单都收回)刚做完演示是正正确的,又继续写一一部分CSS,再回去试这个函数的时候发现不能用了.对于新手的我来说很是困惑,命名上边的东西都没动啊,咋就不好使了呢?代码如下后来我鼠标慢慢移动,发现有的地方可以hover到,经过调试找到原因是被下边的搜索框盒子挡住了,我就把搜索框盒子样式加