css中太阳升起月亮落下

2024-08-13

使用css3 实现太阳升起落下效果

<!DOCTYPE html><html style="overflow: hidden"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style> body { width: 100%; height: 100%; background-image: url("img/p

相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享下,大神勿喷,我只是路过的. css中display属性在W3C教程上有简要说明:http://www.w3school.com.cn/cssref/pr_class_display.asp:当然我是觉得讲的不够详细,也有部分可能没深度用过的. display属性取值有:block,inline-b

css中overflow:hidden的属性可能会导致js下拉菜单无法显示

css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不会显示供查看内容的滚动条. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容. 另外参考: http://segmentfault.com/q/1010000000264300 http://bbs.blu

总结下对我对于CSS中BFC的认知

首先第一个,什么是BFC? BFC的全称叫Block Formatting Context (块级格式化上下文)BFC是css中隐含属性,开启BFC后元素会变成一个独立的布局环. 简单来说,它是一个独立渲染的区域,在这个区域的元素和外部的不相干,即使子元素怎么写怎么设置也不会超出父元素的内部,举个简单例子这个独立的区域相当于个房间,里面的人出不去外边的人进不来. 使用方法(推荐) overflow属性的auto / scroll / hidden这三个属性都可以让父元素生

css中的浮动以及清除浮动

对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也会去复习以前的知识,这是真正会让我们有所提高的一个过程,是所谓温故而知新.那么在学习的过程中也看了很多大神的博客,这里就来总结一下我个人对于float的理解; css的浮动使我们在布局的时候经常会用到的一个属性,在大量的使用过程中,我们可能只是一知半解的去使用,或者使用的时候得到了自己想要的结果就绝

CSS中的定位与浮动

CSS中的定位与浮动本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:static,相对定位:relative,绝对定位:absolute. static: 采用默认定位时,一般可以不用设置position样式. 各个元素是按照文档流的形式从上往下排,同时保证块状元素独占一行的原则. relative : 生成相对定位的元素,相对于其正常位置进行定位,同时配合top, b

CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画

最近一直在使用 css-doodle 实现一些 CSS 效果. css-doodle 是一个基于 Web-Component 的库.允许我们快速的创建基于 CSS Grid 布局的页面,以实现各种 CSS 效果(或许可以称之为 CSS 艺术).后续几篇文章可能都会与之有关. 当然,本文的主角并不是 css-doodle. CSS本身一直在快速发展更新,标准也与时俱进,各种新特性层出不穷,为了能够使用 CSS 来创造各种布局实现各种形状,除了合理运用及搭配各个属性之外,去理解压榨每个属性的每个细节

css中的浮动与三种清除浮动的方法

说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个. 对于这种现象一般不用处理. 2,margin塌陷现象: 如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移. 解决方案: 1.0给大盒子加一个边框border属性. 2.0给大盒子设置一个overflow

对CSS中的Position、Float属性的一些深入探讨

对CSS中的Position.Float属性的一些深入探讨对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方.本文主要对这两个属性使用上的一个介绍以及两个属性交叉使用上的一些探讨. 本文主要探讨点: Position.Float属性的基本使用方法 Position.Float属性对元素所造成的影响 Position.Float属性交叉使用上面的影响 Position.Float属性使用上的小技巧

浅析CSS中的BFC和IFC

1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性决定,box的类型分为block-level box 和inline-level box(不包括css3的时候).不同类型的box参与不同类型的formatting context布局. Block-level elements are those elements of the source do

CSS中一些常见的兼容性问题

CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack. CSS hack主要有三种:IE条件注释法.CSS属性前缀法.选择器前缀法. (1)IE条件注释法,即在正常代码之外添加判别IE浏览器或对应版本的条件注释,符合条件的浏览器或者版本号才回执行里边的代码. 1 <!--[

CSS 中关于background 属性功能

background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像这个属性是我们用的最多的属性设置背景图像有两个方式 background: url("img/01.jpg") ; 或者 background-image: url("img/01.jpg"); background-color 定义背景颜色 (三个属性) 属性为元素设置一种纯色.这种颜色会填充元素的内容.内边距和边框区域,扩展到元素

css中的负边距

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的.本文非常基础,老鸟可以略过. 负边距在普通文档流中的作用和效果那些没有脱离文档流的元素(指不是浮动元素也不是绝对定位.固定定位的元素等),其在页面中的位置是跟随者文档流的变化而变化的.看下面这幅图: 负边距对这些由文档流控制的元素的作用是,会使它们在文档流中的位置发生偏移,但这种偏移不同于相对定位

CSS中不定宽块状元素的水平居中显示

CSS中不定宽块状元素的水平居中显示慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法第一种是加入table标签任务是实现div元素的水平居中, 初始代码如下 <div> 设置我所在的div容器水平居中 </div> 使用table标签实现的代码如下 <table> <tbody> <tr><td><div> 设置我所在的div容器水平居中 </div>

CSS中"!important"的使用

本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样. 首先,先看下面一段代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content

CSS系列：CSS中盒子模型

盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构在CSS中,一个独立的盒子模型由content(内容).border(边框).padding(内边接)和margin(外边距)4个部分组成. 一个盒子实际所占的宽度(或高度)是由“内容 + 内边距 + 边框 + 外边距”组成的.在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小,并且对

CSS系列：CSS中盒子的浮动与定位

1. 盒子的浮动在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧.同时默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度来决定. float: left; 可以使用clear来清除浮动: clear: left | right | both; 2. 盒子的定位在CSS中有一个position属性,

CSS中position的4种定位详解

大家都知道,css中的position有4种取值,分别是static.fixed.relative.absolute. 详细解释: static:相当于没有定位,元素会出现在正常的文档流中. fixed:元素框的表现类似于absolute,但是fixed是相对于视窗本身,也就是浏览器窗口而定位的.所以,采用该定位的元素在页面下拉的时候,其位置并不会发生变化. relative:生成相对定位的元素,相对于元素本身的位置进行定位,它原本所占的空间仍然会保留. absolute:生成绝对定位的元素,相

CSS中对图片(background)的一些设置心得总结

写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接拖到html里,这就需要对图片的css样式进行一些调整,鉴于我总是记不住一些样式属性而无法让图片按我的想法摆放,不得已每次都要百度一下,几次下来,让我很是恼火,于是专门整理了一些css中关于图片的一些属性设置,置于此,以供下次望及时查看(废话真多): css2中关于background的属性有: b

在CSS中定义a:link、a:visited、a:hover、a:active顺序

摘自:http://blog.snsgou.com/post-2.html 以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确. 给出我试的顺序,可能会对大家有一些帮助: A:link { color: #000000; TEXT-DECORATION: none } A:visited { COLOR: #000000; TEXT-DECORATION

CSS中不为人知Zoom属性的使用介绍(IE私有属性)

其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的重叠等. Zoom的使用方法: zoom :? normal | number normal : 默认值.使用对象的实际尺寸 number : 百分数 | 无符号浮点实数.浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值