CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单

水平&垂直对齐

元素居中对齐

.center {margin: auto;width: 50%;border: 3px solid green;padding: 10px;
}

文本居中对齐

.center {text-align: center;border: 3px solid green;
}

图片居中对齐

左右对齐——position定位

左右对齐——float

垂直居中对齐

组合选择符

　　　　后代选择器(以空格分隔)

div p
{background-color:yellow;
}

子元素选择器(以大于号分隔）

```
div>p
{background-color:yellow;
}
```

相邻兄弟选择器（以加号分隔）houxu

```
div+p
{background-color:yellow;
}
```

后续兄弟选择器（以破折号分隔）

```
div~p
{background-color:yellow;
}
```

伪类

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

可以和css类配合使用

:first-child伪类【选择父元素的第一个子元素】

所有<p>元素中的第一个<i>元素

所有作为第一个子元素的<p>中的所有<i>元素

:lang 伪类【为不同的语言定义特殊的规则】

<style>
q:lang(no)
{quotes: "++++" "++++";
}
</style>
</head><body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p>

所有CSS伪类/元素

伪元素

添加一些选择器的特殊效果

文本的首行设置特殊样式

文本的首字母设置特殊样式

多个伪元素

:before 在元素的内容前面插入新内容

:after 在元素之后插入新的内容

所有CSS伪类/元素

导航栏

触发激活导航栏

给导航栏添加边框

全屏导航栏

链接右对齐+添加分割线

固定导航条

响应式导航栏

下拉菜单

完整实例

转载于:https://www.cnblogs.com/expedition/p/10925098.html

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单相关推荐

下拉默认选择_在Excel中制作二级联动下拉菜单，太有用了
对于一级下拉菜单的设置,相信经常使用Excel的用户都不陌生,那么,二级联动下拉菜单又是什么呢?与一级下拉菜单有什么关系呢? 二级联动下拉菜单是根据一级下拉菜单内容的变化而变化的.大家都知道,不同的部 ...
android制作下拉选择_Excel制作一、二、三级下拉菜单技巧，你一定不能错过
下拉菜单不知道大家熟不熟悉,当我们录入相关信息的时候,可以使用下拉菜单,确保我们录入的内容格式一致的,比如像这样的,我们录入部门时,可以通过下拉菜单确保录入内容无误. 那下拉菜单如何做呢?上面演示的仅 ...
史上接近最完整的选择屏幕开发知识（针对初学者)(还有下拉菜单的实现）
选择屏幕的开发知识无非就是围绕这3个点:PARAMETERS SELECT-OPTIONS SELECTION-SCREEN (一)PARAMETERS:为变 ...
动态导航多级下拉菜单 html,css3实现的多级渐变下拉菜单导航效果代码
本文实例讲述了css3实现的多级渐变下拉菜单导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于css3实现的下拉菜单导航,是非常漂亮的动画菜单,而且是多级菜单的形式,测试时发现可支持5级,估 ...
Bootstrap使用 .dropdown-menu 类创建下拉菜单
下拉菜单下拉菜单是一种非常常见的效果,用于展示可切换.有关联的一组链接,它可以节省网页排版空间,使网页布局简洁有序. Bootstrap内置了一套完整的下拉菜单组件,可用于不同的元素,如导航.按钮等 ...
10个优秀的 HTML5 CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
before伪类的超有用应用技巧——水平菜单竖线分隔符
方法一.li前面加before伪类 <!doctype html> <html dir="ltr" lang="zh-CN"><h ...
教你玩转CSS 组合选择符
目录后代选择器子元素选择器相邻兄弟选择器后续兄弟选择器 CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分 ...
学习笔记（10）伪类伪元素
目录 1,伪类 2,伪元素 3,伪类伪元素的区别 3.1,相同点 3.2,不同点 1,伪类 w3c的定义:CSS伪类是用来添加一些选择器的特殊效果. 伪类是指原本存在的标签,在满足某些条件的情况下,就 ...

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单相关推荐

最新文章

热门文章

CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单相关推荐

最新文章

热门文章

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单相关推荐