【CSS3学习笔记（5）—页面遮罩效果】的更多相关文章

CSS3学习笔记(3)-CSS3边框

p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; padding: 5px; margin: 1em 0 1em 0; } .alexrootdiv>div>p:first-of-type,.alextitlep{ font-size: 18px; font-weight: bold; color: red; } .alexrootdiv spa…

微信小程序开发：学习笔记[8]——页面跳转及传参

微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层,我们把这样的一个页面层级称为页面栈. 后续为了表述方便,我们采用这样的方式进行描述页面栈:[ pageA, pageB, pageC ],其中pageA在最底下,pageC在最顶上,也就是用户所看到的界面,需要注意在本书编写的时候,小程序宿主环境限制了这个页面栈的最大层级为10层 ,也就是当页面栈…

CSS3学习笔记（5）—页面遮罩效果

今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩. 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮在按钮上时,会出现整个页面的遮罩,当然调一下透明度就是网页中经常看到的当鼠标悬浮在一张图片上时,周围的其他图片都被遮罩了,这样就达到了突出这张图片的效果,其实这个效果做出来很简单. 一.主体程序: <!DOCTYPE html> <html> <head> <meta…

HTML5+CSS3学习笔记（一）

HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML5必将被越来越多的Web开发人员所使用,各大主流浏览器厂家已经积极更新自己的产品,以更好地支持HTML5. 一.一个新的Web开发平台 HTML5围绕一个核心:构建一套更加强大的Web应用开发平台. 优势: 1)更多的描述性标签:HTML5引入非常多的描述性标签,例如用于定义头部(header).尾…

CSS3学习笔记之linear-gradient

我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HTML在我看来也是很值得研究的,只有时刻保持一个谦逊的姿态,才能够看得更远,走得更稳. 在这里要感谢一下网站: w3cplus,W3School ,W3C 等等一些网上的教程啊博客什么的(还有好多就不一一列举了),我算是从这些地方开始接触传说中的CSS3和HTML5,而自己的学习笔记自然也会从中借鉴. 建议:大…

HTML5+CSS3学习笔记（一） 概述

HTML5+CSS3概述      HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML5必将被越来越多的Web开发人员所使用,各大主流浏览器厂家已经积极更新自己的产品,以更好地支持HTML5. 一.一个新的Web开发平台     HTML5围绕一个核心:构建一套更加强大的Web应用开发平台. 优势: 1)更多的描述性标签:HTML5引入非常多的描述性标签,例如用于定义头部(…

[CSS3] 学习笔记-HTML与CSS简单页面效果实例

一个简单的首页的设计: html文件: <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="1.css"> </head> <body> <…

HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义补充或相关内容: 学习这些…

css3学习笔记之效果

<!DOCTYPE html> <html> <head> <style> #t1 { border-radius: 15px; width:60px; height:40px; background: #00FF99; transition: width 1s, height 1s, transform 1s,background 1s,font-size 1s; word-wrap:break-word; font-size:5px; text-alig…

css3学习笔记之文本效果

CSS3的文本阴影 CSS3中,text-shadow属性适用于文本阴影. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 5px 5px 5px #FF0000; } </style> </head> <body>   <h1>Text-shadow eff…