CSS 下拉菜单、提示工具、图片廊、计数器

一、CSS 下拉菜单:

CSS下拉菜单用于创建一个鼠标移动上去后显示下拉菜单的效果。示例:

可以使用任何的HTML元素来打开下拉菜单。使用容器元素(如

)来创建下来菜单的内容,并放在任何想放的位置上。使用
元素来包裹这些元素,并使用CSS来设置下拉内容的样式。.dropdowm类使用position:relative,将设置下拉菜单的内容放置在下拉按钮右下角位置;.dropdowm-content类中是实际的下拉菜单,默认是隐藏的,在鼠标移动到指定元素后会显示。

二、CSS 提示工具:

提示工具(tooltip)在鼠标移动到指定元素后触发。示例:

鼠标移动到这

  提示文本

HTML使用容器类元素(如

)添加“tooltip”类,在鼠标移动到
上时显示提示信息。提示文本放在内联元素上(如)并使用class = “tooltiptext”。CSS tooltip类使用position:relative,提示文本需要设置定位值position:absolute。tooltiptext类用于实际的提示文本。默认是隐藏的,在鼠标移动到元素显示。border-radius属性用于为提示框添加圆角。hover选择器用于在鼠标移动到指定元素
上时显示的提示。

定位提示工具:

添加箭头:

淡入效果:可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果。示例:

三、CSS图片廊:

CSS创建图片廊示例:

  

    

      图片文本描述

    

    

这里添加图片文本描述

  

  

    

      图片文本描述

    

    

这里添加图片文本描述

  

  

    

      图片文本描述

    

    

这里添加图片文本描述

  

  

    

      图片文本描述

    

    

这里添加图片文本描述

  

四、CSS 图像透明/不透明:

CSS Opacity属性是W3C的CSS3建议的一部分。创建一个透明的图像:

img

{

opacity:0.4; filter:alpha(opacity=40);

 }

五、CSS 图像拼合技术:

图像拼合就是单个图像的集合。示例:



使用图像拼合创建一个导航列表:

六、CSS 媒体类型:

媒体类型允许指定文件如何在不同的媒体上呈现。@media规则允许在相同样式表为不同媒体设置不同的样式。示例:

唐诗三百首!!!

媒体类型:

CSS 下拉菜单、提示工具、图片廊、计数器_第1张图片

七、CSS 属性选择器:

具有特定属性的HTML元素样式不仅仅是class和id,比如:

八、CSS 表单:

使用CSS来渲染HTML的表单元素:

使用 CSS 来渲染 HTML 的表单元素

  

    

    

    

    

    

    

  

    

  

九、CSS计数器:

CSS计数器通过一个变量来设置,根据规则递增变量。CSS计数器使用到的属性:counter-reset - 创建或者重置计数器;counter-increment - 递增变量;content - 插入生成的内容;counter() 或 counters() 函数 - 将计数器的值添加到元素。要使用CSS计数器,得先使用counter-reset创建。示例:

嵌套计数器:

CSS计数器属性:

CSS 下拉菜单、提示工具、图片廊、计数器_第2张图片

你可能感兴趣的:(CSS,css,前端)