有时候在网页设计中会涉及到很多看上去很繁琐的设计图，这时候都会很让人头疼，那么这时候伪类就可以来帮助你解决问题了。

下面有一段实例大家可以参考一下；

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <style type="text/css">

         .box{

             width: 800px;

             height: 800px;

             margin: 0 auto;

         }

         p{

             line-height: 1.5;

         }

         *{

             margin: 0;padding: 0;

         }

         .clearfix{

             clear: both;

         }

         .left,.content,.right{

             width: 200px;float: left;position:relative;

         }

         .content{

             margin:80px 50px;

         }

         .left::after{

             content:"";width:1px;height: 160px;position:absolute;top:50px;right:0px;background:deeppink;

         }

         .right::before{

             content:"";width:1px;height: 160px;position:absolute;top:50px;left:-50px;background:deeppink;

         }

         .left-one,.content-one,.right-one{

             width: 150px;height: 60px;border: 1px solid #0000C6;margin: 20px 0;position:relative;

         }

         .left-one::after{

             content:"";width:50px;height: 1px;position:absolute;top:30px;right:-50px;background:deeppink;

         }

         .content-one::before{

             content:"";width:50px;height: 1px;position:absolute;top:30px;left:-50px;background:deeppink;

         }

         .content-one::after{

             content:"";width:50px;height: 1px;position:absolute;top:30px;right:-50px;background:deeppink;

         }

         .right-one::before{

             content:"";width:50px;height: 1px;position:absolute;top:30px;left:-50px;background:deeppink;

         }

     </style>

     <body>

         <div class="box">

             <div class="left">

                 <div class="left-one">

                     <p>大风来袭不再怕</p>

                     <p>大风来袭不再怕</p>

                 </div>

                 <div class="left-one">

                     <p>大风来袭不再怕</p>

                     <p>大风来袭不再怕</p>

                 </div>

                 <div class="left-one">

                     <p>大风来袭不再怕</p>

                     <p>大风来袭不再怕</p>

                 </div>

             </div>

             <div class="content">

                 <div class="content-one">

                     <p>大风来袭不再怕</p>

                     <p>大风来袭不再怕</p>

                 </div>

             </div>

             <div class="right">

                 <div class="right-one">

                     <p>大风来袭不再怕</p>

                     <p>大风来袭不再怕</p>

                 </div>

                 <div class="right-one">

                     <p>大风来袭不再怕</p>

                     <p>大风来袭不再怕</p>

                 </div>

                 <div class="right-one">

                     <p>大风来袭不再怕</p>

                     <p>大风来袭不再怕</p>

                 </div>

             </div>

             <div class="clearfix"></div>

         </div>

     </body>

 </html>

效果如下图所示：

途中所有的关系线全部都是有伪类写的，大家如果有什么不懂得随时可以评论下方，请赐教。

CSS3伪类使用方法实例的更多相关文章

  1. CSS3 伪类选择器 nth-child() 的用法

    伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...

  2. CSS3伪类nth-child结合transiton动画实现文字若影若现

    css3伪类nth-child结合transiton动画实现文字若影若现收先创建一个div盒子,然后包裹在div中的有10个span标签每个span标签填上内容一次为A,B,C,D,E,F,G,H,I ...

  3. jQuery实现隔行变色、悬停变色 （ CSS3伪类选择器：nth-child() ）

    <title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...

  4. CSS3伪类和伪元素

    作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...

  5. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  6. 利用CSS3伪类做3D按钮

    这是通过css3伪类实现的3d按钮,html代码为: <div id="container_buttons"> <p><a class="a ...

  7. cSS3 伪类:nth-child 的使用方法

    :nth-child是一个非常牛逼的伪类,如果你能很好的理解它就可以用CSS 做出很多非常实用的效果.当我很年轻的时候还使用PHP的i++来实现一些东西,其实CSS 完全可以实现.下面是我总结的一些用 ...

  8. 玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

    在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素 ...

  9. CSS3伪类与伪元素的区别及注意事项

    CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...

随机推荐

  1. javascript判断访问终端，手机端自动跳转

    在网页的顶部加入javascript判断代码: function checkserAgent(){ var userAgentInfo=navigator.userAgent; var userAge ...

  2. Eclipse中Spring插件的安装及使用

    一.安装流程 1.Help——Install New Software——在Work With中添加地址http://dist.springsource.com/release/TOOLS/updat ...

  3. P4559 [JSOI2018]列队

    \(\color{#0066ff}{ 题目描述 }\) 作为一名大学生,九条可怜在去年参加了她人生中的最后一次军训. 军训中的一个重要项目是练习列队,为了训练学生,教官给每一个学生分配了一个休息位置. ...

  4. 洛谷4316 绿豆蛙的归宿(DAG递推/概率dp)

    题目大意: 给定一个DAG,求起点到终点的路径长度期望 根据题意可以知道每一条边都有一定概率被走到 那么\(\displaystyle\begin{aligned} Ans = \sum_{e \in ...

  5. redis分布式锁的使用

    一  本身自带的方法进行使用: <dependency> <groupId>redis.clients</groupId> <artifactId>je ...

  6. Qt 学习之路 2（10）：对象模型

    Home / Qt 学习之路 2 / Qt 学习之路 2(10):对象模型 Qt 学习之路 2(10):对象模型  豆子  2012年9月2日  Qt 学习之路 2  45条评论 标准 C++ 对象模 ...

  7. nginx 搭建 rtmp 服务器

    前言 最近接手了一个跟视频监控相关的项目,用了近年来越来越流行的 Web 服务器 nginx 加上 nginx-rtmp-module 搭建 rtmp 服务器.使用了阿里云的服务器,系统 Ubuntu ...

  8. maven 中 指定jdk 和 编译编码，仓库位置

    <!-- 配置编译选项 --> <profile> <id>jdk1.8</id> <activation> <activeByDef ...

  9. C语言中的预处理命令

    预处理功能是C语言的重要功能. 问:为什么要预处理,什么是预处理? 答:我们知道高级语言的运行过程是通过编译程序(编译器)把源代码翻译成机器语言,实现运行的.编译程序的工作包含:语法分析.词法分析.代 ...

  10. 神奇的操作--O(1)快速乘

    从同机房大佬那里听来的... 用O(1)时间求出两个相乘超过long long的数的取摸的结果 神奇的操作... inline long long multi(long long x,long lon ...