• 当前标签:CSS

纯css制作导航下划线

不可思议的纯CSS导航栏下划线跟随效果 先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢? <ul>   <li>不可思议的CSS</li>   <li>导航栏</li>   <li>光标下划线跟随</li>   <li>PURE CSS</li>   <li>Coco</li> </ul> CSS ul {     display: flex;     position: absolute;     width: 800px;     top: 50%;     left: 50%;     transform: translate(-50%, -50%); } li {     position: relative;     padding: 20px;     font-size: 24px;     color: #000;     line-height: 1;     transition: 0.2s all linear;     cursor: pointer; } li::before {     content: "";     position: absolute;     top: 0;     left: 100%;     width: 0;     height: 100%;     border-bottom: 2px solid #000;     transition: 0.2s all linear; } li:hover::before {     width: 100%;     top: 0;     left: 0;     transition-delay: 0.1s;     border-bottom-color: #000; } li:hover ~ li::before {     left: 0; } li:active {     background: #000;     color: #fff; }

2018-03-27 22:55:29 15 2 0
阅读详情

CSS 的优先级机制

样式的优先级 多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。 一般情况下,优先级如下: 外部样式 <内部样式 <内联样式 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。 示例如下: <head>     <style type="text/css">       /* 内部样式 */       h3{color:green;}     </style>     <!-- 外部样式 style.css -->     <link rel="stylesheet" type="text/css" href="style.css"/>     <!-- 设置:h3{color:blue;} --> </head> <body>     <h3>测试!</h3> </body> 选择器的优先权 解释: 1.  内联样式表的权值最高 1000; 2.  ID 选择器的权值为 100 3.  Class 类选择器的权值为 10 4.  HTML 标签选择器的权值为 1   利用选择器的权值进行计算比较,示例如下: <html>   <head>     <style type="text/css">         #redP p {              /* 权值 = 100+1=101 */              color:#F00;  /* 红色 */         }         #redP .red em {              /* 权值 = 100+10+1=111 */              color:#00F; /* 蓝色 */         }         #redP p span em {              /* 权值 = 100+1+1+1=103 */              color:#FF0;/*黄色*/         }     </style>   </head>   <body>      <div id="redP">         <p class="red">red            <span><em>em red</em></span>         </p>         <p>red</p>      </div>   </body> </html> 结果:<em> 标签内的数据显示为蓝色 CSS 优先级法则 A  选择器都有一个权值,权值越大越优先; B  当权值相等时,后出现的样式表设置要优于先出现的样式表设置; C  创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式; D  继承的CSS 样式不如后来指定的CSS 样式; E  在同一组属性设置中标有“!important”规则的优先级最大。   IE浏览器是个特殊的家伙,不过现在用的人不多了吧!

2017-07-05 23:33:34 10 0 0
阅读详情

Flex 布局教程

下面分享来自 阮一峰的网络日志 的一片很好的教程文章: 网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的Flex写法。 以下内容主要参考了下面两篇文章:A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。 一、Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } Webkit内核的浏览器,必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 二、基本概念 采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。 三、容器的属性 以下6个属性设置在容器上。 flex-direction flex-wrap flex-flow justify-content align-items align-content 3.1 flex-direction属性 flex-direction属性决定主轴的方向(即项目的排列方向)。 .box { flex-direction: row | row-reverse | column | column-reverse; } 它可能有4个值。 row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。 3.2 flex-wrap属性 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。 .box{ flex-wrap: nowrap | wrap | wrap-reverse; } 它可能取三个值。 (1)nowrap(默认):不换行。 (2)wrap:换行,第一行在上方。 (3)wrap-reverse:换行,第一行在下方。 3.3 flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 .box { flex-flow: <flex-direction> || <flex-wrap>; } 3.4 justify-content属性 justify-content属性定义了项目在主轴上的对齐方式。 .box { justify-content: flex-start | flex-end | center | space-between | space-around; } 它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。 flex-start(默认值):左对齐 flex-end:右对齐 center: 居中 space-between:两端对齐,项目之间的间隔都相等。 space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 3.5 align-items属性 align-items属性定义项目在交叉轴上如何对齐。 .box { align-items: flex-start | flex-end | center | baseline | stretch; } 它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。 flex-start:交叉轴的起点对齐。 flex-end:交叉轴的终点对齐。 center:交叉轴的中点对齐。 baseline:

2017-03-10 22:18:24 9 0 0
阅读详情
  • 1
前往