水平&垂直对齐

元素居中对齐

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

导航栏

触发激活导航栏

给导航栏添加边框

全屏导航栏

链接右对齐+添加分割线

固定导航条

响应式导航栏

下拉菜单

完整实例

CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单的更多相关文章

  1. 3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素

    CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影 ...

  2. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  3. 11个优秀的HTML5 & CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

  4. 10个优秀的 HTML5 &amp; CSS3 下拉菜单制作教程

    下拉菜单是一个非经常见的效果.在站点设计中被广泛使用.通过使用下拉菜单.设计者不仅能够在站点设计中营造出色的视觉吸引力,但也能够为站点提供了一个有效的导航方案.使用 HTML5 和 CSS3 能够更e ...

  5. 用bootstrap和css3制作按钮式下拉菜单

    利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...

  6. 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  7. 巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）

    原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...

  8. css伪类伪元素

    在CSS中,模式(pattern)匹配规则决定哪种样式规则应用于文档树(document tree)的哪个元素.这些模式叫着选择符(selector). 一条CSS规则(rule)是选择符{属性:值; ...

  9. before伪类的超有用应用技巧——水平菜单竖线分隔符

    方法一.li前面加before伪类 <!doctype html> <html dir="ltr" lang="zh-CN"> < ...

随机推荐

  1. Qualcomm_Mobile_OpenCL.pdf 翻译-2

    2  Opencl的简介 这一章主要讨论Opencl标准中的关键概念和在手机平台上开发Opencl程序的基础知识.如果想知道关于Opencl更详细的知识,请查阅参考文献中的<The OpenCL ...

  2. fdisk磁盘挂载

    1.查看磁盘信息 fdisk –l 2.分区 fdisk /dev/vdb :h 帮助命令 :p 查看 :n 进行分区 e  extended  逻辑分区 p  primary partition ( ...

  3. 牛客假日团队赛5 K 金币馅饼 （DP 基础题）

    链接:https://ac.nowcoder.com/acm/contest/984/K 来源:牛客网 金币馅饼 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言 ...

  4. python核心编程正则表达式练习题1-2匹配由单个空格分隔的任意单词对，也就是性和名

    # 匹配由单个空格分隔的任意单词对,也就是姓和名 import re patt = '[A-Za-z]+ [A-Za-z]+' # 方法一 +加号操作符匹配它左边的正则表达式至少出现一次的情况 # p ...

  5. __name__='main' 这句代码是什么意思？《读书笔记》

    当我们阅读 别人的python代码都会有 if name == "main"这么一行语句,但却不知道为什么要写这个?有什么用 想知道这段代码什么意思让我们来根据例子来测试一下 我们 ...

  6. c++ primer 5th（中文版）勘误

    \(P_{158}\) "末位大于 3" 改为 "末位大于等于 3" \(P_{302}\) \(P_{319}\) // 添加元素用光多余容量 while ( ...

  7. Lengauer-Tarjan算法的相关证明

    Lengauer-Tarjan算法的相关证明 0. 约定 为简单起见,下文中的路径均指简单路径(事实上非简单路径不会对结论造成影响). \(V\)代表图的点集,\(E\)代表图的边集,\(T\)代表图 ...

  8. 一个web应用的诞生(4)

    上一章实现了登录的部分功能,之所以说是部分功能,是因为用户名和密码写成固定值肯定是不可以的,一个整体的功能,至少需要注册,登录,密码修改等,这就需要提供一个把这些值存储到数据库的能力. 当前的主流数据 ...

  9. CentOS升级乱七八糟问题解决

    ----------------------------------------------------------------- Error: Package: libgpod--.el7.x86_ ...

  10. 初识Python，利用turtle画图

    目录 我的第三篇博客 一.初识Python 1.变量 2.注释 3.turtle库 我的第三篇博客 一.初识Python 1.变量 变量就是可变的的量,用来描述某个事物的属性.本质作用就是描述和接收变 ...