CSS3的新特性行内盒子before和after

CSS3的新特性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>before after</title>
 6     <style type="text/css">
 7     /*在DIV1盒子内部前面*/
 8     #div1:before{
 9         width: 100px;
10         height: 30px;
11         background:#f0f url(‘./logo/ico.jpg‘) no-repeat;
12         display: inline-block;
13         content: "";
14         vertical-align: middle;/*上下居中，不要去影响其他的人*/
15     }
16     /*在DIV1盒子内部后面*/
17     #div1:after{
18         width: 100px;
19         height: 30px;
20         background:#0f0 url(‘./logo/ico.jpg‘) no-repeat;
21         display: inline-block;
22         content: "";
23         vertical-align: middle;/*上下居中，不要去影响其他的人*/
24     }
25     </style>
26     <style type="text/css">
27
28     </style>
29 </head>
30 <body>
31     <div id="div1">AAAAAA    </div>
32 </body>
33 </html>

before after

时间： 2024-12-11 17:21:02

CSS3的新特性行内盒子before和after的相关文章

css3的新特性选择器-------属性选择器

自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a example</p> <p id="one">I'm a example</p> <p>I'm a example</p> <p>I'm a example</p> <p>I'm a exa

最近这张图火了,让我火遍了大江南北,震惊了整个CSS圈一张思维导图搞定CSS3全部新特性(图片太大,切片上传) 原图下载地址配套CSS3实战视频地址由king老师历时一个月,精心收集与整理的CSS3全部新特性的素材,包括国外资源.辅助工具.项目素材.实战案例...就不一一列举了,好不好看了就知道,兄弟姐妹们,顶起哈~ 山哥出品,必属精品 Powered By King 原文地址:https://www.cnblogs.com/jlfw/p/12219688.html

HTML5与CSS3的新特性

一.HTML5新特性 1.视频在HTML5之前,网络上的视频大多都是使用Flash插件进行播放的,保险现在也仍然有很多.HTML5规定了一种通过video元素包含视频的标注方法. 视频格式的支持: 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的

CSS3的新特性

上一篇写了HTML5的新特性,不能落下CSS3独坐空房啊 HTML5新特性的链接:https://www.cnblogs.com/pingzi-wq/p/11490383.html 边框 border-radius —— 圆角边框 box-shadow —— 边框阴影 border-image —— 图片自定义边框 // 圆角边框 border-radius: 25px; // 边框阴影四个参数:水平阴影位置,垂直阴影位置,模糊度颜色 box-shadow: 10px 10px 5px #f

html5和css3的新特性

html5: 用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素,比如 article.footer.header.nav.section 新的表单控件,比如 calendar.date.time.email.url.search css3: 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(

[Modern PHP] 第二章新特性之七内置HTTP服务器

内置HTTP服务器你知道PHP从5.4.0开始有了一个内置的web服务器吗?对于那些只知道使用Apache或者nginx去预览PHP页面的PHP开发者们来说这又是一块未被发掘的宝石.虽然你不能在产品环境中使用PHP的内置web服务器,但是这个功能对于本地开发来说真是的一个完美的工具. 无论我是否在写PHP代码,反正每天都会使用PHP的内置web服务器.我会使用它来预览Laravel和Slim Framework(译者注:框架的作者就是本书的作者Josh Lockhart)应用程序,在使用Dru

Oracle 18C新特性：内联外部表

介绍 Oracle 数据库18c 允许您使用 SELECT 语句中定义的内联外部表访问平面文件中的数据. 什么是内联外部表? 内联外部表将外部表的定义直接放在SQL语句中,不需要额外在数据字典中创建外部表对象.当使用内联外部表的时候,与创建外部表(CREATE TABLE)相同的语法可以用在一个select语句上.可以在一个字句的 from 关键字后面指定内联外部表.含有内联外部表的查询也可以包含常规的表的关联(joins),聚合(aggregation)等等. 这比 Oracle 数据库12c

关于html5和css3的新特性

html5增加了标签: <header>头部 <aside>侧边栏 <section>一个区块 <footer>尾部 css3增加的内容: border-radius 圆角 box-shadow 盒阴影 text-shadow 文字阴影选择器:

函数新特性、内联函数、const详解

一.函数回顾与后置返回类型函数定义中,形参如果在函数体内用不到的话,则可以不给形参变量名字,只给其类型. 函数声明时,可以只有形参类型,没有形参名把函数返回类型放到函数名字之前,这种写法,叫前置返回类型. C++11中,后置返回类型,在函数声明和定义中,把返回值类型放到参数列表之后. 前面放auto,表示函数返回类型放到参数列表之后,而放在参数列表之后的返回类型是通过 -> 开始的. 1 #include <iostream> 2 using namespace std; 3 4 v

CSS3的新特性 行内盒子before和after

CSS3的新特性 行内盒子before和after的相关文章

CSS3的新特性行内盒子before和after

CSS3的新特性行内盒子before和after的相关文章