-
使用css创建一个优惠券的方法
所属栏目：[系统] 日期：2020-05-12 热度：139
添加优惠券类目,展示用户的优惠券 常见的设计样式如下图,核心为半圆 分步拆解 优惠券的特点是带有反向圆角,为了展示效果更好,适配多种场景,不推荐使用背景图片形式,建议使用 css . 网上有几种方案: 一种是 boder+clip 的形式,裁剪出4个小半圆角,拼凑在一起[详细]
-
清除浮动clear:both的应用详解
所属栏目：[系统] 日期：2020-05-12 热度：179
在CSS中我们会经常要用到清除浮动Clear，比较典型的就是clear:both; CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但[详细]
-
针对class、id所做的CSS HACK
所属栏目：[系统] 日期：2020-05-12 热度：83
这是一篇关于CSS HACK的文章，这篇文章中提到的CSS HACK是针对class、id中属性的HACK，排列的顺序都具有要求。今天要和大家说的是针对class、id所做的CSS HACK。 .test{/*FF*/ height:20px; background-color:orange; } * html .test{/*IE7*/ height:20px;[详细]
-
css自定义占位文本(placeholder)的样式的方法示例
所属栏目：[系统] 日期：2020-05-12 热度：185
自定义占位文本(placeholder)的样式 当我们对input元素或者textarea元素写CSS样式的时候, 如果需要自定义占位文本(也就是placeholder)的样式的时候怎么办? CSS有一个伪元素选择器::placeholder可以解决我们的问题. 用法 HTML input placeholder=我是红色的[详细]
-
详解CSS3 弹性布局快速入门
所属栏目：[系统] 日期：2020-05-12 热度：74
弹性布局是新一代的布局方式，传统布局中使用浮动布局会给我们带来不少弊端，如CSS代码高度依赖于HTML代码结构等等，下面我将用几个例子让大家快速学会弹性布局。 PS：弹性布局适用于较简单的场景，过于复杂的场景可以尝试着使用CSS3的Grid布局，弹性布局[详细]
-
CSS揭秘之多重边框的实现
所属栏目：[系统] 日期：2020-05-12 热度：120
多重边框的两种实现方案： border-shadow outline !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width, initial-scale=1.0meta http-equiv=X-UA-Compatible content=ie=edgetitleMutiple border/title/headbo[详细]
-
CSS八等分圆的实现示例
所属栏目：[系统] 日期：2020-05-12 热度：158
对于CSS的练习介绍如何绘制八等分的圆。 问题1 主要思路 这个地方的主要思路是将一个八等分的圆分成两部分。左边和右边的圆分别用半圆旋转而得。 1 注意：每个半圆最后要用外面的外包矩形切一下 详见#lfet #right 2 右边旋转的圆顺序不一样后面的可能会遮[详细]
-
CSS开关按钮样式详解
所属栏目：[系统] 日期：2020-05-12 热度：94
副标题#e# 我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。 很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签，一个checkbox，并在提交表单后获取checkbox值，以查看用户是否已经选中或[详细]
-
css中子元素设置margin-top为什么影响了父元素
所属栏目：[系统] 日期：2020-05-12 热度：88
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-12 热度：139
display:flex属性 justify-content: space-between换行后的排版问题 style.wrap {width: 400px;display:flex; /*弹性盒子*/justify-content: space-between; /*两端对齐，子元素之间有间隙*/flex-flow: row wrap;/*子元素溢出父容器时换行*[详细]
-
纯css实现动态边框的示例代码
所属栏目：[系统] 日期：2020-05-12 热度：119
副标题#e# 这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图： 动态边框 思路 看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法实现动效。另外一种实现思路是添[详细]
-
CSS教程:建议font-size使用em
所属栏目：[系统] 日期：2020-05-11 热度：56
在如今这个提倡可用性设计以及用户体验设计的网络时代，CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸，中文情况下一般为12px，而其实这样以来在通过IE顶部菜单中的察看-文字大小设置已无任何作用。对字体感觉太小的浏览者而[详细]
-
line-height使文本居中的3像素bug问题
所属栏目：[系统] 日期：2020-05-11 热度：51
虽然题目这么写，可是这真是bug吗？我觉得不算。 line-height使文本居中的3像素bug，先查下这3px的底细，怎么查？观察 FW 先写个height、line-height都为30px，背景为红色的元素，设置文字为12px。然后量下，果然有3px的bug。同时增加或者减少height、line[详细]
-
IE8.0Beta比较不错的功能:WebSlices
所属栏目：[系统] 日期：2020-05-11 热度：100
这两天M$出了个IE8beta1版~害得我的Google Reader里全是IE8的信息，可惜有用的信息太少了，在翻M$的网站时，倒是发现了一个比较帅的功能：WebSlices。 简单的来说，它的功能就是把网页的某一块剪出来放收藏夹里。这个功能与Mac OS上的Web Clip Widget性质[详细]
-
css网页设计非常有用的解决办法
所属栏目：[系统] 日期：2020-05-11 热度：128
目录介绍针对浏览器的选择器让IE6支持PNG透明移除超链接的虚线给行内元素定义宽度让固定宽度的页面居中图片替换技术最小宽度隐藏水平滚动条 一. 介绍 这篇文章包括了8个非常有用的解决办法, 在进行css设计遇到问题时你就会用到它们. 二. 针对浏览器的选择[详细]
-
CSS教程:关于H1的使用技巧
所属栏目：[系统] 日期：2020-05-11 热度：66
来蓝色一直都在潜水,很少写帖子,太对不起大家了.下面和大家探讨一个话题,希望能引起大家的兴趣. 关于H1,一直都想和大家讨论H1用法的问题,可在RTX上好象一直没有提起大家的兴趣. 看过很多页面,很多人对H1的理解都不一样,个人有个人独到的创新想法,这样的答[详细]
-
CSS教程:弄懂闭合浮动元素
所属栏目：[系统] 日期：2020-05-11 热度：153
按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 有一种[详细]
-
Web标准:关于web标准的一些初学的知识
所属栏目：[系统] 日期：2020-05-11 热度：193
Web标准使您能通过最少的工作，生成可被最广大受众访问的Web站点。Web标准的承诺是：只需设计页面一次，即可让该页以完全相同的方式在任何现代的浏览器中显示和工作。例如，在按照标准生成以后，旨在在MicrosoftInternetExplorer中以某种方式显示的页可在[详细]
-
IE8、IE7、IE6、FF简单的CSS HACK测试
所属栏目：[系统] 日期：2020-05-11 热度：115
简单试用了一下IE8后，今天相对有时间点，对IE8、IE7、IE6、Firefox2.0.0.12做了简单的一些CSSHACK测试。 样式代码： p{color:#f00;} xhtml代码： p文字/p 主要是测试文字这个颜色在不同浏览器下使用hack的一些结果报告。 早上测试的东西少了几个，这里补[详细]
-
CSS实例:让页脚保持在未满屏页面的底部
所属栏目：[系统] 日期：2020-05-11 热度：184
在内容不超过一屏的情况下，当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。 当内容多出一屏时，他显示在网页的最下边，而不是窗口的最下边；测试了一下，还可以，在IE6、IE7、FF等都没有问题！窗口缩小时也没有问题！ 首先是JS脚本： func[详细]
-
优化CSS在网页中的加载方式
所属栏目：[系统] 日期：2020-05-11 热度：175
1、应该将 CSS 放置于结构的上方（一般放置于 head 元素内）。CSS 是解释型语言，Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西。只有将 CSS 前置，才可在浏览器解析结构时，对页面进行渲染。 This causes the blank white screen problem. The[详细]
-
CSS实现隐藏滚动条并可以滚动内容效果(三种方式)
所属栏目：[系统] 日期：2020-03-29 热度：143
隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。 方法1：计算滚动条宽度并隐藏起来 在本站的侧栏，你可以看到[详细]
-
CSS3 不定高宽垂直水平居中的几种方式
所属栏目：[系统] 日期：2020-03-29 热度：93
.father {display: flex;justify-content: center;align-items: center;} 这种方式兼容性不好 2、position + transform .son {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);} IE9以下不支持transform属性 3、table + table-ce[详细]
-
ie中出现的jquery.form.js拒绝访问,input上传按钮必须主动点击的问题
所属栏目：[系统] 日期：2020-03-29 热度：191
下面先给大家看下代码 form id=uploadFileForm2 name=uploadFileForm2 enctype=multipart/form-data method=postdiv class=upload-wapper mt20input type=file name=excelfile id=dataFile class=dataFile accept=application/vnd.openxmlformats-officedo[详细]
-
使用 CSS3 中@media 实现网页自适应的示例代码
所属栏目：[系统] 日期：2020-03-29 热度：168
如今，电脑显示器的屏幕分辨率向越来越大发展，而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站，开始让自己的页面自适合各种分辨率，在小分辨率下显示基本的内容，在大分辨率下显示全部功能，甚至是分多等级的多版本。 一、CSS2 中的@me[详细]
