文章库ARTICLE COLUMN

  • CSS Tips------未知宽度高度居中对齐<三种最优解决方案>

    CSS Tips------未知宽度高度居中对齐<三种最优解决方案>

    摘要:前言无论是还是移动端开发我们经常会遇到这样一个问题父元素内包裹子元素而子元素的宽度是未知的如何让子元素左右居中呢经过实战演练及资料搜索感觉以下三种方法是最优的解决方案有需要的同学可以看看相互交流共同学习以下三种方案的主题结构如下子元素...

    big_catbig_cat 评论0 收藏0
  • 围住浮动元素的三种方法

    围住浮动元素的三种方法

    摘要:为了使包住浮动元素,有以下方法。由于包含元素一定会包围非浮动元素,而且清除会让这个子元素位于浮动元素的下方,因此包含元素一定会包含这个子元素以及前面的浮动元素。 It"s fun to float. Here is the footer element that runs acros...

    learn_shifenglearn_shifeng 评论0 收藏0
  • 使用 SVG 来制作 Morphing 动画效果

    使用 SVG 来制作 Morphing 动画效果

    摘要:了解的应该会明白,一般在设计好基本的形状的时候,使用贝赛尔曲线工具,可以做很多的变化,从而使用一个基本的形状可以做出不同形状的变化。可以和属性,,元素和对象一起工作,制作出各种高性能,平滑过渡的动画效果。下面就针对来介绍下使用来实现动...

    张汉庆张汉庆 评论0 收藏0
  • 字体图标(font-icon),你还有什么理由不使用它?

    字体图标(font-icon),你还有什么理由不使用它?

    摘要:自己制作字体图标的时候有需要注意这些阿里图标库的图标多,免费但是编辑器不如好用。建议设计师对于一些常用图标直接去阿里图标库找,下载文件即可。 优点 下面的简介来自,著名字体图标库Font Awesome的首页,http://fontawesome.io: Font Awesome...

    felix0913felix0913 评论0 收藏0
  • 《CSS揭秘》:平行四边形

    《CSS揭秘》:平行四边形

    摘要:在视觉设计中,平行四边形往往可以传达出一种动感。问题使用来创建平行四边形。将所有样式应用到伪元素上,然后对伪元素进行变形。为了使伪元素保持良好的灵活性,可以自动继承主元素的属性。 在视觉设计中,平行四边形往往可以传达出一种动感。 问题 ...

    yuxueyuxue 评论0 收藏0
  • html5整理(一)

    html5整理(一)

    摘要:对于虽然用得多,但还是有一些知识点比较混乱,记得不清,所以想专门整理一下浏览器支持最新版本的支持某些特性,将支持某些特性此外,所有浏览器,包括旧的新的,对无法识别的元素会作为内联元素自动处理。实例规定用于表单的密钥对生成器字段。 对于...

    yeyan1996yeyan1996 评论0 收藏0
  • display:none和visibility:hidden属性对比;visibility:coll

    display:none和visibility:hidden属性对比;visibility:coll

    摘要:的属性作用设置元素如何显示。语法说到,想起它和的对比。既然说到属性,他还有和属性值,和对应,不需多说。由于及更早版本只支持事件冒泡,所以通过添加的事件处理程序都会被添加到冒泡阶段。取得元素注意使用了带的事件名和匿名函数 HTML的display ...

    BearyChatBearyChat 评论0 收藏0
  • CSS篇之水平导航

    CSS篇之水平导航

    摘要:关于水平导航已然是老生常谈之问题,看了网上诸多方法,今天小小的总结对比了一下现有方法的优缺点。问题一个最简单的结构如下,请实现水平导航。缺点,和方法一样,会出现空白间隙,解决方案如上,因为是行内元素,所以不能设置宽高,比较局限。 关于...

    李义李义 评论0 收藏0
  • 《CSS揭秘》:菱形图片

    《CSS揭秘》:菱形图片

    摘要:菱形图片在网页设计中,把图片裁切成菱形主要有两种方法。图片需要扩大倍去填满整个菱形区域裁切路径在线编辑使用元素嵌套方案虽然可以实现目的,但是兼容性并不好,如果图片不是正方形,结果就会严重变形。 菱形图片 在网页设计中,把图片裁切成菱形...

    GraphQueryGraphQuery 评论0 收藏0
  • css3整理

    css3整理

    W3C的CSS3规范仍在开发,但是,许多新的CSS3属性已在现代浏览器使用 CSS3边框 border-radius border-top-left-radius: 2em 0.5em box-shadow:x-shadow y-shadow blur spread(阴影尺寸,可选) color inset(outset外部阴影,可选) border-image borde...

    X1nFLYX1nFLY 评论0 收藏0
  • input宽度自适应的问题

    input宽度自适应的问题

    摘要:在很多地方看到过这样的问题,就是关于宽度设置的问题。如图,图中黑色框就是设置了后,输入框的展现,很是蛋疼。可以移步到查看更多文章 在很多地方看到过这样的问题,就是关于input宽度设置的问题。 如图,图中黑色框就是设置了100%后,input输入框...

    xushaojieaaaxushaojieaaa 评论0 收藏0
  • js获取字符串的字节数(适合用于多行文字省略号)

    js获取字符串的字节数(适合用于多行文字省略号)

    function GetBytes(str) { var len=str.length; var bytes=len; for(var i=0;i255) bytes++; } return bytes; } alert(GetBytes(你好,as));

    caigecaige 评论0 收藏0
  • 《CSS揭秘》:切角效果

    《CSS揭秘》:切角效果

    摘要:切角效果切角效果是一种常见的视觉风格设计。但是现在在里,依然无法简单的生成切角效果。原文位于揭秘切角效果。裁切路径方案使用裁切路径可以在裁切任意多边形,下面的代码可以切除和上文一样的效果。改变切角深度时需要同时改变个地方。 切角效果 ...

    JerryZouJerryZou 评论0 收藏0
  • CSS之伪类元素

    CSS之伪类元素

    摘要:再来一枚栗子,八卦图,哈哈这里换成发现效果是一样的其中学到的小技巧不仅仅包括伪类元素的使用,还有如何画一个圆,用来控制就好了,一般设置成或都能达到画圆的效果。效果图如下好啦,今天学到得不少呢,继续怀挺 近期在做各大公司Web前端笔试题的...

    CastlePeaKCastlePeaK 评论0 收藏0
  • 关于某题左列定宽右列宽度自适应布局的学习

    关于某题左列定宽右列宽度自适应布局的学习

    摘要:今天群里有人做题发了一道题由于最近在学习布局就不禁研究了起来题目如下已知结构如下以下哪些可以实现左列定宽右列宽度自适应的布局左列右列选项选项选项选项全部都试过一边了首先是左列定宽的条件这个条件在平时看其实都似乎没什么问题起码在我们大屏...

    adam1q84adam1q84 评论0 收藏0
  • 清除浮动的可用方式

    清除浮动的可用方式

    摘要:清除浮动的可用方式测试浏览器正常格式的代码显示如下图片描述但是对和应用后浮动的影响显而易见使元素从正常的文档流中删除,但是依旧会占据空间。 清除浮动的可用方式 (测试浏览器:FF) div0 div1 div2 this is a paragraph ...

    wizChenwizChen 评论0 收藏0
  • 前端面试之CSS总结(上)

    前端面试之CSS总结(上)

    摘要:重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结 由于最近在准备前端方面的面试,所以对自...

    琛h。琛h。 评论0 收藏0
  • CSS 各种定位(position)方式的区别

    CSS 各种定位(position)方式的区别

    摘要:绝对定位元素从文档流删除,并相对于包含块定位。固定定位元素从文档流删除,并相对于浏览器视窗定位,因此不随文档滚动而移动。 定位(position) position: relative/absolute/fixed/static/inheri absolute :生成绝对定位的元素, 相对于最近一级...

    i_garfileoi_garfileo 评论0 收藏0
  • circle_clock 简单canvas实现圆弧时钟

    circle_clock 简单canvas实现圆弧时钟

    摘要:渣渣成品图最近对于圆形有种特别的感情呢因为写了个就像到了用来做时钟大概会比较有趣吧所以就着手写了个这样的一个东西大概代码上错漏还是蛮多的接下来分享下关于如何开发一个圆形时钟条吧使用这次就没有采用的方法来实现圆环了因为我想要做多层嵌套的...

    boredreamboredream 评论0 收藏0
  • 最简单的css reset

    最简单的css reset

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, s...

    wfc_666wfc_666 评论0 收藏0
  • 使用CSS生成图标

    使用CSS生成图标

    摘要:理解这一点让上边和下边也变成三角形就简单了,将元素的属性设为现在上下左右个边框都是三角形了。实例二制作快进按钮效果为了减少页面的元素,我们可以只提供一个元素实现第个三角形,然后借助的伪类实现第个三角形。 有一次笔者在参加前端面试的过程...

    helloworldcodinghelloworldcoding 评论0 收藏0
  • 对css居中的一点总结

    对css居中的一点总结

    摘要:为了更好的加深对居中的理解,搜集和阅读相关资料,发现不错的文章将其整理出来。 在学习前端的过程中,发现元素和文本的水平居中和垂直居中,是经常会出现的问题,在实际工作中也会经常碰到。居中的技巧有很多,但在编写代码的过程中,发现有时候技巧...

    BenCHouBenCHou 评论0 收藏0
  • 关于chrome记住密码的规则

    关于chrome记住密码的规则

    摘要:另外的输入框内容是共享的,共享管理密码中被记住的当前站点下的密码。注意,不能再上识别,需要做兼容性考虑,在网页初始化的时候处理下就好了,对于浏览器,在标签上使用用后,浏览器是不会提示记住密码的。 最近在做项目表单部分,发现选择chrome记...

    taowentaowen 评论0 收藏0
  • 【译】浏览器渲染:repaint,reflow/relayout,restyle

    【译】浏览器渲染:repaint,reflow/relayout,restyle

    摘要:屏幕的变化就被称为或者是。而浏览器的目标之一就是减少以及的负面影响,其中的一个策略就是干脆不做,又或者说至少不是现在做。但有时脚本语句会破化浏览器优化,并使其刷新队列以及执行所有批处理的改变。 **首先说翻译这篇文章的目的其实是,之前回...

    godlong_Xgodlong_X 评论0 收藏0
  • 就这样,我把4000张美女和帅哥照片下载本地了

    就这样,我把4000张美女和帅哥照片下载本地了

    摘要:什么是是一个利用语法在命令行下工作的文件传输工具,年首次发行。它支持文件上传和下载,所以是综合传输工具,但按传统,习惯称为下载工具。支持的通信协议有和。今天就这样我要去筛选一下我下载的那些照片了 今天在看 增长刺客 的时候,看到一款推广...

    lanffylanffy 评论0 收藏0

热门文章

<