Css
前端基础-css（3）
一、文本属性和字体属性（常用的）1、文本属性 text-align:left|right|center|justify（两端对齐，只适用于英文）; /*对齐方式*/ color:色值; /*文本颜色*/ text-indent:2em; /*首行缩进，建议单位...
前端基础-css（2）
一、标准文档流 宏观的将，我们的web页面和ps等设计软件有本质的区别，web网页的制作，是个“流”，从上而下，像“织毛衣”。而设计软件，想往哪里画东西，就去哪里画。 标准文档流下...
前端基础-css（1）
一、css的引入方式现在的互联网前端分三层： HTML：超文本标记语言。从语义的角度描述页面结构。 CSS：层叠样式表。从审美的角度负责页面样式。 JS：JavaScript。从交互的角度描述页面行为CSS：CascadingStyleSheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网...
div+css3绘制基本图形
基本图形包括：矩形、圆角矩形、圆形、椭圆形、三角形、值线、弧这些图形的绘制用到了CSS圆角属性，不考虑IE8。下面的实现在chrome浏览器运行通过。 1.矩形比较简单，通过CSS设置宽度、高度、背景色即可。html:<divclass="rectangle"></div>css:.r...
css毛玻璃效果
毛玻璃其实就是磨砂玻璃，能够模糊的看清背后的风景，让人感觉有种朦胧美，让界面看上去有些层次感。比如：高大上啊，接下来肯定是眼馋手痒的过程。。。当然，用ps搞一个全景毛玻璃背景毫无疑问是最省事的，那接下来就没啥事可干了。当然nonono了。毛玻璃无疑就是种模糊了，少不了filterblur。最终效果（chrome）：天气...
网页中多个图标在一张图片上，使用css将各图标显示
现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这确实很常态。如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器的并发连接数是受限的，通常是4~8个，那么图标显示过慢或者超时的情况就会发生。当然了，像采用CDN，或者按照浏览器的并发...
CSS画一个三角形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ...
css如何实现垂直居中样式？
第一种：外层边框部分高度固定，内部块级结构居中html结构：//<!---->注释掉空格<divclass="verMiddleouterLayerWrap"><!----><divclass="innerLayer"></div>style样式：//通用样式...
CSS3布局篇（多列布局）
我们通过学习CSS3，能够创建多个列来对文本进行布局，就像报纸那样排版那样！可以参考详细说明：http://www.w3school.com.cn/css3/css3_multiple_columns.asp如下多列属性：column-count：规定元素应该被分隔的列数。column-gap：规定列之间的间隔。col...
css3布局篇（双飞翼）
大家看到好多电商网站都见过经典三列布局，它也叫做圣杯布局，是KevinCornell在2006年提出的一个布局模型概念，这个在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有以下的几点：1、三列布局，中间宽度就自适应，目的都是左右两栏固定宽度； 2、在执行代码时候，代码是从上...
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...
css制作三角形
这个图形忘了在哪里见过的，不过见过有一些网站有这种图形。我这里做了一个简单的练习，希望帮到有需要的人。代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>图形</title><st...
css内容超出显示省略号
CSS实现单行、溢出显示省略号（…）把要设置的显示省略号的标签，加上以下的属性overflow:hidden;/*超出不显示*/text-overflow:ellipsis;/*超出内容显示为省略号*/white-space:nowrap;/*文本不进行换行*/ ...
css制作旋转风车（transform 篇）
做这个案例之前首先要大概了解CSS的transform的属性transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。看看效果图打开的时候自动旋转，当鼠标经过的时候加快旋转速度，鼠标移开就恢复原来的速度。 参考代码：（为了美观可以自已加上一直背景图，我这里是空白的背景显得...
