2017年08月_zcy_csdn123

原创 CSS3--背景效果

背景效果回顾一下原来的几个属性 background-color:背景颜色 background-position:背景图像的位置 background-repeat:如何重复背景图像 background-image:要使用的背景图片 background-attachment:背景图片随滚动轴移动的方式（移动、不移动、继承）background 新增了4个属性，以便更精细的对背景图

2017-08-31 15:27:07 804

原创 CSS3--多列布局、边框颜色、圆角、渐变效果、阴影反射

多列布局（multi-column layout） <style> .div{ width:60%; column-count:3; column-rule:1px solid black; column-gap:2em; } </style> <div

2017-08-29 18:32:11 1166

原创 CSS3--字体字符效果等

@Font-face 特性可以用来加载字体样式，并且他还能够加载服务器端的字体文字（这个功能挺新颖）。<p><font face="arial">arial courier verdana</font></p>对比下以前的写法<p><font style="font-family: arial">arial courier verdana</font></p>获取服务端字体@font-face

2017-08-29 16:29:40 293

原创 CSS3的新特性--选择器

CSS3出来很久了，但是因为本人前端小白，对大部分CSS3的特性并不是很熟悉，所以在实际开发中使用的也不是很多，但CSS3的很多特性会使开发变得共容易（要不然出CSS3干什么呢（摊手））国际惯例介绍篇文章：https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/ 文章是对CSS3新特性的总结，并且配有一些小例子，很不错。接下来

2017-08-28 12:06:04 435

原创不同jquery插件版本不同造成的问题

最近在开发中遇到一个问题：我在同一个页面已用了两个jquery插件，但是这两个插件使用的jquery版本不同，所以总是不能同时生效。第一个想法是找一个都可以用的版本，但是我从1.几版本到3.几都试了，返现并不好使（说好的向下兼容性呢）。于是我想到了或许使用iframe可以实现。 iframe iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。可以理解为一个页面中的另一个页

2017-08-28 11:25:50 642

原创设备像素，分辨率，设备独立像素，CSS像素

前言这两个属性说难不难，说容易又不易容。但如果你弄明白了这个，你就明白了一些东西，一些你常常用但却不知道为什么的代码。下面我们还是先从它们各自的定义开始说起，其实虽然标题里是三个名词，但我们接下来只聊两个就可以了，为什么？看完你就知道了。基本定义设备像素：设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。

2017-08-24 17:31:26 416

原创 viewport

viewport 是meta标签name属性的一个值。基本用法<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素） height

2017-08-24 17:22:30 458

原创 meta标签

meta元素标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School 介绍一篇关于meta的文章：https://segmentfault.com/a/1190000002407912 下面写一下自己理解，作为学习使用。（基本为上篇文章抄写，为了给自己加深印

2017-08-24 17:11:19 204

原创 @media 媒体查询

目前各种屏幕尺寸的移动设备，笔记本，台式机，还有前后端分离的思想，要求页面尽量多的适应设备屏幕，这就会用到Media Query 媒体查询。先介绍一片文章：http://www.w3cplus.com/content/css3-media-queries 写的很具体下面是我自己对@media的理解我常用的引入方式：<link href="print.css" media="print

2017-08-23 18:37:50 389

原创 tab选项卡 ‘上一步‘ ‘下一步形式’

今天工作遇到个需求，就是在一个页面中用上一步，下一步实现页面内容的转换，这让我一下就想到了tab选项卡，两者很像，只不过用来用来转换内容的不再是上面的标签，而且“上一步”“下一步”这样的button。公司用的layui 本来想修改一下，但无奈不知道如何阻止框架tab标签的点击事件（如果有知道的大神请告诉我，不想重写框架的JS），所以就照样样式自己写了标签，但没有点击事件。说下思路：和ta

2017-08-22 19:00:26 8051

原创 ul的li float后居中的问题

ul li 水平排列并居中是一个常常会遇到的布局。经常作为菜单栏、导航栏、tap标签栏等等。虽然li float可以实现，但都比较麻烦，并且因为浮动了稍有不注意可能会影响布局，所以今天介绍个比较简单的方法。 display:inline-block 方法将li display:inline-block，并且在ul 上用text-align 既可以实现水平排列并居中。/* css */

2017-08-22 15:57:58 2293

原创 div水平垂直居中

我写着这篇的目的主要是自己在复习一遍水平垂直居中。并有借鉴http://blog.csdn.net/freshlover/article/details/11579669中的方法。一、已知div宽高例子:下面代码中的method1 父元素relative，子元素absolute 子元素：①top：50% left：50% 这会使子元素相对于父元素向右向下移动父元素50%宽高的距离，此时

2017-08-15 18:57:58 308

原创父元素position:absolute/relative的区别

最近在写div水平垂直居中的时候发现一个问题：就是在父级是absolute的情况下也可以实现。于是就想搞清楚父级position的relative和absolute的区别。先看一下position这个属性，它有四个值： static:会忽略所有top left right bottom的设置，但margin和padding是好使的 fixed:相对于浏览器窗口定位，不会受滚动条的影响。 rel

2017-08-15 11:50:47 3933

zcy_csdn123的博客