自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了,css3的部分也看过了,但是觉得讲得不太好,全部都是点到为止.无意中找到了传智播客的视频讲了一些css3的小技巧,今天就写一下用CSS3做网页中的小三角. 大致网上关于小三角的做法无非三种: 直接用背景图片,这个没什么好说的: 用块元素设置宽高都为0,三角的高用一条边框宽度,其他三条边框用dashe…

首先要说一下,transition属性ie9是不支持的,从ie10才开始支持 例子是当鼠标移上div后,它会旋转180度. 要点: 用圆角制作圆形盒子,border-radius设置成50%: 用box-shadow来制作内填充填满的效果,box-shadow有6个参数 水平阴影宽度(px); 垂直阴影宽度(px); 模糊距离(px); 阴影大小(px); 阴影颜色: 外部阴影(outset,默认)还是内部(inset); 用transition做动画,将圆形盒子里的图标也跟着转180度 -要注…

:enabled选择器 在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等.在默认情况之下,这些表单元素都处在可用状态.那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式. 示例演示 通过“:enabled”选择器,修改文本输入框的边框为2像素的红色边框,并设置它的背景为灰色. HTML代码: <form action="#">   <div>     <labe…

urllib最常用的两大功能(个人理解urllib用于辅助urllib2) 1.urllib.urlopen() 2. urllib.urlencode()   #适当的编码,可用于后面的post提交数据 import urllib Dict = {'name' : 'Michael Foord', 'location' : 'Northampton', 'language' : 'Python'} print urllib.urlencode(Dict) urllib2常用的函数 1.最基本的…

1· 读前预期 考虑到对于 Web 开发零基础,凡涉足一件未知的任务,最好先理清任务的逻辑结构,然后有目的地逐步学习.为实现我们的需求和设计,必须要学习前端.后端.服务器等一系列暂时陌生的知识,在此,我首先疑问的是,我们理想的功能如何以网页内容和交互的形式体现.于是准备先从前端下手,期望从程序的角度对什么是网页有一个新的理解,理清构建网页的大体过程,为我们真正开始实现功能做铺垫. 该书不仅能带零基础的学习 HTML 和 CSS,还能实战性的教读者如何逐步构建网页.在此,我倾向于概读,重在对书中的…

CSS3 私有化前缀 考虑到CSS3的兼容性问题,某些属性需要添加浏览器的私有化前缀 几种主流浏览器的私有化前缀如下: Chrome.Safari:-webkit- Firefox:-moz- IE:-ms- Opera:-o- CSS3 之前已有的选择器 div{}:标签选择器 .box{}:类选择器 #box{}:ID选择器 div:hover{}:伪类选择器 div p{}:后代选择器 div.box{}:交集选择器 div,p{}:并集选择器 *{}:通配符选择器 CSS3 属性选择器…

入驻博客园两个月之后的第一篇随笔,希望能够做到三个原则: One:不浪费自己的时间, Tow:不浪费读者的时间, 第三就是希望有缘的朋友们多多指教,共度前端快乐的大坑!!! 咱们今天来做一个居家旅行必备的小tips,展现前端老前辈的智慧,积淀的文化... 先来一个小口诀[呆会会用到的,不用着急记住它哦] 四方小三角(上,下,左,右) 尖角反方线,给颜色  /*设置边线*/ 两边夹角线成透明  /*设置边线*/ 参数都相同  /*线的参数都一样*/ 给予三条边  /*有三条边哦*/ 八方小三角(左…

CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径向渐变则是以一个点为基点(圆心),以点向四周进行渐变.渐变形状为一个圆,重复渐变则分为重复线性渐变和重复径向渐变,是对于前面两种渐变的一种重复模式. 语法: linear-gradient:point| angle color percentage point表示方向,angle表示角度. colo…

今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. 注意:Flexbox布局是最合适的一个应用程序的组件,以及小规模的布局,而网格布局是用于较大规模的布局. 盒模型的兼容性不佳,在使用时,需要加上浏览器的私有前缀. 父元素display:box或者display:inline-box; display: -webkit-box;display: -m…

前面我们讲过的变形与动画一般都是通过鼠标的单击.获得焦点,被点击或对元素进行一定改变后以后触发效果的,那么有没有像Flash一样自动播放的动画效果呢?答案当然是肯定的,这就是我们今天要讲到的animation. 通过 CSS3中的animation,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是”Keyframes”,我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西…