【html+css3实现网页时钟】的更多相关文章

html+css3实现网页时钟

在网页上实现时钟功能,效果如右图所示: 运用到的关键技术有:css3中的旋转.旋转基点设置 旋转:transform:rotate(*deg) 旋转基点:transform-origin: x轴偏移 y轴偏移 样式代码: <style type="text/css" id="style"> #clock{ width:200px; height: 200px; border: 1px solid #000000; margin: 100px auto;…

【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

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

《CSS3专业网页开发指南》笔记

书本:<CSS3专业网页开发指南>(the book of css3) Peter Gasston 著    李景媛 吴晓嘉 译 第1章: 1.box-sizing : IE8及以上版本 box-sizing: content-box;//width || height = content box-sizing:border-box;//width || height = content+padding+border -moz-box-sizing:padding-box;//火狐专用,wid…

使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载

HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" class="light"> <div class="display"> <div class="date"></div> <div class="digits"><…

网页计算器 && 简易网页时钟 && 倒计时时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

学习笔记 第十二章 CSS3+HTML5网页排版

第12章   CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1  使用结构标签 在制作网页时,不仅需要使用<div>标签来构建网页,还要使用下面几类标签完善网页结构: <h1>.<h2>.<h3>.<h4>.<h5>.<h6>:定义文档标题: <p>:定义段落文本: <ul>.<ol>.<li&…

CSS3简易表盘时钟

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3时钟</title> <style> .box{ width: 300px; height: 300px; border-radius: 50%; border: 5px solid #ccc; margin: 100px auto; p…

利用CSS3制作网页动画

如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转.缩放.倾斜等变换语法transform:[transfrom-function]*; 变形函数translate():平移函数,基于X Y坐标重新定位元素位置scale(): 缩放函数,可以是元素对象尺寸放生变换rotate():旋转函数,取值是一个度数skew(): 倾斜函数,取值是一个度数值2…

简单的js实现网页时钟

js实现时钟. <div id="clock"></div> <script type="text/javascript"> function ChangeClock() { var time=new Date(); document.getElementById("clock").innerHTML="当前时间:"+time.getFullYear()+"年"+(tim…

css3制作网页中常见的小箭头

/* css3三角形(向上 ▲) */ div.arrow-up { width:0px; height:0px; border-left:5px solid transparent;  /* 右透明 */ border-right:5px solid transparent; /*右透明 */ border-bottom:5px solid #2f2f2f; /* 定义底部颜色 */ font-size:0px; line-height:0px; } /* css3三角形(向下 ▼) */ d…