winson的专栏

css选择器常使用的有标签选择器、类（class）选择器、id选择器、组合选择器、伪类选择器等。下面贴上一个小的demo,便于体会各种选择器的使用方法。 定义CSS样式（CSS选择器） p {color: red; font-size: 30px;} /*标签选择器*/ .p {color: green; font-size: 30px;} /*类选择器，

本篇简要介绍一下h5中新增audio和video的使用方法，h4的播放是通过flash完成的。 audio和video的实例演示audio元素示例 您的浏览器太老了，不支持我们的HTML5页面，请更新浏览器！video元素示例还有一些属性，如：播放效果图：

终于到了期待已久的h5了，接下来我会利用空闲的时间仔细的研究一下h5。就从网页结构开始吧。 基本网页结构 ... ... ... ... ... ...

内链样式表 CSS的使用方式 CSS的使用方式 CSS的使用方式 嵌入式样式表 CSS的使用方式 body { background-color:green; color:red;}

本篇讲的是表单的简单使用的一个小demo。很简单，直接上code html表单设计展示 简单的表单示例 用户名： 密码： 兴趣：体育   唱歌 性别：男   女 自我介绍： 这是自我介绍，可以填写一些内容 城

1、使用选择器插入文字内容  在CSS3中，使用before选择器在元素前面插入内容，使用after在元素后面插入内容，在选择器content属性中定义要插入的内容。 例如对H2使用before选择器在H2的前面插入文字“Title”等。   h2:before{ content:"Title"; }  还可以使用content属性追加一个none属性值

昨晚回去花了点时间，系统的学习了一下盒模型，现总结如下。1、盒的基本类型：在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。我们之前所学的div元素和p元素属于block类型，span和a属于inline类型。如： 盒的基本类型 /*div{background: green}*/

所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！浏览器兼容性：E:hover                支持firefox、safari、Opera、ie8、chrome    E:active                 支持firefox、safari、Opera、chrome                      不支持ie8

本篇简要介绍一下css3中属性选择器的使用，例。 CSS3中属性选择器的使用 /*[id*= section1]{ */ /*background: green;*/ /*}*/ /*[id*= section2]{*/ /*background: #ff6600;*/

本篇介绍伪类选择器以及伪元素。1、类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式。比如：p.left{text-align: left} p.rigth{text-align: right}2、伪类选择器 类选择器和伪类选择器的区别在于，类选择器我们可以随意起名，而伪类选择器是CSS中已经定义好的选择器，不可以随意起名。 最常见的伪类选择器：a:l

本篇介绍css3中的动画功能。在CSS3中，如果使用动画功能可以使网页上文字或者图像具有动画效果,可以使背景颜色从一种颜色平滑过渡到另外一种颜色,Transition功能支持从一个属性值平滑到另一个属性值,而Animations功能则支持通过关键帧的指定来在页面上产生更复杂的动画效果。1、transition功能在ss3中，transition允许css的属性值在一定的时间区间内平滑地过渡

所谓兄弟元素选择器：它是用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。使用方式：   ~{   CSS样式 }例如 span~p{ background: green; } 1234656 1234656

本篇结合存储保存数据简要介绍数据保存、读取、清除的一个小demo。 简单的留言板 简单的评论/留言板     js：function saveStorage(id) { var data = document.getElementById(id).value; var time = new Date().getTim

html框架的使用。框架：将浏览器划分成不同的部分，每一部分加载不同的网页，实现在同一浏览器窗口中加载多个页面的效果。作用：加载多个页面。更多使用可参考网上说明，下面给出我做的一个小demo。 html框架的使用 您的浏览器不支持框架下面直接贴上各个部分。top.html 框架

本篇小结颜色属性的一些设置使用。 CSS的常见属性 /* p { color:#ff(红) 66(绿) 00(蓝); } p { color:#f(红) 6(绿) 0(蓝); } p { color:#f60; } p { color:#ff6600; } p { color:#ff0000; } p { color:#

本篇小结css常用属性的字体属性的用法。 CSS常用属性(字体相关属性) /* body{ font-size:20px; } .ha{ font-size:smaller; } h1{ font-size:inherit; } .hb{ font-size:larger; } h1{ font-fa

本篇小结css背景属性的一些设置使用。 CSS常用属性(背景相关属性) /* body{ background-color:rgb(255,255,255); } body{ background-image:url(image/bg.gif); 其中image/bg.gif是图片路径 background-repeat:no-repeat; b

本篇小结css属性的文本属性的一些使用方法。 CSS常用属性(文本属性) div{ width:900px; height:300px; } p{ /*text-align:left; font-size:20px; line-height:200%; text-indent:40px; text-indent是首行缩进 le

本篇小结css属性的边框属性的一些使用方法。 CSS常见属性(边框属性) div{ width:50px; height:50px; float:left; margin-right:10px; background-color:#f61; border-width:10px; border-col

本篇小结css属性的列表属性的一些使用方法。 CSS常见属性(列表属性) /* ul{ list-style-type:upper-alpha; } ol{ list-style-type:disc; } ul.inside{ list-style-position:inside; } ul.outsid

本篇主要介绍div + span 以及盒模型的使用。span：内联元素----包裹其内容。     div是块级元素----占用整行。  盒模型：相当于容器。 Div+Css布局(div+span以及盒模型) body{ margin:0px; padding:0px; } /* div{ background

接着上一篇。说说div + span 的属性以及浮动框的使用。 Div+Css布局(布局相关的属性) body{ padding:0; margin:0; } /* .div{ width:300px; height:300px; background-color:green; position:

本篇主要介绍浮动属性、清除浮动 以及对于溢出的处理方式。 Div+Css布局(浮动以及溢出处理) body{ padding:0; margin:0; } .div{ width:960px; height:600px; margin:0 auto; /*居中处理*/ background-color:#f1

直接上代码： 网页大纲DEMO 网页大纲DEMO 首页 内容页 联系我们 文章主标题 文章子标题 文章正文 文章评论列表

本篇简单介绍一下h5新增元素canvas的使用。1、canvas绘制矩形 canvas绘制矩形 body { margin: 0; padding: 0; } js:/** * Created by winson on 2016/9/11.

本篇主要讲布局相关的样式。1、多栏布局。在css3之前，若要实现分栏的效果，可以使用浮动（float）来实现。但是这样会有一个缺点就是，分栏时造成分栏的几个栏不能对齐。而在CSS3中，可以通过column-count属性来进行多栏布局，这个属性的含义是将一个元素中的内容分成多栏进行显示。使用方法： column-count: 栏目数;兼容性写法： -webkit-col