CSS3伪类使用方法实例
有时候在网页设计中会涉及到很多看上去很繁琐的设计图,这时候都会很让人头疼,那么这时候伪类就可以来帮助你解决问题了。
下面有一段实例大家可以参考一下;
<!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伪类使用方法实例的更多相关文章
- CSS3 伪类选择器 nth-child() 的用法
伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...
- CSS3伪类nth-child结合transiton动画实现文字若影若现
css3伪类nth-child结合transiton动画实现文字若影若现收先创建一个div盒子,然后包裹在div中的有10个span标签每个span标签填上内容一次为A,B,C,D,E,F,G,H,I ...
- jQuery实现隔行变色、悬停变色 ( CSS3伪类选择器:nth-child() )
<title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...
- CSS3伪类和伪元素
作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...
- 利用CSS3伪类做3D按钮
这是通过css3伪类实现的3d按钮,html代码为: <div id="container_buttons"> <p><a class="a ...
- cSS3 伪类:nth-child 的使用方法
:nth-child是一个非常牛逼的伪类,如果你能很好的理解它就可以用CSS 做出很多非常实用的效果.当我很年轻的时候还使用PHP的i++来实现一些东西,其实CSS 完全可以实现.下面是我总结的一些用 ...
- 玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]
在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素 ...
- CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...
随机推荐
- tcp设置超时重传
TCP超时和重传的基础是怎样根据给定连接RTT设置RTO,若TCP先于RTT开始重传,可能会在网络中引入不必要的重复数据,反之,若延迟至远大于RTT的间隔发送重传数据,整体网络利用率会随之下降.由于R ...
- P1903 [国家集训队]数颜色 / 维护队列 带修改的莫队
\(\color{#0066ff}{ 题目描述 }\) 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会向你发布如下指令: 1. Q L R代表询问你从第L支 ...
- 【SSO】单点登录系统
一.单点登录系统介绍 对于一个开发项目来说,每个项目都必不可少要有登录的这个功能.但是随着项目的变大,变大,再变大.系统可能会被拆分成多个小系统,咱们就拿支付宝和淘宝来说,咱们在淘宝上购物,然后就可以 ...
- 单片机关键字sfr和sbit的理解
在单片机C语言编程中,扩充了两个关键字sfr和sbit.sfr(Special Function Register特殊功能寄存器的缩写),sbit(特殊功能寄存器位),与定义一般的int.char型变 ...
- 百度判断手机终端并自动跳转uaredirect.js代码及使用实例
百度siteapp下的一款跳转的产品,使用起来很方便.你可以用这款JS跳转到手机版,也可以跳转到任何你想跳转的位置. js代码如下: function uaredirect(f) { try { if ...
- A. Free Cash
A. Free Cash time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- Jenkins自动化CI CD流水线之1--介绍与安装
第1章 大纲 CI/CD, DevOps介绍 Git安装与使用 Jenkins安装与使用 权限管理 参数化构建 Master-Slave 流水线(Pipeline) 邮件通知 应用案例 自动发布PHP ...
- 5.监听器(Listener)
1.监听器简介: 监听器主要用来监听对象的创建,属性的变化,是一个实现特定接口的普通Java类. Listener接口与事件对应表: 与 ServletContext 有关 ServletContex ...
- arraylist和linkedlist内部的实现大致是怎样的
1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构. 2.对于随机访问get和set,ArrayList优于LinkedList,因为ArrayList可以随 ...
- GC:并行回收CMS详解
CMS详解 https://www.cnblogs.com/ggjucheng/p/3977612.html CMS默认不回收Perm, 需要加参数 +CMSPermGenSweepingEnable ...