![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
影之歌NO1
这个作者很懒,什么都没留下…
展开
-
CSS布局
一些基本概念viewport: 展现网页的媒体,比如窗口或者某个区域,它的大小是有限制的,为了不被平台术语所束缚,我们给他起名viewport,中文意思就是视口。canvas: 而我们在渲染网页的时候通常并不知道我们需要多大的空间,而且这些空间通常尺寸会超过viewport的大小,于是实际上我们需要设想一个无限大的画布来绘制我们的元素,我们把它称为canvas。box: element(元转载 2013-05-13 08:22:15 · 367 阅读 · 0 评论 -
前端知识体系及修炼攻略
前端目录(?)[+]前端简介Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。随着人们对用户体验的要求越来越高,前端开发的技术难度越来越大,Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。早期的前端其实就是Table布局,后来发展到所谓转载 2014-02-18 12:09:23 · 882 阅读 · 0 评论 -
border-image
CSS3中有关于border的属性我们一起学习完了圆角border-radius和边框颜色border-color,只剩下最后一个边框图片border-image。今天我们就一起来学习这个border-image的属性。学习完这个border-image以后,大家一定会很兴奋,因为他改变我了们以往设置border的效果,以前我们border只能简单的设置一些纯色或几种简单的线型(如solid,do转载 2014-04-24 13:35:19 · 927 阅读 · 0 评论 -
移动端小技巧
一 :margin-top和margin-bottom值,对内联元素没有影响。padding-top和padding-bottom值,在内联中,不改变元素的尺寸,但背景颜色会改变。二: img固定高度或者宽度,img图片会自动等比缩放。三 :li a的点触事件,在移动端,a的点触高度偏小,方法:设置a为block元素,并设置高度。四:在ios和上android上,系统会自带默认的样式。原创 2014-01-24 17:17:03 · 622 阅读 · 0 评论 -
前端修炼之路
前端简介Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。随着人们对用户体验的要求越来越高,前端开发的技术难度越来越大,Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。早期的前端其实就是Table布局,后来发展到所谓的Div + CSS网站重构,再到现在的让人眼花转载 2014-06-17 14:18:28 · 506 阅读 · 0 评论 -
前端性能优化
###性能优化优秀教程- [5173首页前端性能优化实践](http://ued.5173.com/?p=1731)- [给网页设计师和前端开发者看的前端性能优化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers)- [复杂应用的 CSS 性能转载 2014-06-20 13:35:28 · 541 阅读 · 0 评论 -
css内容垂直居中
将图片放置于一容器中,解决方法如下:1 div属性设置为dipslay:table-cell;vertical-align:middle2 line-height和height一致原创 2014-02-10 17:11:15 · 537 阅读 · 0 评论 -
前端绘图 svg和canvas
前端绘图的技术到目前为止有很多种:canvas、SVG、VML、Flash、Java Applet等。这么多方式,他们之间有什么区别,选择的时候该在什么情形下选择什么方式 比较合适?看了很多文章,简单总结一下。大体思路:先逐一介绍一下各种绘图方式,然后比较一下各种绘图方式,最后给出一个取舍的原则或者建议。本文是在参考了多篇文章之后,根据自己的理解整理的,如有不对的地方欢迎指正。转载 2014-06-20 10:52:48 · 15472 阅读 · 0 评论 -
前端书籍
HTML、CSS 类别书籍,都是大同小异,在当当网、卓越网搜索一下很多推荐。如果感觉学的差不多了,可以关注一下《CSS禅意花园》,这个很有影响力。Javascript 的书籍 推荐看老外写的,国内很多 Javascript 书籍的作者对 Javascript 语言了解的都不是很透彻。这里重点推荐几本 Javascript 书籍: 初级读物:《JavaScript高级程序设计》:转载 2014-08-08 17:25:52 · 395 阅读 · 0 评论 -
双飞翼布局
.main{float:left;background:red;height:300px;width:100%;} .sub{ float:left;background:blue;width:200px;height:300px;margin-left:-100%;} .extra{float:left;background:yellow;width:100px;height:300px;m转载 2014-09-10 10:54:41 · 387 阅读 · 0 评论 -
css3 gradient
CSS3的线性渐变: 一、线性渐变在Mozilla下的应用 语法:-moz-linear-gradient( [ || ,]? , [, ]* .example1 { background: -moz-linear-gradient( top,#ccc,#000);}二、线性渐变在Webkit下的应用 语法:-webkit-linear-gradie转载 2014-02-13 12:08:50 · 487 阅读 · 0 评论 -
css全屏背景
html{background: url(img/bg2.jpg) no-repeat center center;min-height:100%;background-size:cover;background-size: 100% 100%;} body{margin: 0;padding: 0;min-height:100%;}原创 2014-02-10 15:47:38 · 579 阅读 · 0 评论 -
css3弹性盒子模型之box-flex
box-flex是css3新添加的盒子模型属性,它的出现打破了我们经常使用的浮动布局,实现垂直等高、水平均分、按比例划分。但是它有一定的局限性,在firefox、chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz)、chrome(-webkit)。一、box-flex属性box-flex主要让子容器针对父容器的宽度按一定规则进行划分。 111 222转载 2014-02-11 15:07:56 · 1115 阅读 · 0 评论 -
手机开发端要求
1、精通 HTML5和DIV+CSS3,输出页面可兼容主流浏览器;2、精通掌握JavaScript,熟练使用jquery框架进行开发4、熟悉移动web端js框架(jquery Mobile,phoneGap,senchaTouch等);5、熟练使用ajax进行开发,能够写出高性能代码;6、了解至少一门web编程语言,PHP、.net、Java等均可;原创 2013-06-19 16:09:16 · 637 阅读 · 0 评论 -
浏览器兼容性问题
1 半透明 filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; filterI是E的原创 2013-09-10 10:54:56 · 403 阅读 · 0 评论 -
web 权重
权重的规则:HTML标签的权重为1,class的权重是10,id的权重是100.权重是可以叠加的,p的权重是1;div em的权重是1+1=2;CSS的权重选取就近原则,选择最后定义的那个选择符的样式(就近原则为:选择符定义的先后顺序)。.test2{color:green;}.test{color:red;}123456789此处color为red;原创 2013-10-09 15:53:51 · 1052 阅读 · 0 评论 -
行内元素和块集元素
display:inline 。转换为行内元素。对应不显示为 display:nonedisplay:block 。转换为块集元素。对应不显示为 hidden原创 2013-10-09 14:23:40 · 828 阅读 · 0 评论 -
input checkbox radio样式改变
不直接用input自带的样式,自己重写样式,比如用一个div照着设计图,写出需要的样式,选中时的样式切换,用背景图片来改变原创 2013-12-31 11:42:45 · 1523 阅读 · 0 评论 -
常用Css命名规则
下面转载了一些常用的css命,方便要用的时候查看。(html5都根据这些常用结构增加了这些结构标签...) 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:lo转载 2014-01-02 17:30:37 · 377 阅读 · 0 评论 -
JS投票
body,div,a,span{margin:0;padding:0;}.g-pt-10{ padding-top:10px; }.g-ta-c{ text-align:center; }.g-fz-16{ font-size:16px; }.g-d-b{ display:block; }.g-f-l{ float:left; }.g-c-w{ color:#fff; }.g-fz-转载 2014-01-02 17:33:22 · 712 阅读 · 0 评论 -
手机端ul空隙
在移动端的,ul嵌套了3个li,ul中最后的li留有一段空隙,方法:ul:box-border,overflow:hidden;原创 2014-01-21 16:17:01 · 505 阅读 · 0 评论 -
触屏版网站开发要点
所谓的触屏版网站其实也是WebApp的一种展示形式,主要是依赖HTML+CSS+Javascript这三个关键因素来实现,相比较原生客户端程序来说优点就是开发周期短、升级简单、维护成本低,因为从根本上来说WebApp的本质就是一个网站而已。这里就说一下如何开发一个适合在触屏设备上展示的页面.如果有在PC端开发网页的基础那么去处理手机端就很容易上手,这里介绍的是针对手持设备专门处理的页面,而转载 2014-01-25 11:45:44 · 823 阅读 · 0 评论 -
css3 roatae锯齿
在用css3倾斜的时候产生的锯齿现在,在父级有over原创 2014-10-27 15:05:08 · 611 阅读 · 0 评论