第十六章 1、 输入和元素 电子邮件框 搜索框 电话框 <inputtype="tel">URL 框 <inputtype="url">以下元素得到了部分浏览器的支持日期 数字 范围 数据列表 下面的输入或者元素得到的支持很少， W3C 指出它们在 2014 年定案之时很可能不会列入 HTML5颜色 全 局 日 期 和时间<inputtype="datetime" />局部日期和时间月 时间 周 输出 2、 属性： 1) accept限制用户可上...
CSS3充分吸收多年了web发展的需求，吸收了很多新颖的特性。例如border-radius css3特性中最令人兴奋的莫过于选择器的增强，例如属性选择器可以根据某个属性值来选择标记，位置选择器可以根据子元素的位置来选择标记。 在目前很多使用的很多浏览器，例如IE7,主要支持css2.大部分属性选择器都不理想。 正是因为浏览器对css3的兼容性问题。各个浏览器都未对其做更好的标准支持。 jQuery通过预先的javascript编程，提供了几乎所有css3标...
CSS3充分吸收多年了web发展的需求，吸收了很多新颖的特性。例如border-radius css3特性中最令人兴奋的莫过于选择器的增强，例如属性选择器可以根据某个属性值来选择标记，位置选择器可以根据子元素的位置来选择标记。 在目前很多使用的很多浏览器，例如IE7,主要支持css2.大部分属性选择器都不理想。 正是因为浏览器对css3的兼容性问题。各个浏览器都未对其做更好的标准支持。 jQuery通过预先的javascript编程，提供了几乎所有css3标...
web前端开发者最最注的内容是三个：HTML、CSS与JavaScript，他们分别在不同方面发挥自己的作用，HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用，有点“SRP单一职责”的意思，如字体大小应该是CSS控制的，就不应该使用HTML标签完成，如果CSS能解决的问题尽量不要用JavaScript完成。一、CSS3概要 CSS（Cascading Style Sh...
我觉得CSS3很不错，自己也稍微看过，并且尝试过一些属性。对我自己而言，我没有勇气说我学过CSS3，我觉得任何自己看来很小的事情，也只是站在自己的角度来评判。就算的是“简单的”HTML在我看来也是很值得研究的，只有时刻保持一个谦逊的姿态，才能够看得更远，走得更稳。 在这里要感谢一下网站： w3cplus，W3School ，W3C 等等一些网上的教程啊博客什么的（还有好多就不一一列举了），我算是从这些地方开始接触传说中的CSS3和...
我觉得CSS3很不错，自己也稍微看过，并且尝试过一些属性。对我自己而言，我没有勇气说我学过CSS3，我觉得任何自己看来很小的事情，也只是站在自己的角度来评判。就算的是“简单的”HTML在我看来也是很值得研究的，只有时刻保持一个谦逊的姿态，才能够看得更远，走得更稳。 在这里要感谢一下网站： w3cplus，W3School ，W3C 等等一些网上的教程啊博客什么的（还有好多就不一一列举了），我算是从这些地方开始接触传说中的CSS3和...
首先说first-child与last-child，这两个选择器很容易明白，就是父元素下的第一个子元素和最后一个子元素。而nth-child和nth-last-child则是父元素下指定序号的子元素，甚至第偶数个、奇数个子元素精选样式的制定。 /*选择器写法示例*/ nth-child(n) //正数第n个子元素nth-last-child(n) //倒数第n个子元素nth-child(odd) //正数下来所有的第偶数个子元素nth-last-child(even) //倒数上去的第奇数个子元素 那么nth-of-type与n...
学习来源:慕课网http://www.imooc.com/view/240 先看效果图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ HTML结构 1 2 3 4 Shadow Effect 5 6 7 8 9 10 11 CSS样式(省略了各浏览器前缀) 1 /*通用类*/ 2 body { font-family: Arial; font-size: 20px;} 3 body,ul {margin: 0; padding: 0; list-style: none;} 4 .wrap {width:70%; he...
用的时候首先记得加前缀：-webkit-，-moz-，-o-，-ms-，因为目前各个浏览器对CSS3和HTML5的兼容性还是参差不齐。边框：1.border-radius(实心圆的实现)2.box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式](用逗号可叠加效果)3.border-image：url(border.png) 70 70 70 70 round /repeat/stretch(由外到内切片的偏移量，分别为上右下左)颜色：1.RGBA（多了一个透明度）2.颜色渐变：linear/radia...
今天有空把前几天学的东西发一下，都是一些简单的东西，但是千里之行始于足下，我虽然走的慢，但是未停下前进的脚步~~~~~~~ 下来看下我做的“淡入的文字”最终动态效果： 上面这个动画效果制作的过程是： （1）先自定义一个透明度从0到1变化的动画，然后在animation中调用这个动画效果 （2）注意不同行文字出现的时间先后，这个通过animation中延时属性可以实现 （3）规定文字最终动态为动画的最终显示状态，否则文字显示完...
前几天看到一个企业招聘的动画觉得很炫，里面有个企业介绍的文字是用飞入的效果做出来的，今天尝试了写了一下，感觉还不错~\(???)/~啦啦啦 下面来看我做的动态效果： 其实上面的效果很简单的，我的截图软件有问题，所以不是很清晰，但是大概的效果出现了~~~屏幕颜色从红变白是因为我把鼠标从页面上移到截图软件上关闭截图，不要被这个干扰~~~~ 一、页面的主体布局 左右淡入的企业介绍 ...
今天把页面遮罩的效果发一下，之前遮罩都是用JS实现的，忽然发现CSS3里面的box-shadow属性除了做立体阴影外，还可以做页面的遮罩~~~~ 下面来看一下完成的动态效果： 从上图可以看出，就是当鼠标悬浮在按钮上时，会出现整个页面的遮罩，当然调一下透明度就是网页中经常看到的当鼠标悬浮在一张图片上时，周围的其他图片都被遮罩了，这样就达到了突出这张图片的效果，其实这个效果做出来很简单~~~~~ 一、主体程序： ...
好吧，我最近没有什么进步，其实吧，我在偷懒耶，这几天太冷落代码了，都在做设计，晕乎乎的， 下面来看看我以前写的一个上下滑动展开的按钮效果： 这类的效果经常会在一些网站页面下载按钮处看到，当你鼠标悬浮在下载按钮时，会提醒你是否已注册，或者点击登录什么的小提示~~~~~ 一、页面的主体布局 我是上面 鼠标放在我上面试试...
第七章，CSS构造块 CSS里有控制基本格式的属性（font-size，color），有控制布局的属性（position，float），还有决定访问者打印时在哪里换页的打印控制元素。CSS还有很多控制项目显示或消失的动态属性，可以用于创建下来列表和其他交互性组件。 构造样式规则 样式表中的每条规则都有两个部分：选择器和声明块。 选择器决定哪些块受影响，声明块由一个或多个属性-值对组成，指定应该做什么。 ...
第十一章，用CSS进行布局 开始布局注意事项 1、内容与显示分离 2、布局方法：固定宽度和响应式布局 固定宽度，整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面，使用百分数定义宽度 3、浏览器问题 注：HTML5 shiv 是少有的必须在head中加载JavaScript的情况之一，否则就不起作用。 关于HTML5 shiv： 与其他主流浏览...