zhaoyang314的博客

先看一看效果，是不是很炫酷啊？？

最近，因需要用HTML+JAVASCRIPT+CSS实现了一个日历控件，单击上月、下月进行日历切换。当前日期在日历中变颜色标注显示。还是老老套路、老方法，分HML+CSS+JAVASCRIPT三部分代码。这段代码主要包含三个部分，一是头部显示年月，上月、下月切换按钮；二是显示星期一到日；三是日期容器，存在日期。这段代码主要定义了日历的样式，一个主要的方法简述如下：此段代码实现了当月日历情况，单击上月、下月进行月份切换。

我一直将自学的系统叫做CSS框架，其实这是一个Css+Javascript+Html的代码框架，更准确的说应该叫前台框架。这类前台框架，我一直用先写CSS代码，后写JavaScript，最后记录HTML代码，实际在开发中，我喜欢不停地切换Css，Html和JavaScript之间撰写代码，这样不会因为我记性差而忘记，但这样开发有一个毛病，就是效率有点低，整体把握不好。这节主要实现星星评价功能，我采用背景填充+宽度，可现实半颗星。

面板是我们开发中经常用到，也就是页面版面中一块一块的板块。这段代码需要加入我们以前的基础代码中，因为里面有颜色引用，例如： var(–red)。

这一节我们学习切换选项卡，两种切换方式，一种是单击切换选项，一种是鼠标滑动切换，通过参数来控制，切换方法。

这一节，我自学了焦点图效果。焦点图片自动播放，圆点控制切换。鼠标滑动到焦点图片上，停止自动播放功能；划出焦点图片，自动播放功能继续。简单使用的图片展示功能。

用纯CSS实现鼠标经过后出现下拉菜单，二级下拉菜单，简单实用。

首先解释一下什么叫图片懒加载。图片懒加载是一种在页面加载时，延迟加载图片资源的技术，也就是说图片资源在需要的时候才会加载，就是在屏幕显示范围内加载图片，屏幕显示范围外图片不加载。

本小结主要自学了ajax，页面部分刷新，实现动态提交数据到服务器；动态从服务区获取数据。get，post两种传递数据方法，Json、html、text、xml等多种数据格式。

实现的功能是页面中的图片单击，在灯箱中显示，单击按钮上下切换，单击灯箱退出展示，实现步骤还是老样子，三方面工作一是CSS、二是JavaSxcript，三是HTML，下面开始一步一步实现，最后可以下载完整源码。

一、CSS部分，这部分主要是定义样式，也就是我们看到的外表；二、JavaScript部分，这部分我们主要实现单击按钮显示根据不同输入，显示不同消息弹框，功能包括自动关闭消息弹框和手动关闭消息弹框；样式包括红色、黄色、蓝色、绿色和黑色五种消息弹框。三、HTML部分，该部分就是如何使用第一、二部分的代码

这一节，自学CSS动画。主要学习了淡入淡出、淡入缩放、缩放、移动、旋转动画效果。先看一下成果。优雅的过渡动画，为你的页面添加另一份趣味！ 在你的选择器里插入 animation 属性，并添加框架内置的 @keyframes 即可实现！

这一小节里，我学习了一些表单元素的样式定，收货颇丰，主要实现了单行文本框输入、多行文本框、数字输入框、开关、单选框、多选框、下拉框、进度条、互动条等一些列表单元素的css样式。二、html代码这一小节里，我学习了一些表单元素的样式定，收货颇丰，主要实现了单行文本框输入、多行文本框、数字输入框、开关、单选框、多选框、下拉框、进度条、互动条等一些列表单元素的样式。

表格和项目列表很直观的显示数据，是我们web开发中经常遇到的最简单表现信息形式。

漂浮提示可以用较为隐藏的方式为用户提供帮助或引导信息，将鼠标移入文字内容后展示。

CSS 弹性布局，flex布局最后一行左对齐；flex布局下两端对齐，不满左对齐。

给 a 元素、input 按钮元素或 button 元素添加 btn 类，即可让此元素变成一个按钮；给按钮添加 red，yellow，blue，green 类可以让按钮变成 红/黄/蓝/绿/透明 的颜色；给按钮添加 small 和 large 扩展类，可以使按钮变小和变大。二、按钮（红色按钮、黄色按钮、蓝色按钮、绿色按钮、透明按钮）

默认将所有 article 标签的子元素做了排版优化，增加间距、设置新的换行机制等，减少重复编写对应的排版样式代码。

css自学框架，引用、正文文字 链接文字 提示文字 较小文字 加粗文字 引用文字 斜体文字 强调文字 加亮文字 含删除线文字 键盘符号样式定义。

给元素添加 .float-left 和 .float-right 类，迅速设置左/右浮动，浮动可以清除元素与元素之间的微小间距。部分情况下使用 float 布局方案会导致父元素塌陷，给元素添加 .clearfix 类即可清除浮动，改善塌陷的问题。

【代码】css自学框架之容器。

box-sizing: border-box就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。box-sizing属性的取值可以为content-box或border-box，对它们的解释如下。1.content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。