网页制作CSS小技巧:混合模式、渐变边框 混合模式 不久之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式,但是在Chrome和Opera浏览器中需要添加前缀。举个栗子: // 你也可以尝试不同的样式 .ble... 2019-01-092,514 viewsCommentsCSS 阅读全文
网页制作前端设计网站框架CSS命名规范随手记整理 做前端设计网站框架的时候,DIV或者CSS标签名称有没有一个固定的标准?有些朋友是想到哪里写到哪里,有些朋友有自己的规范命名特征,也有些朋友是遵循标准的。因为在团队协作的时候,有规范的标准是很重要的,... 2018-12-292,762 viewsCommentsCSS 阅读全文
网页制作CSS3 伪元素实现页码摘要效果 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flo... 2018-12-262,481 viewsComments 阅读全文
网页制作CSS3 伪元素构建文章水印背景代码及效果 h1 { position: relative; margin: 0; font-weight: bold; letter-spacing: -0.05rem; line-height: 1; tex... 2018-12-262,638 viewsComments 阅读全文
网页制作css3伪元素和平移(translate)变换实现的提示框 <div class="row"> <a rel="nofollow" rel="noreferrer" href="#" class="btn tooltip top"> &... 2018-12-262,806 viewsComments 阅读全文
网页制作css3伪元素实现带角度的底部倾斜的边界 原理:修改webkit-transform: skewY属性来修改倾斜度(旋转也是一样的道理) .edge--bottom { position: relative; z-index: 1; } .e... 2018-12-262,647 viewsComments 阅读全文
网页制作css3伪类after实现三角箭头的原理及效果 实现原理:三边设置边框,箭头指向的那个方向的border不用设置,位于箭头两边的边框颜色为透明(transparent),对边为主体边框颜色(较大的)/主体背景颜色(较小的),因为我们要有边框颜色的三... 2018-12-268,514 viewsComments 阅读全文
网页制作css3伪元素:before实现面包屑导航栏 <ul class="breadcrumb"> <li><a href="#">Home</a> </li> <li><a... 2018-12-263,052 viewsComments 阅读全文
网页制作css3伪类使用技巧:实现盒子阴影 众所周知,Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果,但repaint消耗较多,于是这里提出通过修改伪元素的透明度来实现盒子阴影 实... 2018-12-262,533 viewsComments 阅读全文
网页制作CSS实现镂空效果的原理:利用渐变 效果原理 主要利用css渐变实现一些不需要切图的背景镂空 优惠券样式 .mixinsTicket(@width, @height, @r, @left, @lcolor, @rcolor) { wid... 2018-12-262,559 viewsCommentsCSS 阅读全文
网页制作css背景与边框:多重、半透明、定位、圆角、连续图案 半透明边框 background-clip background-clip: border-box|padding-box|content-box; 默认是border-box。该属性规定背景的绘制区... 2018-12-263,131 viewsCommentsCSS 阅读全文
网页制作css形状实践:自适应椭圆、平行四边形、菱形图片 以下内容,我们假设结构层的变更是不允许的。 我们也尽量不去添加额外的HTML,以做到样式层与结构层的分离,如若实在没有其他的可能性,才退而求其次来增加额外的HTML。 自适应椭圆 制作一个自适应的椭圆... 2018-12-263,682 viewsCommentsCSS 阅读全文
网页制作Bootstrap媒体对象:例子、嵌套、对齐、列表 例子 在一些媒体元素定位在内容旁边,并且(文字)内容并不围绕媒体排列的情况下,媒体对象能帮你构建复杂且重复的组件。另外,借助flexbox,只需要用两个必要的类即可。 下面是单媒体对象的一个例子。只需... 2018-12-262,365 viewsCommentsBootstrap 阅读全文
网页制作Bootstrap网格体系:原理、可选项、自动布局列、响应式类 原理 Bootstrap的网格系统使用了一系列容器、行和列,以及对齐内容。它用flexbox实现,是完全响应式的。下面是一个例子,帮你深入了解网格的构成。 <div class="contain... 2018-12-262,554 viewsCommentsBootstrap 阅读全文
网页制作Bootstrap入门:容器、响应式断点、Z-index 容器 容器是Bootstrap中最基本的布局元素,在使用Bootstrap网格系统的必备之器。你可以选择一个响应式的、固定宽度的容器(意味着其max-width在每个尺寸断点处变化),或者灵活宽度的容... 2018-12-2610,043 viewsCommentsBootstrap 阅读全文
网页制作word-wrap,word-break,white-space强制换行和不换行总结 强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我... 2018-12-212,481 viewsComments 阅读全文
网页制作css中px、em、rem三者区别详解及字体换算表 1、px (pixel,像素): 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有D... 2018-12-213,031 viewsCommentsCSS 阅读全文
网页制作初学制作网页:CSS设置margin:0 auto; 水平居中无效的原因 初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其实就... 2018-12-212,762 viewsCommentsCSS 阅读全文
网页制作SVG教程: 元素定义模式,并以平铺方式填充图形元素 SVG使用<pattern>元素来定义模式。 模式使用<pattern>元素定义,并用于以平铺方式填充图形元素。 声明 以下是<pattern>元素的语法声明。 我... 2018-12-204,160 viewsComments 阅读全文
网页制作SVG教程: 元素定义滤镜与阴影效果示例 SVG使用<filter>元素来定义滤镜。 <filter>元素使用一个id属性来唯一标识它。滤镜在<def>元素中定义,然后由它们的id通过图形元素引用。 SVG... 2018-12-202,179 viewsComments 阅读全文
网页制作SVG教程:笔画(stroke)属性及示例 SVG支持多个笔画(stroke)属性。 以下是一些经常使用的stroke属性。 编号 Stroke类型 描述 1 stroke 定义元素的文本,线条或轮廓的颜色。 2 stroke-width 定义... 2018-12-204,138 viewsComments 阅读全文
网页制作svg教程:元素绘制文本属性及示例 <text>元素用于绘制文本。 声明 以下是<text>元素的语法声明。 这里只显示了一些主要属性。 <text x="x-cordinates" y="y-cordin... 2018-12-201,694 viewsComments 阅读全文
网页制作svg教程:绘制图像的形状 SVG提供了许多可用于绘制图像的形状。 以下是常见的形状。 编号 形状类型 描述 1 rect 用于绘制一个矩形。 2 circle 用于绘制一个圆圈。 3 ellipse 用于绘制椭圆。 4 lin... 2018-12-202,402 viewsComments 阅读全文
网页制作svg教程:简介、优缺点、示例及与html集成 SVG是一种以快速开发和高性能为目标来开发图形的Google XML格式语言。 它有以下特点 - SVG(Scalable Vector Graphics)是一种基于XML的语言,用于定义基于矢量的图... 2018-12-203,383 viewsComments 阅读全文