• 当前标签:HTML5架构

程序开发 H5学习之正课终于开始了。。。

等了一个月终于开始上正课了,真是坑啊! <!--定义HTML文档--> <html>      <!--如果body和head标签颠倒位置的时候能显示     但当body里面的内容非常多时会使页面显示两次-->     <!--定义文档的头部-->     <head>         <!--UTF-8国际通用编码-->         <!--charset这行代码最好放在head中的第一个标签 这样页面就不会出现乱码-->         <meta charset="UTF-8">         <!--title定义文档的标题-->         <title>CSS第一天</title>         <style>             p{                 /*设置字体颜色*/                 color: blue;                 /*设置字体大小*/                 font-size: 24px;             }             span{                 color: red;             }             /*上面的样式所有的span都会有影响*/             /*后代选择器             div span                          子代选择器             div>span             */             div span{                 color: yellow;             }         </style>     </head>     <!--body包含文档的所有内容-->     <body>         <!--p标签表示段落-->         <div>夜<span>色太</span>美</div>         <span>今夜学习html</span>         <div>我们<p>讨论<span>HTML学习的方法</span>讨论中</p></div>         <section>         <!--br换行 break的缩写-->         <!--  non breaking space 不换行空格-->         <div>我喜欢 HTML5</div>         <!--使用<br>和 来实现换行和空格(保持html的缩进对齐格式,保持html的可读性)-->     </section>     <html>     <head>         <meta charset="UTF-8">         <title></title>         <style>         </style>     </head>     <body>     </body>     </html>     </body>     <!--<实体名称指的是 <      >实体名称指的是 >-->     ♠ ♥     <!--实体编号 HTML-->     <!--十六进制-->     我喜欢你 </html> <!--保存CRLF格式时,用记事本打开换行 保存LF格式时,用记事本打开不换行-->

2017-04-05 23:50:42 57 0 0
阅读详情

程序开发 H5--风车动画

  [secret key='5297'] 今天开始培训了,学习h5,不知道h5的就业情况怎样?在上大学的时候选错专业真的是很悲剧的,出来不好找工作,我现在觉得只要不是重点名牌大学,选个好专业比选学校好多了!你们觉得智游集团的培训怎样?说是签就业协议,保证工作后工资不低于5k,这是真的吗?h5的未来怎样?应该不错吧。 早上主要讲了h5的相关历史啊,能做什么之类的。听了到现在又忘了o(╯□╰)o [/secret] 简单学习H5架构和做一个风车动画页面。 H5架构学习如下: <!--html定义文档--> <html> <!--head标签用于定义文档的头部 它是所有头部元素的容器--> <head> <!--utf-8国际通用编码格式 防止出现乱码--> <meta charset="UTF-8"> <!--title定义文档的标题--> <title>H5基本架构</title> <!--stlye设置标签的样式--> <style> /*样式选择器*/ body{ /*属性名 :属性值*/ /*设置背景颜色*/ background-color:red; /*设置字体颜色*/ color:white; /*设置字体大小*/ font-size:50px; } </style> </head> <!--body定义文档的所有内容(比如 文本 超链接 图像 表格等)--> <body> 欢迎你们来学习HTML5 </body> </html> 风车动画代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>旋转的大风车</title> <style> section{ width: 1000px;/*设置宽*/ height: 500px;/*设置高*/ /*设置背景颜色*/ /*background-color:cornflowerblue;*/ /*设置背景图片 URL链接资源*/ background-image:url(caodi.png); /*设置图片大小*/ background-size: 100%; margin: 0 auto; } .d1{ width: 300px; height: 300px; background-image: url(fengche.png); background-size: 100%; position: absolute; top: 70px; left: 440px; } .d2{ width: 150px; height: 150px; background-image: url(fengche.png); background-size: 100%; position: absolute; top: 300px; left: 741px; } .d3{ width: 250px; height: 250px; background-image: url(fengche.png); background-size: 100%; position: absolute; top: 200px; left: 878px; } div{ animation-name: xuanzhuan; animation-duration: 0.6s; animation-timing-function: linear; animation-iteration-count: infinite; } /*@keyframes关键帧动画*/ @keyframes xuanzhuan{ 0%{ /*transform使......改变*/ transform: rotate(0); } 100%{ transform: rotate(360deg); } } </style> </head> <body> <!--块元素 独占一行 能设置宽高 行元素 横向排列 不能设置宽高 行内块元素 既能设置宽高 又能向右排列--> <section> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> </section>

2017-03-05 07:56:05 81 1 0
阅读详情
  • 1
前往