微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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伪类/元素

 

 

导航栏

分享图片

 

 触发激活导航栏

分享图片

给导航栏添加边框

全屏导航栏

链接右对齐+添加分割线

分享图片

固定导航条

响应式导航栏

 

 

下拉菜单

完整实例

分享图片

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。