水平&垂直对齐

元素居中对齐

.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. VMware导入ova报错

    报错如下: 此主机支持Intel VT-x,但Intel VT-x处于禁用状态.   解决方案如下: 联想E75主机,重启按F1进入BIOS Advanced—>CPU setup—>In ...

  2. javascript的垃圾回收机制和内存管理

    垃圾回收 javascript不同于c.c++的一个特点是:具有自动的垃圾回收机制,这就意味着,开发人员可以专注于业务,而不必把过多精力放在内存的管理上,提高开发效率. 所谓的垃圾回收就是找出那些不再 ...

  3. sevlet

    https://blog.csdn.net/Mithrandir_One/article/details/52900425 大家现在做的比较多的基本上就是 web 应用.所以一定要把 sevlet 及 ...

  4. ZROI 19.08.01 生成函数方法

    写在前面:由于我数学基础不好,加上缺乏生成函数知识,所以这一下午我都处在掉线和非掉线的叠加态.而且我写\(\LaTeX\)很慢,所以笔记相当混乱而且不全面.说白了就是我太菜了听不懂. 1.一般生成函数 ...

  5. 《Head First 软件开发》阅读二

    项目计划:为成功而筹划 每段伟大的代码始于伟大的计划. 客户现在就要他们的软件,可是开发需要的时间远远超过客户要求时间.我们需要实际解决方法:由客户确定优先级,与客户一起确定优先级顺序,开发出Mile ...

  6. 第二章Python入门

    第二章 Python入门 2.1.简介 Python是著名的"龟叔"(Guido van Rossum)在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言 Pytho ...

  7. scrapy五大核心组件和中间件以及UA池和代理池

    五大核心组件的工作流程 引擎(Scrapy) 用来处理整个系统的数据流处理, 触发事务(框架核心) 调度器(Scheduler) 用来接受引擎发过来的请求, 压入队列中, 并在引擎再次请求的时候返回. ...

  8. Python使用XML操作mapnik,实现复杂标注（Multi line text symbolizer）

    test.py import mapnik stylesheet = 'world_style.xml' image = 'world_style.png' m = mapnik.Map(1200, ...

  9. Leaflet使用vector tiles样式设置

    //point style var myIcon = L.icon({ iconUrl: 'css/images/dian.svg', // shadowUrl: 'css/images/leaf-s ...

  10. TeamViewer的替代品：realVNC

    TeamViewer的替代品:realVNC official web: realvnc: https://www.realvnc.com/ steps: 在需要被控制的PC上装上realVNC的服务 ...