web前端-学习随记
关注
分享
扫一扫
文章平均质量分 59
xuyongsky1234
这个作者很懒，什么都没留下…
展开
-
采用CSS3的动态元素（动画）设计div块的层级式展现
此练习作品是为学习HTML5+CSS3而设计的（如有不好请大家批评指教~~~）。操作：当页面加载时，点击网页中的绿色块（一层），则有其他几块（二层）从其中央出现并向外延伸并旋转，点击这几块中任意一个颜色模块，则被点击的颜色模块将“逐渐”取代原先一层绿色模块，其余模块将渐变消失！ 采用了CSS3的动画@keyframes规则设计div块的移动、伸缩、旋转和渐变： 动画定义：anima...原创 2014-12-11 16:44:17 · 1124 阅读 · 0 评论 -
[TOP]CS3媒体查询能检测到的特性小结
CSS3的Media Queries能够检测到的特性总结：视口（viewport）解释地址：http://baike.baidu.com/view/1522985.htm width：视口宽度的检测height：视口高度的检测device-width：设备屏幕宽度（设备渲染平面宽度）的检测device-height：设备屏幕高度（设备渲染平面高度）的检测orientat...原创 2014-11-23 14:52:33 · 558 阅读 · 0 评论 -
采用CSS3设计的登录界面，动态效果（动画）
与上一篇的“采用CSS3设计的登陆界面”的相同，只是样式style添加了CSS3的动画元素。style内容如下：<style> html,body,div{ margin:0; padding:0; font-size:100%; } html{ //background:url('./6.jpg') no-repeat; ...原创 2014-11-21 10:06:27 · 3116 阅读 · 0 评论 -
CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）
本篇讲解CSS特异性（CSS Specificity）的细节，也就是CSS样式选择器的权重计算通过计算选择器的权重（weight）最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定，即“优先原则（priority rules）”！ 首先，我们来一个简单的例子：<body> <ul id="summer-drinks"> &l...原创 2014-12-11 14:48:53 · 915 阅读 · 0 评论 -
javascript中原型（prototype）与原型链
javascript是一门动态语言（动态语言Dynamic Programming Language：动态类型语言，意思就是类型的检查是在运行时做的，也就是常说的“弱类型”语言），没有类的概念，有class保留字，但不能用作变量名原型：Javascript中的每一个对象都有一个内部私有的连接指向另一个对象，这个对象就是原对象的原型 注意：原型是一个对象，其他对象可以通过他实现属性继承原型...转载 2014-12-17 00:23:07 · 505 阅读 · 0 评论 -
纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
虽然网上类似甚至相同的案例有很多，但是我还是写下，以记下笔记，也可供大家参考希望大家可以指导批评~~首先我们以列表ul li 来开始我们菜单也可以说导航条的制作：在页面中我们首先构建以下XHTML结构：<body> <ul id="navWrapper"> <li> <a href="#">Menu A...原创 2014-12-23 15:45:29 · 1152 阅读 · 0 评论 -
纯CSS实现tooltip提示框，CSS箭头及形状
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状！首先介绍一下CSS：after选择器定义和用法：(参考w3school:after选择器) ：after选择器在被选元素的内容后面插入内容，使用content属性来指定要插入的内容例：p:after{ content:"台词：-"; background-color:yellow; ...原创 2014-12-09 15:56:39 · 1265 阅读 · 0 评论 -
纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框，通俗的讲也就是CSS箭头及形状 不过注意一点是，他始终是一个元素，只是通过CSS实现的，今天我们要说的是给这个“tooltip提示框”整体加一个边框，下面是是一篇完成的截图（不了解的可以看看：纯CSS实现tooltip提示框，CSS箭头及形状）：首先像:after一样我们介绍另外一个CSS中“ :before ”选择器定...原创 2014-12-11 00:25:16 · 3233 阅读 · 1 评论 -
采用CSS3设计的登陆界面
body部分内容：<body> <form id="form_id" name="form_id" method="get" action="http://baidu.com" onsubmit="return checkUser()"> <div id="loginForm"> &原创 2014-11-21 09:43:36 · 1147 阅读 · 0 评论