收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

css3 伪类选择器 before和after。实现简单的标题。清楚浮动。红黄蓝效果。实现下方横线((下划线 ，下横线))，Tab菜单效果

3825人阅读 2015/12/9 11:12 总访问：5182858 评论：0 收藏：0 手机
分类: 前端

伪类选择器before和after，实现一个简单的标题效果

代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9. </head>
  11. <body>
  12.   <div class="quote">
  13.     <span>亲爱的</span>
  14.   </div>
  15.   <style>
  16.     .quote:before,
  17.     .quote:after {
  18.       content: "";
  19.       display: inline-block;
  20.       width: 50px;
  21.       margin: 5px 1%;
  22.       border-bottom: 1px solid blue;
  23.     }
  24.   </style>
  25. </body>
  27. </html>

伪类选择器 实现Tab菜单下横线的选中效果

设计图如下：其实就是实现下面那个横杠的选中效果:

html结构如下
是在vue里边写的

  1. <div class="tabmenu">
  2.     <span class="item cur" @click="switchData($event, 'cur', true, false)">项目数据</span>
  3.     <span class="item " @click="switchData($event, 'cur', false, true)">班级数据</span>
  4. </div>

样式如下，这里还用了相对定位和绝对定位的，要出现在下方

  1. .tabmenu {
  2.     .item {
  3.         display: inline-block;
  4.         margin-right: 20px;
  5.         font-size: 17px;
  6.         font-family: Microsoft YaHei;
  7.         cursor: pointer;
  8.     }
  10.     .cur {
  11.         font-size: 20px;
  12.         color: #23FFFC;
  13.         position: relative;
  14.     }
  16.     .cur:after {
  17.         content: "";
  18.         display: inline-block;
  19.         position: absolute;
  20.         bottom: -12px;
  21.         left: 13px;
  22.         width: 59px;
  23.         // 宽度也可以写成100%,这样就可以保持和父元素一样宽了
  24.         // width: 100%;
  25.         border-bottom: 3px solid #23FFFC;
  26.     }
  27. }

效果2

如图，和上面那个几乎一样，多贴一个

html：

  1.   <div class="feedback-container">
  2.     <div class="title-wapper">
  3.       <div :class="active == 'noread' ? 'cur' : ''" class="title " @click="switchRead(0, 'noread')">未读({{ noReadCount }})
  4.       </div>
  5.       <div :class="active == 'all' ? 'cur' : ''" class="title" style="margin-left: 15px;" @click="switchRead('', 'all')">
  6.         全部({{
  7.           allCount }})</div>
  8.       <div class="readBut" @click="allToRead()">全部已读</div>
  9.     </div>
  10.     <div class="split-line" />
  11.     <div>...下方内容...</div>
  12. </div>

样式：

  1. .feedback-container {
  3.   padding: 0 20px;
  5.   .title-wapper {
  6.     display: flex;
  7.     height: 60px;
  8.     // background-color: #ffabcd;
  9.     line-height: 60px;
  10.     align-items: center;
  11.   }
  13.   .title {
  14.     font-family: MicrosoftYaHei-, MicrosoftYaHei;
  15.     font-weight: normal;
  16.     color: #333339;
  17.     font-size: 16px;
  18.     cursor: pointer;
  19.   }
  21.   .cur {
  22.     color: #3E91F7;
  23.     position: relative;
  24.   }
  26.   .cur:after {
  27.     content: "";
  28.     display: inline-block;
  29.     position: absolute;
  30.     bottom: 0px;
  31.     // 这些间距都可以微调实现更好的效果
  32.     left: -1px;
  33.     // 宽度也可以写成100%,这样就可以保持和父元素一样宽了
  34.     width: 100%;
  35.     border-bottom: 2px solid #409eff;
  36.   }
  38.   .readBut {
  39.     margin-left: auto;
  40.     color: #007EFF;
  41.     font-size: 14px;
  42.     width: 90px;
  43.     height: 31px;
  44.     background: #FFFFFF;
  45.     border-radius: 4px 4px 4px 4px;
  46.     opacity: 1;
  47.     border: 1px solid #007EFF;
  48.     text-align: center;
  49.     line-height: 31px;
  50.     cursor: pointer;
  51.   }
  53.   .split-line {
  54.     height: 1px;
  55.     background: #EAEEF0;
  56.     // width: 100%;
  57.     margin-left: -20px;
  58.     margin-right: -20px;
  59.   }
  60. }

js方法也贴一下吧

  1.     switchRead(isRead, readTag) {
  2.       this.getMessage(1, isRead)
  3.       // 控制菜单选中的标识
  4.       this.active = readTag
  5.       this.isReadTag = isRead
  6.       // 切换过后重新成1开始吧
  7.       this.pageIndex = 1
  8.     },

伪类选择器 after清楚浮动

就不用在后面添加一个元素清除浮动了，比较方便

  1. .content::after
  2. {
  3.     content: "";
  4.     display: block;
  5.     clear: both;
  6. }

伪类选择器 实现红黄蓝效果

