css
翊沐
拆分这两个过程是最简单的,因为构建一个静态的版本仅需要大量的输入,而不需要
思考;但是添加交互功能却需要大量的思考和少量的输入。
展开
-
css position属性 以及 float、display、position的问题整合
在css中,有两个属性可以破坏文档流:一个就是float属性,另一个就是position属性。假设一个父级元素未定义高度(默认div的宽度是100%,即最大化;高度是最小化,即如果div没有设置高度,则其虽然占据物理空间,但是在页面上显示不出来),它的高度就要由子元素来填充,这时,如果设置子元素float属性,子元素就会脱离文档流,当所有的子元素都脱离了文档流,父级元素的高度就变为0,无法显示原创 2015-07-02 13:02:16 · 1430 阅读 · 2 评论 -
针对video标签改变其缩放比例比如4:3
.border{ position:relative; width:100%; height:0; padding-bottom:75%; //因为padding和margin等受width影响,父容器固定后,子标签可以进行填充。此处75%是3/4,其他比例可以依照此法。 } video{ position:absolute; left:0; top:0; width:100原创 2015-11-16 15:15:51 · 10782 阅读 · 0 评论 -
css中box-shadow属性与text-shadow属性
box-shadow就是在原来的块下复制了一份相同大小的块,放在原来的块下面,然后相对于左上角移动,做出类似阴影的效果,然后添加阴影的宽度以及阴影扩散的半径,最后就是颜色,另外一个inset属性放在最后讲。box-shadow有6个属性值:h-shadow,v-shadow,blur,spread,color,inset。其中h-shadow,v-shadow负责上下移动,可以为负值,是以原创 2015-07-11 20:39:29 · 1528 阅读 · 0 评论 -
关于css三角形的制作
网页中三角形使用的地方很多,比如弹出的消息对话框的小箭头、网站后台的聊天弹框。制作三角形我们可以有两种方法,一种是通过美工处理,将三角形制作出来,然后通过设置背景图片,如前一篇所提到的sprite图的制作。今天去面试的时候帮面试公司调试意外得到经验,同一行的inline-block元素我们可以通过改变margin的值可以是的两个图片任意连接。下面以正方形为例,一会讲解三角形。网页原创 2015-07-02 23:00:34 · 382 阅读 · 0 评论 -
为什么要初始化css样式。
首先我们要知道,每一个html标签都有其自己的默认样式,而css则可以改变html的样式。比如一个div元素,它存在默认的margin值,而设计需要其对齐左上角,那么就要修改其margin值,对于大量的div设置就很麻烦,所以初始化css样式就很重要。其实,各大门户网站都有其初始样式,只要通过chrome调试中的resource标签获取其css样式表即可。各主流浏览器下的默认css样式原创 2015-07-02 11:13:48 · 5078 阅读 · 0 评论 -
css 雪碧图sprite的使用
我们知道,像淘宝这类电商网站,产品的出售会有一些分类,每个分类都会用一个小的缩略图表示,如下图所示如上图所示用黄色荧光笔画出的(原谅我电脑没装fireworks,大家凑合看),这些图一般都会用专门工具ps或者css sprite贴图工具放在一个图片里。我们在ul的li标签前面添加任意标签,本处用,设置宽高,将制作好的图片当作标签的背景,通过改变background-position属性,移动图原创 2015-07-02 12:19:03 · 1992 阅读 · 0 评论 -
如何实现div块的居中(水平加垂直居中)
今天去面试,HR随意出了几个问题,其中就有如何实现div的居中。我当时想,水平居中我是会的 body { height: 100%; padding: 0; margin: 0; } #container { width: 800px; height: 600px; background-color:#12eeed;原创 2015-07-02 17:33:03 · 1016 阅读 · 1 评论 -
关于inline-block元素的行高问题
以chrome浏览器作为调试工具,打开如下页面:网页 div{ width: 150px; background: #456789; margin: 200px; } span{ display: inline-block; } .span1{ width: 115px; height: 115px; background: #000fff; text-原创 2015-07-03 08:50:03 · 2757 阅读 · 0 评论 -
display的值以及作用。
display的值有很多,常用的有五种:display:none 隐藏元素 (display:none 是彻底地清除元素的物理位置,使其从文档流中消失,而visibility:hidden和opacity:o保留元素的物理位置隐藏元素)display:block 块级元素 display:inline 内联元素display:inline-block 行内块元素 (bloc原创 2015-07-02 10:46:39 · 1687 阅读 · 1 评论 -
滚动视觉差原理
首先要知道一个apiwindow.scrollTo(x,y)其中x,y分别为滚动条向x,y方向移动的位置,如果网页宽度不够则不出现滚动条,设多少都没用。$(function() { $(window).scroll(function(){ var scrolled = $(this).scrollTop(); $('#area1').css('top',(0原创 2015-11-19 19:07:38 · 2824 阅读 · 0 评论