Css

CSS3布局篇(多列布局)

我们通过学习CSS3,能够创建多个列来对文本进行布局,就像报纸那样排版那样!可以参考详细说明:http://www.w3school.com.cn/css3/css3_multiple_columns.asp如下多列属性:column-count:规定元素应该被分隔的列数。column-gap:规定列之间的间隔。col...
代码星球·2021-02-24

css3布局篇(双飞翼)

大家看到好多电商网站都见过经典三列布局,它也叫做圣杯布局,是KevinCornell在2006年提出的一个布局模型概念,这个在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它的布局要求有以下的几点:1、三列布局,中间宽度就自适应,目的都是左右两栏固定宽度; 2、在执行代码时候,代码是从上...
代码星球·2021-02-24

CSS3 @media 查询(制作响应式布局)

 这里简单说明一下@media查询。详细说明文档:http://www.runoob.com/cssref/css3-pr-mediaquery.html使用@media查询,你可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@me...

CSS制作红桃心

这里主要用到了before与after属性之前之后代码:<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>画画</title><style>#xing{width:100px;h...
代码星球·2021-02-24

css制作三角形

这个图形忘了在哪里见过的,不过见过有一些网站有这种图形。我这里做了一个简单的练习,希望帮到有需要的人。代码:<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>图形</title><st...
代码星球·2021-02-24

css内容超出显示省略号

CSS实现单行、溢出显示省略号(…)把要设置的显示省略号的标签,加上以下的属性overflow:hidden;/*超出不显示*/text-overflow:ellipsis;/*超出内容显示为省略号*/white-space:nowrap;/*文本不进行换行*/ ...

css制作旋转风车(transform 篇)

做这个案例之前首先要大概了解CSS的transform的属性transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。看看效果图打开的时候自动旋转,当鼠标经过的时候加快旋转速度,鼠标移开就恢复原来的速度。 参考代码:(为了美观可以自已加上一直背景图,我这里是空白的背景显得...

css属性大全(基础篇)

 什么是CSS?CSS全称为CascadingStyleSheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(CascadingStylesheet)简称CSS。在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简...
代码星球·2021-02-24

css 布局,过渡

做了一个小案例,关于我们内边距的处理的,然后再加上一些过渡效果效果:具体实现重点加上这里:具体代码实现:CSS部分:<style>#container{border:2pxsolidsandybrown;width:780px;margin:0auto;overflow:hidden;margin-top:...
代码星球·2021-02-24

00.Web大前端时代之:HTML5+CSS3入门系列~Bug反馈文章

感谢广大网友的热心提醒,现已发现如下错误:感谢“”对画布笔记系列的反馈(QQ:350223285)这个是失误,strokeStyle和stroke对应待续。。。。欢迎提出更多问题,感谢大家~...

08. Web大前端时代之:HTML5+CSS3入门系列 ~ QQ空间时间轴

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打在代码里面了,直接看代码就可以了,后面会说一下CSS3.0系列,这个就当一个引入吧: 简单版本:&l...

FontAwesome 4.4.0 中完整的585个图标样式CSS参考

做一记录,免得每次都去网上搜图标对应的class.在线版本:http://dnt.dkill.net/dnt/font/ ...

08. Web大前端时代之:HTML5+CSS3入门系列~H5 Web存储

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html ...

07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html源码:https://github.com/dunitian/LoTHTML5/tree/master/LoTHTML5/4.HTML5定位定位类型IP定位优点任何位置都可用在服...

06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html我们先看看画布的魅力:  初始画布canvas默认是宽300px,高150px;绘制步骤1.定义一个id<canvasid="canvasOne"wid...