金丫-CSDN博客

原创 css布局小技巧

多行文字居中问题1，普通的单行文字居中<style> text-align:center; line-height:"height";<style>2，多行文字居中.parent{ text-align:center; line-height:'height';}.children{ display:inline-block; line-heig

2017-10-28 15:02:17 253

转载 3d转换（立方体旋转效果）

Css3d转换，立方体效果：1，重要的属性：perspective、translateY、preserve-3d、perspecctive-origin2， rotateX()为正值绕x轴顺时针旋转，负值逆时针旋转；如奥运会体操单杠项目；rotateY()为正值绕Y轴顺时针旋转，负值逆时针旋转；如钢管舞；rotateZ()从视觉上看，rotateZ()让元素顺时针或逆时针运动；

2017-07-26 09:12:14 1264

原创 JS01实现基本选项卡

1，选项卡举例 2,html部分： ` Title .now{ background-color: yellow; } div:nth-child(1){ display: block; } div:nth-l

2017-07-21 21:47:38 325

原创 css3的简单动画效果（animation和transition）

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。（1）平移translate(x值，y值)（2）旋转rotate(角度) ex:rotate(45deg);正数为顺时针旋转。（3）倾斜skew(水平倾斜，垂直倾斜) ex:skew(20deg,3odeg)原点为盒子的中心点（水平方向为y轴，垂直方

2017-07-18 21:49:28 633

原创 css选择器与优先级

1，属性选择器 [ ]是属性选择器的标志E[attr=”val”] E的特定属性值为val;扩展：^=;$=;*=;2，伪类选择器：是伪类选择器的标志举例：li:first-child 选择元素为li，且它是父元素下的第一个子元素；扩展：li:nth-child(3n) 选择元素为li，且它的位置是3的倍数； li:nth-child(-n+5) 位置为前5个

2017-07-18 11:14:04 457

原创阿里巴巴矢量图标的应用

1，打开阿里巴巴矢量图标网址： http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&type=1 2，选择需要的图标加入购物架，下载到本地；项目引用 1，打开下载压缩包中的demo.html 2, 3,css使用font-face声明字体 4,css定义使用iconfont的样

2017-07-17 14:01:44 538

原创背景图片的使用

要实现如图所示样式，已知左侧白色小图为图片；语句为：background:#FF6F3D url(“../img/second/qiandao.png”)15px center no-repeat; 使文字“签到”不与图片重叠，即使盒子左内边距padding-left:20px;

2017-07-14 14:51:49 237

原创前端页码栏的制作

1，先实现一个最简单的页码栏：实现效果如图：代码如下：页码导航条 .page-bar { padding: 0; margin: 0; width: 348px; height: 30px; bor

2017-07-14 11:23:01 721

原创 bootstrap的加载

可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当点击这个链接时，会看到下面两个链接：（1）Download Bootstrap：下载 Bootstrap。点击该按钮，可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。（2）Download Source：下载源代码。点击该按钮

2017-07-12 17:14:57 1416

转载雪碧图的使用

如何使用雪碧图，给页面加上图标？只需要三步1，设置标签的宽度和高度width:18px;height:18px;这里的18px只是示例值，是图标的真实大小，需要具体测量。提示：如果是行内标签，需要设置display为inline-block。2，设置图片路径background-image : url(../img/sprite.png);background-repeat : no-re

2017-07-12 17:03:04 514

weixin_37552710的博客