代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <div class="widget">
  12.         <h3 class="widget-title">文章类别</h3>
  13.     </div>
  15.     <style>
  17.         .widget
  18.         {
  19.             margin: 20px;
  20.             width: 28%;
  21.         }
  23.         .widget h3.widget-title {
  24.             font-size: 16px;
  25.             color: #333;
  26.             text-transform: uppercase;
  27.             padding-bottom: 13px;
  28.             margin-top: 5px;
  29.             margin-bottom: 15px;
  30.             position: relative;
  31.             border-bottom: 1px solid #ddd;
  32.         }
  34.         .widget h3.widget-title:before {
  35.             display: inline-block;
  36.             z-index: 1;
  37.             content: " ";
  38.             position: absolute;
  39.             -webkit-border-radius: 50%;
  40.             border-radius: 50%;
  41.             background: #f92900 !important;
  42.             width: 10px;
  43.             height: 10px;
  44.             -webkit-box-shadow: 18px 0 #fbc606, 36px 0 #26c73d;
  45.             box-shadow: 18px 0 #fbc606, 36px 0 #26c73d;
  46.             /* float: right; */
  47.             right: 40px;
  48.             top: 5px;
  49.             border-color: transparent;
  50.         }
  52.         .widget h3.widget-title:after {
  53.             content: "";
  54.             background-color: #666666;
  55.             left: 0;
  56.             width: 66px;
  57.             height: 2px;
  58.             bottom: -1px;
  59.             position: absolute;
  60.             -webkit-transition: 0.5s;
  61.             -moz-transition: 0.5s;
  62.             -ms-transition: 0.5s;
  63.             -o-transition: 0.5s;
  64.             transition: 0.5s;
  65.         }
  67.         .widget h3.widget-title:hover:after {
  68.             width: 80px;
  69.         }
  70.     </style>
  71. </body>
  73. </html>

如果使用的是span的话，稍微变一点样式。贴个完整点的

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <div class="widget">
  12.         <span class="widget-title">文章类别</span>
  13.     </div>
  14.     <style>
  16.         .widget
  17.         {
  18.             margin: 20px;
  19.             width: 28%;
  20.         }
  22.         .widget .widget-title {
  23.             font-size: 16px;
  24.             color: #333;
  25.             text-transform: uppercase;
  26.             padding-bottom: 13px;
  27.             margin-top: 5px;
  28.             margin-bottom: 15px;
  29.             position: relative;
  30.             border-bottom: 1px solid #ddd;
  31.             /* 如果是span要给宽度和块元素 */
  32.             display: inline-block;
  33.             width: 100%;
  34.         }
  36.         .widget .widget-title:before {
  37.             display: inline-block;
  38.             z-index: 1;
  39.             content: " ";
  40.             position: absolute;
  41.             -webkit-border-radius: 50%;
  42.             border-radius: 50%;
  43.             background: #f92900 !important;
  44.             width: 11px;
  45.             height: 11px;
  46.             -webkit-box-shadow: 18px 0 #fbc606, 36px 0 #26c73d;
  47.             box-shadow: 18px 0 #fbc606, 36px 0 #26c73d;
  48.             /* float: right; */
  49.             right: 40px;
  50.             top: 5px;
  51.             border-color: transparent;
  52.         }
  54.         .widget .widget-title:after {
  55.             content: "";
  56.             background-color: #666666;
  57.             left: 0;
  58.             width: 66px;
  59.             height: 2px;
  60.             bottom: -1px;
  61.             position: absolute;
  62.             -webkit-transition: 0.5s;
  63.             -moz-transition: 0.5s;
  64.             -ms-transition: 0.5s;
  65.             -o-transition: 0.5s;
  66.             transition: 0.5s;
  67.         }
  69.         .widget .widget-title:hover:after {
  70.             width: 80px;
  71.         }
  72.     </style>
  73. </body>
  75. </html>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

css3样式学习代码
上代码！上代码！不说了&lt;!DOCTYPEhtml&gt; &lt;htmllang=&quot;en&quot;&gt; &lt;head&gt; &lt;metacharset=&quot;UT...

HTML+css3+js 实现生日快乐代码，动态生成效果
&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;UTF-8&quot;&gt; &lt;title&gt;生日快乐&lt;/...

css3过渡渐变
code:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程...

css3 background-size

语法：div { background:url(img_flwr.gif); background-size:80px60px; background-repeat:no-repeat; }可以设置成10...

css3实现边框旋转但内容不动
其实思路就是把文字旋转的角度反向旋转抵消掉div旋转的角度即可 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...

css3印章效果
配合bootstrap4来写的，效果图直接贴代码吧:直接复制运行即可看到效果：&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&g...

css3 中的 nth-child

:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以...

css3伪类选择器 nth-child ， 循环变色，循环颜色。css最后一个元素
选中第一个元素：.container&gt;div:first-child{ background:#abcdff; }选中最后一个可以使用last-child.container&gt;d...

css3 实现ps文字外发光效果实现一串文字背后灯光高亮效果。实现文字发光。css实现实现文字背景高亮
CSS3 并没有直接设置发光效果的属性，但是利用text-shadow属性实现此效果text-shadow: h-shadow v-shadow blur color; 参...

使用css3实现一个不规则div的布局
要实现不规则的div布局，可以使用CSS3的clip-path属性。该属性可以剪切元素的形状，从而实现不规则的布局。以下是一个示例...

css3 渐变 两边浅中间深。由中间向两边。 div边框渐变色
设计图是这样的 可以使用线性渐变语法：background: linear-gradient(direction, color-stop1, color-stop2, …)例如从...

css图片和文字对齐问题
文字和图片写到一排经常会出现对不齐的问题 这样感觉图片会上来一点没有和文字对齐，如下图 但是如果修改下html结...

微信交易单号和订单号的区别
一般第三方在线支付系统中都会有两类订单号transactionId 为支付系统的订单号，由支付系统生成，并在回调时传回给商户，用...

C ?、?? 问号和2个问号的用法（类型?、对象?）
C# ?C# ???:单问号1.定义数据类型可为空。可用于对int,double,bool等无法直接赋值为null的数据类型进行null的赋值如这...

C out、ref关键字的用法和区别
说说自己对out、ref的认识，面试问到的几率很高哟。out：classProgram { /* *out、ref都是引用传递，传递后使用都会改变...