伪元素“::after”和“::before”的作用分别是什么_html5教程,伪元素,::after,::before
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。（推荐教程：css快速入门）起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，单冒号表示伪类，伪元素的语法被修改成使用双冒号，成为::before ::after。伪元素并不存在与dom中，只存在于页面之中。作用：::after用来创建一个伪元……
详解CSS3实现弹性布局的方式_html5教程,CSS3,弹性布局,flexbox
一、CSS3弹性盒子弹性盒子是CSS3的一种新布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。二、浏览器支持表格中的数字表示支持该……
如何使用CSS框架来加快设计过程？_html5教程,CSS框架,设计
现在的网站风格已经与它们很早之前的样子有了很大的不同。如果现在再回过头去看有些公司最初的网站UI，我想大多数互联网用户都很难认得出来。所以也多亏了网页设计技术的创新，现在网站不仅仅是只能显示信息，它们同样也可以拥有有趣的动画、多样的布局和互动的元素。而其中，这些大部分都是由CSS来实现的。 所以CSS的出现为原本平平无奇的网页注入了活力。这也是网站的用户体……
手把手教你CSS如何实现毛玻璃效果_html5教程,css
今天在做一个登录界面的时候，由于视觉给的页面背景图片太鲜艳亮眼，导致页面中间的登录表单框很不显眼，效果很差。就想到了做成毛玻璃的效果，现在分享出来，大家一起看看吧。页面结构如下：<p class="wrap-box"><!--最外层包裹框，背景图片很鲜艳亮眼position:fixed--> <p class='l……
css优化策略介绍_html5教程,css,优化策略
css优化，提高性能的方法：（推荐教程：css快速入门）避免过度约束避免后代选择符避免链式选择符使用紧凑的语法避免不必要的命名空间避免不必要的重复最好使用表示语义的名字。一个好的类名应该是描述他是什么，而不是像什么避免！important，可以选择其他选择器尽可能的精简规则，你可以合并不同类里的重复……
两分钟带你了解在CSS中三种使图片居中的方法_html5教程,css,图片居中
在做网页美化的时候，都会用到图片居中，那你知道在CSS中有哪三种使图片居中的方法吗？下面我们一起看看吧。1.利用display:table-cell，具体代码如下：html代码如下：<div class="img_wrap"> <img src="wgs.jpg"></div>css代码如下：.im……
css中标签嵌套规则有哪些_html5教程,css,标签,嵌套规则
嵌套规则介绍：（推荐教程：css快速入门）1、body 可以直接包含块状元素、ins、del、script等不可以直接包含行内元素；2、ins 和 del（行内元素）可以包含块状元素或者行内元素，其他任何行内元素都不允许包含块状元素；3、p、h1-h6 可以直接包含行内元素和文本信息，但是不允许包含块状元素；4、dl 元素只允许包含 dt 和 ……
CSS3如何实现图片滚动播放效果（附代码）_html5教程,css
CSS3实现图片滚轮效果在平常我们使用一些滚动图片的效果，都是用javascript代码（JQuery）实现，但是在如今Html5和CSS3盛行的时代，可以替代javascript代码来实现一些常见的效果来提高网页的加载速度，对用户来说体验是更加友好的。特别是现在微信平台开发比较火热的年代，同样的效果用HTML5+CSS3替代将会带来更绝妙的移动……
什么是h5制作？_html5教程,HTML,h5制作
h5制作的意思是H5广告，大多是在微信上宣传营销使用的，而HTML5是第五代HTML的标准，可以说，H5都是基于 HTML5 实现的，包括目前我们看到的大部分网页，基本上所有H5都遵循HTML5这个规范。h5制作的意思是：通常我们所说的H5就是H5广告，大多是在微信上宣传营销使用的，而HTML5是第五代HTML的标准，可以说，H5都是基于 HTM……
一分钟了解CSS的主要功能_html5教程,css
CSS主要功能及定义主要功能： 1、可创建新模板，开始创建的新模板的CSS代码为“默认”模板的代码 2、可对您定义的模板CSS进行“编辑”、“重命名”、“删除”、“使用”等操作。 3、在保存自定义CSS后系统会自动生成套入该CSS的空间主页截图，点击该截图可预览效果。 4、点击系统模板截图可预览套入系统模板CSS的空间效果。 5、高级设置……
css如何实现文字外发光效果_html5教程,css,文字,外发光
可以通过text-shadow属性来实现文字外发光效果。（推荐教程：css快速入门）代码示例：<!DOCTYPE html><html><head><style>h1{text-shadow: .2rem 0rem .5rem red,-.2rem 0rem .5rem red,0rem ……
带你玩转css中各种方向小箭头_html5教程,css
在开发页面的时候，遇到很多的列表都需要用到箭头，可以直接用图片作背景铺垫，纯CSS也能实现，并且没有兼容性顾虑，不用CSS3,相比而言，比图片更好用。原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了梯形代码： html:<div class="arrow"&……
css如何实现模糊背景效果_html5教程,css,模糊背景
普通背景模糊（推荐教程：css快速入门）为了美观不能使背景前的文字模糊，而filter属性会使这整个div的后代并且还会出现白边。也就是说无法达到这个效果。怎么办呢？我们可以使用伪元素，这样我们也顺便解决了白边的问题。实现思路：在父容器中设置背景，并且使用相对定位，方便伪元素重叠。而在:after中只需要继承背景，并且设置模糊，绝对定位覆盖父元素……
了解css中的关键字initial、inherit、unset、revert和all属性_html5教程,css,initial,inherit,unset,revert,all
在CSS中，有4个关键字理论上可以应用于任何的CSS属性，它们是initial(初始)、inherit(继承)、unset(未设置)、revert(还原)。而all的取值只能是以上这4个关键字。本文将介绍initial、inherit、unset、revert和all。initial表示元素属性的初始默认值(该默认值由官方CSS规范定义)兼容性……
html5不常用标签可以怎么使用？_html5教程,html5,标签
作为一个前端开发，在浏览别人家的页面时总是会习惯性的查看他们页面的源码，发现大多数网站的页面，包括我自己写的页面中用到的最多的布局元素无外乎就是div、p、span、ul、dl、ol、li、dt、dd、strong、b，不管是什么样的效果都是由这些元素组成。现在都已经是9102年了，html5已经相当成熟标准了，为什么在布局的时候不用写html5提……
如何利用纯css实现图片轮播_html5教程,css,图片轮播
实现思路：（推荐学习：css快速入门）准备相同大小的多个图片将要展示图片横排放在一个图片容器里面在图片容器外再加一个展示容器，展示容器大小为图片大小给图片容器添加自定义动画，在动画不同阶段设置递增的偏移值注意事项：动画效果分为切换和停留两部分自定义动画阶段与图片数量相关动画各阶段偏移值与图片大小相关……
详谈CSS的flex布局（图文介绍）_html5教程,css,flex布局
我们之前已经学过一些布局模型，比如说浮动，绝对定位等等，但是这些布局方式一是不够简洁，而是使用的范围确实是太窄了。flex模型拥有比较多的属性，来设置多样的布局方式，接下来我们就详细介绍各种属性对布局的改变，最后再对属性做一个汇总先看一下flex的基本模型，如下图所示：container父容器里有三个子元素flex-item。当给父容器设置……
css如何垂直对齐容器中的元素_html5教程,css,容器,元素
可以利用CSS3的Transform来实现容器中的元素垂直对齐。（推荐学习：css快速入门）具体代码实现：.verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translat……
h5页面和普通页面的区别是什么？_html5教程,h5页面,普通页面,区别
区别是：HTML5页面能适配不同尺寸的移动设备正常大小查看，支持市场上不同浏览器的兼容；普通的网页制作切片采用是table布局，现在HTML5页面制作采用的是DIV+CSS布局方式；HTML5网站对搜索引擎友好，极大地方便了网站的收录。其实H5是指第5代HTML网页技术，HTML5是目前互联网前端开发的主流语言，HTML5的web页面和传统的网页界……
css伪类选择器介绍_html5教程,css,伪类选择器
伪类选择器：（推荐学习：css快速入门）1、link、hover、active、visiteda:link（未访问的链接状态），用于定义了常规的链接状态。a:hover（鼠标放在链接上的状态），用于产生视觉效果。a:active（在链接上按下鼠标时的状态）。a:visited（已访问过的链接状态），可以看出已经访问过的链接。a:link{c……
CSS3变形-旋转实现4色花-案例解析（代码实例）_html5教程,css,css3
本文目标：1、掌握CSS3中如何让元素旋转问题：1、实现以下效果，且使用纯DIV+CSS附加说明：1、带蝴蝶的粉色圆圈是一张图片2、中间的“4色花”是由4个半圆通过旋转生成的,每个半圆的直径为180px现在来具体操作1、准备素材：当前案例的素材为带蝴蝶的粉色圆圈2、创建好index.html，写好架构，架构如何分析呢思路分析：1……