-
CSS3实现渐变背景兼容问题
所属栏目：[系统] 日期：2020-05-10 热度：135
我们在做一个渐变背景颜色的时候会用到linear-gradient() 函数用于创建一个线性渐变的 图像。它是css3中的语法，最低兼容IE10 background-image: linear-gradient(to right, #ff9000, #ff5000); direction：用于指定渐变方向。它可以接受一个表示角度的值[详细]
-
如何利用定位使元素居中(web端页面布局小技巧)
所属栏目：[系统] 日期：2020-05-10 热度：75
元素在浏览器窗口居中的方法 这里先给出代码块，如果有同学已经看出来点眉目可以先自己尝试一下。 position:fixed; /*给想要居中的元素设置*/ left:50%; /*或者right:50%*/ top:50%; /*或者bottom:50%*/ margin-left:-元素宽度的一半; /*或者margin-right*[详细]
-
WEB标准学习经验总结
所属栏目：[系统] 日期：2020-05-10 热度：80
今天在群里，熊猫君提议整理一个帖子，一方面为初学者提供一个入门指南，另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结，希望抛砖引玉，大家不吝赐教。 １、必备工具 其实web标准并不是很复杂的技术，实现we[详细]
-
IE对网页中引入CSS样式表的限制
所属栏目：[系统] 日期：2020-05-10 热度：198
首先介绍一下HTML文档与CSS 的关联常见有4种方式： 1、使用link标记 linkrel=stylesheettype=text/csshref=sheet.css/ 2、使用style元素 styletype=text/css body{background:#fff;} h1{font-size:2em;} /style 3、使用@import指令 styletype=text/css @im[详细]
-
CSS实现聊天气泡效果
所属栏目：[系统] 日期：2020-05-10 热度：98
模拟的效果 二、原理 准备一个高度和宽度为0的盒子 将这个盒子设置一个边框 将边框不需要的地方用 transparent 来代替，需要显示的地方设置对应的颜色 如果需要改变其大小，直接设置边框的宽度 border-width 将字体 font-size 和行高 line-height 设置为0[详细]
-
纯CSS3实现移动端展开和收起效果的示例代码
所属栏目：[系统] 日期：2020-05-10 热度：107
HTML代码 section class=blockinput type=checkboxdiv class=case-blockdiv展开/divdiv收起/div/divdiv class=detaildiv唧唧复唧唧，木兰当户织。不闻机杼声，惟闻女叹息。(惟闻 通：唯)问女何所思，问女何所忆。女亦无所思，女亦无所忆。昨夜见军帖，可汗[详细]
-
CSS中层叠上下文的具体使用
所属栏目：[系统] 日期：2020-05-10 热度：86
层叠上下文与层叠顺序 层叠上下文（stacking content）是 HTML 中的三维概念，也就是元素z轴。层叠顺序（stacking order）表示层叠时有着特定的垂直显示顺序。 层叠准则 谁大谁上 当具有明显的层叠水平标示的时候，如识别的 z-indx 值，在同一个层叠上下文[详细]
-
Css实现手机端页面强制横屏的方法示例
所属栏目：[系统] 日期：2020-03-29 热度：190
@media screen and (orientation: portrait) {html{width : 100vmin;height : 100vmax;}body{width : 100vmin;height : 100vmax;}#gyroContain{width : 100vmax;height : 100vmin;transform-origin: top left;transform: rotate(90deg) translate(0,-100vm[详细]
-
CSS大师Eric采访实录
所属栏目：[系统] 日期：2020-03-29 热度：68
自从学习、实践CSS以来，问题层出不穷，实在是自己学习的太肤浅，对CSS的理解也不够。 本篇摘录一段对CSS大师Eric的采访记录，希望加深认识，准备重拾对CSS的学习劲头。 关于作者和此篇采访 原文于2004年4月21日采访，载于webstandardgroup.org由国内CSS的[详细]
-
CSS网站布局技巧几则总结
所属栏目：[系统] 日期：2020-03-29 热度：61
1.若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用，请见。请注意，在文件开头的错误，可能因为不当的结构等因素造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错[详细]
-
Web标准:结构,表现和行为分离
所属栏目：[系统] 日期：2020-03-29 热度：162
Web标准：讨论内容结构表现行为分离 内容与表现分离，从标准到国人重视那天起，就已经讨论了，但是停留在div cssxhtml css纯代码的分离，思想上流程上，到底如何分离？ 古老的话题：一首古诗的分离 1.给你一首古诗，保存为毫无格式的一堆文字，你去理解它[详细]
-
用CSS遮罩实现过渡效果的示例代码
所属栏目：[系统] 日期：2020-03-29 热度：171
副标题#e# 今天我们展示如何用CSS遮罩创建一个有趣又简单但吸引人的过渡效果。与裁剪一样，遮罩是另外一种定义可见性和元素组合的方式。在下面的教程中，我们将向你展示如何应用新属性实现现代转换效果。我们将使用steps()和位于图片之上的PNG实现一个有趣[详细]
-
详解css透明度之rgba和opacity的区别及兼容
所属栏目：[系统] 日期：2020-03-29 热度：50
对于设置透明度，我们有两个可以选的css3属性：rgba 和 opacity opacity 用法： #box{background-color:rgb(125,25,0);opacity: 0.5} IE9, Firefox, Chrome, Opera 和 Safari 使用属性opacity来设定透明度。 opacity 属性能够设置的值从 0.0 到 1.0。值越[详细]
-
聊一聊CSS中的长度单位的使用
所属栏目：[系统] 日期：2020-03-29 热度：169
CSS中有很多属性可以接受长度值，比如： width, height, margin, padding, border-width, font-size, text-shadow。因为使用场景多，因此CSS也提供了许多长度单位。有的是日常生活中使用的单位，比如：厘米（cm）和英寸（in）；有的是印刷行业使用的单位，[详细]
-
详解利用clear清除浮动的一些问题解决
所属栏目：[系统] 日期：2020-03-29 热度：100
下面这段代码是用来清除浮动带来的高度塌陷问题 .clearfix:before {content: .;display: block;height: 0;clear: both;visibility: hidden;} Question 1: 上面的代码的能够实现清除浮动的问题吗？ Answer： Can't. 因为clear属性只能控制元素本身与前面的[详细]
-
css隐藏移动端滚动条并且ios上平滑滚动的方法
所属栏目：[系统] 日期：2020-03-29 热度：100
css隐藏移动端滚动条并且ios上平滑滚动的方法 HTML代码如下 !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0meta http-equi[详细]
-
如何使用css绘制钻石的方法
所属栏目：[系统] 日期：2020-03-29 热度：70
听说你想要钻石:gem:？买不起，还是用css来画一个吧，但你敢送给自己女朋友，不保证不被打。 下午两点要相亲，要不把这个送相亲对象？ 效果 先看下效果吧，想一想怎么构图先。 上图是已经完成的效果。钻石整体都是由三角形构成，上五下三。上边是五个等边[详细]
-
浅谈CSS中盒模型的理解
所属栏目：[系统] 日期：2020-03-29 热度：167
今天突然看到一篇关于CSS中盒模型的文章，忽然觉得自己竟然遗忘了很多小的地方，所以写一篇文章来记忆一下 （ 摘抄于千与千寻写的CSS盒子模型理解，并在自己基础上添加了一些东西，希望更完善，对大家有帮助 ） 1.基本的盒模型知识 CSS css盒子模型 又称框[详细]
-
CSS3径向渐变radial-gradient实现波浪边框和内倒角的方法
所属栏目：[系统] 日期：2020-03-29 热度：167
大佬给了一张优惠券图片(如下图)，我一看，这波浪型的边框和内倒角用css写不出来吧，遂向大佬说明并要ui切图，大佬回答：css3可以实现。好吧，大佬都说可以实现了，还不赶紧去求谷哥，度娘。 实现内倒角 上代码，然后解释代码 div class=radial-gradient/d[详细]
-
如何只在IE上加载CSS样式表
所属栏目：[系统] 日期：2020-03-29 热度：152
前言：IE一直是特殊的一个浏览器，我们可以使用一些方法来指定样式表只在IE浏览器下被加载。 IE9以及低于IE9版本 : 可以使用条件注释语句来加载特定于ie的样式表。如下所示，使用外部样式表。 !--[if IE] link rel=stylesheet type=text/css href=http://w[详细]
-
css 11种方法实现一个tips带有描边的小箭头
所属栏目：[系统] 日期：2020-03-29 热度：77
副标题#e# 我们在网页开发中实现一个tips时会有一个小箭头，实现这种方法的文章网上已经泛滥了，但有时实现这个小箭头不止只有单纯的三角它还有描边，今天我们就借那些现有的文章在深入一点来说说如何给tips小箭头描边，本章不涉及svg/canvas，没必要因为我[详细]
-
使用CSS的border属性绘制各种几何形状的方法
所属栏目：[系统] 日期：2020-03-29 热度：69
副标题#e# border 边框属性可以说是我们在网页布局中最常用不过的一个属性之一。 border 它不只是边框，它还有很多非常有用的黑魔法哈，让我们一起来学习一下。 border绘制几何形状的原理 我们先来看一个简单的小例子： 在页面上写一个 div div class=borde[详细]
-
css3 flex实现div内容水平垂直居中的几种方法
所属栏目：[系统] 日期：2020-03-29 热度：129
副标题#e# 一、flex-direction: （元素排列方向） ※ flex-direction:row （横向从左到右排列==左对齐） ※ flex-direction:row-reverse （与row 相反） ※ flex-direction:column （从上往下排列==顶对齐） ※ flex-direction:column-reverse （与column[详细]
-
css3媒体查询中device-width和width的区别详解
所属栏目：[系统] 日期：2020-03-29 热度：169
定义：定义输出设备的屏幕可见宽度。 不管你的网页是在safari打开还是嵌在某个webview中，device-width都只跟你的设备有关，如果是同一个设备，那么他的值就不会变。 比如iphone6的device-width*device-height为375*667,而跟他的dpr等无关。 2.width 定义[详细]
-
CSS 漂亮搜索框美化代码
所属栏目：[系统] 日期：2020-03-29 热度：51
效果图： 实现这种效果有两种方法：一是整体处理一个背景，以透明gif图的方式定位到搜索框，或者切分开，这种方法加载快，而且灵活性更高。 文中用到的图片 提示：您可以先修改部分代码再运行[详细]
