-
css中子元素设置margin-top为什么影响了父元素
所属栏目：[系统] 日期：2020-05-13 热度：135
style type=text/css*{margin: 0px; padding: 0px;}.show{margin: 0px auto;width: 200px;height: 100px;background-color: #999999;}.show h2{margin-top: 50px;cursor: pointer;}/stylebodydiv class=showh2crystal/h2/div/body 两个div，子元素div设置[详细]
-
解决display:flex属性 justify-content: space-between换行后的排版问题
所属栏目：[系统] 日期：2020-05-13 热度：153
display:flex属性 justify-content: space-between换行后的排版问题 style.wrap {width: 400px;display:flex; /*弹性盒子*/justify-content: space-between; /*两端对齐，子元素之间有间隙*/flex-flow: row wrap;/*子元素溢出父容器时换行*[详细]
-
纯css实现动态边框的示例代码
所属栏目：[系统] 日期：2020-05-13 热度：147
副标题#e# 这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图： 动态边框 思路 看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法实现动效。另外一种实现思路是添[详细]
-
详解CSS Masking模块之Clipping
所属栏目：[系统] 日期：2020-05-13 热度：175
副标题#e# 最近业务中需要实现一些镂空的效果。看到这些效果我最初想到的是通过CSS的 mask 和 clip-path 来实现，甚至还想结合SVG相关的特性。为了验证自己的一些想法，开始着手撸码，但问题来了，在撸码的过程中，我发现自己对于 mask 的相关特性理解的还[详细]
-
移动端rem布局的两种实现方法
所属栏目：[系统] 日期：2020-05-13 热度：174
据了解，现在有两种rem布局的样式控制，其中一种是通过css的媒体查询，另外一种是通过引入js来控制，这两种方法各有各的优点，但是我还是喜欢用引入js的方法来实现rem布局，尽管现在市面上大多数都在使用css媒体查询的方式实现，在此我就将这两种方法做一[详细]
-
CSS 常用中文字体 Unicode 编码表
所属栏目：[系统] 日期：2020-05-13 热度：76
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。 为此，在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。 例如： font-f[详细]
-
css3 响应式媒体查询的示例代码
所属栏目：[系统] 日期：2020-05-13 热度：166
/* 将body的背景颜色设置为tan */body { background-color: tan;}/* 在992px或更低的屏幕上，将背景颜色设置为蓝色 */@media screen and (max-width: 992px) { body {background-color: blue; }}/* 在600px或更低的屏幕上，将背景颜色设置为橄榄色 */@medi[详细]
-
CSS3动画之利用requestAnimationFrame触发重新播放功能
所属栏目：[系统] 日期：2020-05-13 热度：82
css3中引入了animation模块,自此css动画进入了我们的视野。css动画名符其实,会写css样式就可以创作动画，对一些不怎么会JS的设计师也是比较包容的。但也正因为如此，当你需要重新播放或者说手动触发动画时，css的局限性就突显出来了，毕竟它不是一门编程语[详细]
-
CSS背景图片实现自适应、全屏、填充与拉伸的方法
所属栏目：[系统] 日期：2020-05-13 热度：78
div id=formbackground style=position:absolute; width:100%; height:100%; z-index:-1 img src=http://www.jb51.net/css/pictures/background.jpg height=100% width=100%/ /div div id=formbackground style=position:absolute; z-index:-1;img src=htt[详细]
-
浅谈CSS 浏览器样式重置终结版
所属栏目：[系统] 日期：2020-05-13 热度：88
副标题#e# 浏览器的一些默认样式，有时候真的是特别丑； 虽然现在有现成的 UI 框架，但有时候写个小东西不想用那么庞大的 UI 框架,这篇文章介绍解决一些样式问题，最后将给出完整的重置样式表; 如果有遇到其它样式问题，评论区提建议，我将持续更新 样式问[详细]
-
CSS实现标签效果的示例代码
所属栏目：[系统] 日期：2020-05-13 热度：173
这里以制作图片右上角标签为例，用CSS以最简单、直接的方式实现效果。 实现效果 实现思路 准备两个div（一个父容器，一个标签div），分别设置宽高，并设置相对布局。 使标签div居于父容器右上角，设置内容居中显示，设置背景和字体颜色，旋转该div。 将父[详细]
-
CSS实现带箭头的提示框效果【示例代码】
所属栏目：[系统] 日期：2020-05-13 热度：97
我们在很多UI框架中看到带箭头的提示框，感觉挺漂亮，但是之前一直不知道其原理，今天网上找了些资料算是弄清楚原理了； 先上效果图： 原理分析： 上面的箭头有没有觉得很像一个三角形，是的，它就是三角形；只不过它这个尖角是通过两个三角形来实现的；[详细]
-
使用css创建一个优惠券的方法
所属栏目：[系统] 日期：2020-05-13 热度：136
添加优惠券类目,展示用户的优惠券 常见的设计样式如下图,核心为半圆 分步拆解 优惠券的特点是带有反向圆角,为了展示效果更好,适配多种场景,不推荐使用背景图片形式,建议使用 css . 网上有几种方案: 一种是 boder+clip 的形式,裁剪出4个小半圆角,拼凑在一起[详细]
-
使用CSS 给表单必选项添加星号的实现方法
所属栏目：[系统] 日期：2020-05-13 热度：98
在制作网页表单的时候，如果一个选项是必填的，通常会给选项添加一个星号，比如 Typecho 的评论表单： p class=form-grouplabel for=author姓名/label span class=required*/spaninput type=text id=author name=author required=required size=30 class=f[详细]
-
Css深刻理解width:auto的用法
所属栏目：[系统] 日期：2020-05-13 热度：116
看了我上篇文章的人可能觉得我小题大做，css2有什么好看的？那么我就参考《css世界》这本书，与大家一同复习理解下具体的点，对我们代码的影响。 首先，我们需要清楚width默认值就是auto，所以不用去人为写代码控制其宽度自动哦。 常见的4种宽度表现 充分[详细]
-
Html/CSS前端实现文字边框阴影效果
所属栏目：[系统] 日期：2020-05-13 热度：114
参数: 参数1 x-shadow：设置对象的阴影水平偏移值，单位可以是px、em或百分比等，允许负值。参数2 y-shadow：设置对象的阴影垂直偏移值，单位可以是px、em或百分比等，允许负值。参数3 blur：用于设置边框阴影半径大[详细]
-
基于HTML+CSS实现网页滑动门效果
所属栏目：[系统] 日期：2020-05-13 热度：91
一、什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门。 小米官网，网页滑动门效果 二、实现滑动门所需技术 简单HTML基础知识 简单的CSS基[详细]
-
超全面CSS样式整理
所属栏目：[系统] 日期：2020-05-13 热度：58
副标题#e# 一 字体属性：(font) 大小 {font-size: x-large;}(特大)xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体)italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位：PX、PD、EM[详细]
-
详解CSS经典布局之Sticky footer布局
所属栏目：[系统] 日期：2020-05-13 热度：72
何为Sticky footer布局？ 我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时，页脚能随着文档流[详细]
-
详解CSS的table-layout属性的用法
所属栏目：[系统] 日期：2020-05-13 热度：50
tableLayout属性用来显示表格单元格、行、列的算法规则。 ①该属性指定了完成表布局时所用的布局算法。 ②固定布局算法比较快，但灵活性不强。 ③自动布局算法比较慢，却更能反映传统的HTML表。 2固定表格布局 ①与自动表格布局相比，允许浏览器更快地对表[详细]
-
CSS语法与JSON、JS对象区别比较
所属栏目：[系统] 日期：2020-05-13 热度：161
CSS（Cascading Style Sheets）规则由2个部分构成：选择器，声明。 selector｛declaration1;declaration2;declaration3;...declarationN｝ declaration由分号（；）隔开，表示为 property:value1 value2 ..是一种单层的无内嵌套的结构。 value为具体的某值[详细]
-
好的 CSS 命名规范可以节约 Debug 时间
所属栏目：[系统] 日期：2020-05-13 热度：67
简评：Debug CSS 是一种很耗时的操作，如果有良好的命名规范可以节约很多的 Debug 时间。 使用连字符（'-'）分隔字符串 你可能习惯了在 Javascript 中使用小驼峰的命名方式： var redBox = document.getElementById（'...'） 但是在 CSS 中不建议使用这种[详细]
-
CSS使用classList实现两个按钮样式的切换
所属栏目：[系统] 日期：2020-05-13 热度：145
classList属性的方法：add();remove();toggle(); 描述，在一些页面我们需要使用两个按钮来回切换，如图： 我们要使用到add()和remove()方法 html部分: div class=login-titlea href=javascript:void(0) class=mya1 id=mya onclick=myonclick()注册/aa href[详细]
-
CSS实现DIV居中的三种方法
所属栏目：[系统] 日期：2020-05-13 热度：53
下面给大家分享div居中的实现代码，具体代码如下所示： !DOCTYPE htmlhtmlheadmeta charset=UTF-8titledemo/title/headbodystyle type=text/css.div1{ width: 100px; height: 100px; border: 1px solid #000000;}.div2{ width:40px ; height: 40px; backgr[详细]
-
CSS 动画实现动态气泡背景的方法
所属栏目：[系统] 日期：2020-05-12 热度：64
今天是节后上班第一天，早上醒来一睁眼，嗯？啊...？什么...？这是哪？我是谁？上什么班？ 然鹅，还是被昨晚特意设置的八个闹钟:alarm_clock:吵醒，冬天早上起床的难度...想必各位都心有体会 :sob:，抱着一万个不情愿起床早早地来到了办公室，还是熟悉的环[详细]
