-
详解CSS Masking模块之Clipping
所属栏目:[系统] 日期:2020-05-12 热度:149
副标题#e# 最近业务中需要实现一些镂空的效果。看到这些效果我最初想到的是通过CSS的 mask 和 clip-path 来实现,甚至还想结合SVG相关的特性。为了验证自己的一些想法,开始着手撸码,但问题来了,在撸码的过程中,我发现自己对于 mask 的相关特性理解的还[详细]
-
移动端rem布局的两种实现方法
所属栏目:[系统] 日期:2020-05-12 热度:164
据了解,现在有两种rem布局的样式控制,其中一种是通过css的媒体查询,另外一种是通过引入js来控制,这两种方法各有各的优点,但是我还是喜欢用引入js的方法来实现rem布局,尽管现在市面上大多数都在使用css媒体查询的方式实现,在此我就将这两种方法做一[详细]
-
css实现元素垂直居中的常用方法(总结)
所属栏目:[系统] 日期:2020-05-11 热度:79
方法1:table-cell html结构: div class=box box1span垂直居中/span/div css: .box1{display: table-cell;vertical-align: middle;text-align: center;} 方法2:display:flex .box2{display: flex;justify-content:center;align-items:Center;} 方法3:[详细]
-
CSS之宽高比例布局的方法示例
所属栏目:[系统] 日期:2020-05-11 热度:83
在某些特定的场景中,如视频播放、可视化图表占位等一些高宽需要固定的比例。如果占位区间是由固定值确定,那么我们皆大欢喜,但在目前的的应用发展中宽高自适应的方式才能满足我们的需求,那么我们该如何这种自适应的 宽高比布局 呢? 什么是宽高比? 宽[详细]
-
CSS之居中布局的实现方法
所属栏目:[系统] 日期:2020-05-11 热度:198
在前端开发中,我们经常会遇到各种上不同场景的关于居中的布局,一般水平居中是相对简单,而 垂直居中与水平垂直则相应要麻烦些。在下来我们对各种场景一一列出解决方案。 水平居中 水平居中相对于其它几中居中排列要简单的多,按标签元素可分为行内元素与[详细]
-
用CSS画一个带阴影的三角形的示例代码
所属栏目:[系统] 日期:2020-05-11 热度:76
怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 通过边框控制, border-left和border-right设为透明, border-top设为预[详细]
-
网页表单在浏览器的表现实例
所属栏目:[系统] 日期:2020-05-11 热度:190
在工作之余抽了点时间写了一下这个,在ie6-ie7-ff下显示位置基本都一致了。 (发现demo页面用栅格线做背景,调试还真的容易得多 。热力推荐!这个栅格是从photoshop里拷贝来的。) 这样子定义了input等标签,做提交表单的时候就不用担心ie6-ie7-ff下radio[详细]
-
CSS教程关于css框架网页设计
所属栏目:[系统] 日期:2020-05-11 热度:166
个人总结了在开发css框架中的一点经验,献丑了。希望大家的讨论能使我们共同进步。:)1、css框架 中国的互联网行业已经发展了10年,浏览器也从最早流行的NS到现在的FF3.IE7等等前端开发工程师的职位也诞生了。近几年在web开发中,有个非常火的词框架。YUI、[详细]
-
符合WEB标准的网页图像的代码精简
所属栏目:[系统] 日期:2020-05-11 热度:133
遵循Web标准的思想,网页要表现出一种亲和力。那么,针对残障用户来说,其阅读器可不能读取图像上传递的信息的。 所以我们会采用一种Using Background-Image to Replace Text的方法,也就是将图像以背景图像的方式插入网页显示,同时为了让残障人士能了解该[详细]
-
WEB标准教程:功能丰富的段落P标签
所属栏目:[系统] 日期:2020-05-11 热度:163
关于段落p/p相信大家已经都在自己的工作中开始关注并应用了。因为那真的是非常简单的事,只要你愿意你随时都可以开始让你的页面代码更为标准化。如果你已经开始跟着《WEB标准能有多难?》在自己的工作中循序渐进地运用WEB标准了,那么这次的内容会让你更进[详细]
-
清除浮动clear:both的应用详解
所属栏目:[系统] 日期:2020-05-11 热度:107
在CSS中我们会经常要用到清除浮动Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但[详细]
-
针对class、id所做的CSS HACK
所属栏目:[系统] 日期:2020-05-11 热度:164
这是一篇关于CSS HACK的文章,这篇文章中提到的CSS HACK是针对class、id中属性的HACK,排列的顺序都具有要求。今天要和大家说的是针对class、id所做的CSS HACK。 .test{/*FF*/ height:20px; background-color:orange; } * html .test{/*IE7*/ height:20px;[详细]
-
深入浅析CSS3中的Flex布局整理
所属栏目:[系统] 日期:2020-05-11 热度:131
副标题#e# Flexbox布局模块旨在提供一个更有效的方式,在一个容器里面去布局分配空间。即使容器的大小是未知的,或者动态变化的。 Flex 布局背后的主要思想是让容器能够改变其项目的宽度 / 高度(和顺序) ,以最佳地填充可用空间(主要是适应各种显示设备和屏[详细]
-
通过css3的filter滤镜改变png图片的颜色的示例代码
所属栏目:[系统] 日期:2020-05-11 热度:152
本方法是通过CSS3滤镜 filter 中的 drop-shadow 将png图片的非透明部分生成任意颜色的投影,然后将原始图片隐藏起来,从而达到改变图片颜色的目的 先看效果图 接下来是代码 pstrong原始图标/strong/pi class=icon icon-del/ipstrong可以变色的图标/strong/[详细]
-
CSS3实现渐变背景兼容问题
所属栏目:[系统] 日期:2020-05-11 热度:136
我们在做一个渐变背景颜色的时候会用到linear-gradient() 函数用于创建一个线性渐变的 图像。它是css3中的语法,最低兼容IE10 background-image: linear-gradient(to right, #ff9000, #ff5000); direction:用于指定渐变方向。它可以接受一个表示角度的值[详细]
-
如何利用定位使元素居中(web端页面布局小技巧)
所属栏目:[系统] 日期:2020-05-11 热度:175
元素在浏览器窗口居中的方法 这里先给出代码块,如果有同学已经看出来点眉目可以先自己尝试一下。 position:fixed; /*给想要居中的元素设置*/ left:50%; /*或者right:50%*/ top:50%; /*或者bottom:50%*/ margin-left:-元素宽度的一半; /*或者margin-right*[详细]
-
WEB标准学习经验总结
所属栏目:[系统] 日期:2020-05-11 热度:182
今天在群里,熊猫君提议整理一个帖子,一方面为初学者提供一个入门指南,另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结,希望抛砖引玉,大家不吝赐教。 1、必备工具 其实web标准并不是很复杂的技术,实现we[详细]
-
IE对网页中引入CSS样式表的限制
所属栏目:[系统] 日期:2020-05-11 热度:170
首先介绍一下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-11 热度:123
模拟的效果 二、原理 准备一个高度和宽度为0的盒子 将这个盒子设置一个边框 将边框不需要的地方用 transparent 来代替,需要显示的地方设置对应的颜色 如果需要改变其大小,直接设置边框的宽度 border-width 将字体 font-size 和行高 line-height 设置为0[详细]
-
纯CSS3实现移动端展开和收起效果的示例代码
所属栏目:[系统] 日期:2020-05-11 热度:184
HTML代码 section class=blockinput type=checkboxdiv class=case-blockdiv展开/divdiv收起/div/divdiv class=detaildiv唧唧复唧唧,木兰当户织。不闻机杼声,惟闻女叹息。(惟闻 通:唯)问女何所思,问女何所忆。女亦无所思,女亦无所忆。昨夜见军帖,可汗[详细]
-
CSS中层叠上下文的具体使用
所属栏目:[系统] 日期:2020-05-11 热度:163
层叠上下文与层叠顺序 层叠上下文(stacking content)是 HTML 中的三维概念,也就是元素z轴。层叠顺序(stacking order)表示层叠时有着特定的垂直显示顺序。 层叠准则 谁大谁上 当具有明显的层叠水平标示的时候,如识别的 z-indx 值,在同一个层叠上下文[详细]
-
CSS自定义select下拉选择框的样式(不用其他标签模拟)
所属栏目:[系统] 日期:2020-05-11 热度:95
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方案就是用其他的元素(如ul,li)模拟下拉菜单,或[详细]
-
css控制UL LI 的样式详解(推荐)
所属栏目:[系统] 日期:2020-05-11 热度:71
div ul lia href="#"首页/a/li li/li lia href="#"博客/a/li li/li lia href="#"设计/a/li li/li lia href="#"相册/a/li li/li lia href="#"论坛/a/li li/li lia href="#"关于/a/li /ul /div CSS: 复制代码 代码如下: #menu ul {list-style:none;margin:0p[详细]
-
从腾讯网站首页改版学到的几点体会心得
所属栏目:[系统] 日期:2020-05-11 热度:67
腾讯首页近日改版了,现在将自己从其中学到和感悟到的几点总结出来分享: 1、宽屏设计: 1)不管腾讯处于什么考虑,宽屏总是让人看的很舒服,而且页面整体缩短了近1半,这让浏览信息的用户会方便很多。 2)同时大家注意到了,腾讯的宽屏不是完全的宽屏,而[详细]
-
解决网站防挂IFRAME木马的原理
所属栏目:[系统] 日期:2020-05-11 热度:115
相信大多数朋友都是iframe木马的受害者,有朋友的网站被注入了n回iframe,心情可想而知。而且现在ARP攻击,注入iframe也是轻而易举的事,仅局域网里都时刻面临威胁,哎,什么世道。接近年关,为了防止更多的朋友受到攻击,于是细细说下。 灵儿曾经在经典论[详细]