当前位置:   article > 正文

[HTML]Web前端开发技术23(HTML5、CSS3、JavaScript )HTML5 基础与CSS3 应用,animation,text-shadow,word-wrap——喵喵画网页

[HTML]Web前端开发技术23(HTML5、CSS3、JavaScript )HTML5 基础与CSS3 应用,animation,text-shadow,word-wrap——喵喵画网页

希望你开心,希望你健康,希望你幸福,希望你点赞!

最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!!

喵喵喵,你对我真的很重要!

目录

前言

CSS3 动画animation

CSS3 动画animation子属性设置

CSS3 多列属性

CSS3 文本效果

1.文本阴影text-shadow 属性

2.文本换行text-wrap 属性

3.控制换行word-wrap 属性

4.文本溢出text-overflow 属性

综合练习

总结


前言

这是整个章节的最后一篇,来吧!


CSS3 动画animation

3@keyframes 规则的绑定

       绑定动画名称(例如myAnimation)到某个元素(div)的样式上,并指定时长。格式如下:

div{

/* 设置图层基本样式 */

width:100px;height:100px;background:red;position:relative;

/* 设置标准动画子属性 */

      animation: myAnimation 8s;

-moz-animation: myAnimation 8s;      /* Firefox */

-webkit-animation: myAnimation 8s;   /* Safari Chrome */

-o-animation: myAnimation 8s;           /* Opera */

}


CSS3 动画animation子属性设置

  1. div{
  2. /* 设置图层基本样式 */
  3. width:100px;height:100px;background:red;position:relative;
  4. /* 设置标准动画子属性 */
  5. animation-name:myMOve;
  6. animation-duration:5s;
  7. animation-timing-function:linear;
  8. animation-delay:2s;
  9. animation-iteration-count:infinite;
  10. animation-direction:alternate;
  11. animation-play-state:running;
  12. /* 仅以Safari and Chrome浏览器为例,其余类似。 */
  13. -webkit-animation-name: myMOve;
  14. -webkit-animation-duration:5s;
  15. -webkit-animation-timing-function:linear;
  16. -webkit-animation-delay:2s;
  17. -webkit-animation-iteration-count:infinite;
  18. -webkit-animation-direction:alternate;
  19. -webkit-animation-play-state:running;
  20. }
  21. @keyframes myMOve{
  22. /* 定义不同关键帧的样式 */
  23. 0% {background:red; left:0px; top:0px;}
  24. 25% {background:yellow; left:200px; top:0px;}
  25. 50% {background:blue; left:200px; top:200px;}
  26. 75% {background:green; left:0px; top:200px;}
  27. 100% {background:red; left:0px; top:0px;}
  28. }

举个例子

  1. <!-- edu_13_6_8.html -->
  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>CSS3动画</title>
  7. <style>
  8. div{width:100px;height:100px;background:red;position:relative; color:white;
  9. animation:mymove 5s ;
  10. -moz-animation:mymove 5s infinite;
  11. -webkit-animation:mymove 5s infinite;
  12. -o-animation:mymove 5s infinite;
  13. }
  14. @keyframes mymove{
  15. from,0% {left:0px;background:red;top:0px;}
  16. 50% {left:100px;background:green;top:100px;}
  17. to,100%{left:200px;background:blue;top:200px;}
  18. }
  19. @-webkit-keyframes mymove /* Safari 与 Chrome */
  20. {
  21. from,0% {left:0px;background:red;top:0px;}
  22. 50% {left:100px;background:green;top:100px;}
  23. to,100%{left:200px;background:blue;top:200px;}
  24. }
  25. @-moz-keyframes mymove /* Firefox */
  26. {
  27. from,0% {left:0px;background:red;top:0px;}
  28. 50% {left:100px;background:green;top:100px;}
  29. to,100%{left:200px;background:blue;top:200px;}
  30. }
  31. @-o-keyframes mymove /* Opera */
  32. {
  33. from,0% {left:0px;background:red;top:0px;}
  34. 50% {left:100px;background:green;top:100px;}
  35. to,100%{left:200px;background:blue;top:200px;}
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <h3>CSS3动画-沿矩形对角线运动</h3><hr>
  41. <div>我在运动!</div>
  42. </body>
  43. </html>

CSS3 多列属性

使用CSS3 多列属性可以创建多个列来对文本进行布局,如同编辑报纸和杂志一样。常用的CSS3 多列属性主要有column-countcolumn-gapcolumn-rule 等。

基本语法

   columns: column-width column-count; /* 复合属性*/

   column-count: number|auto

   column-width: auto|length;

   column-rule: column-rule-width column-rule-style column-rule-color;

      /* 复合属性*/

   column-rule-width: thin|medium|thick|length;

   column-rule-style: none|hidden|dotted|dashed|solid|double|groove| ridge|

inset|outset;

   column-rule-color: color;

   column-gap: length|normal;

   column-fill: balance|auto;   /* balance列长短平衡; auto列顺序填充*/

举个例子

  1. <!-- edu_13_6_9.html -->
  2. <!doctype html>
  3. <html lang="en">
  4. <head><meta charset="UTF-8">
  5. <title>CSS3多列属性的应用</title>
  6. <style>
  7. p{text-indent:2em;
  8. column-count:3; /* 设置列数 */
  9. column-gap:50px; /* 设置列间隙 */
  10. column-rule:4px outset #ff0000; /* 设置列宽度、线型、颜色 */
  11. }
  12. h2{
  13. column-span:all; /* 设置标题跨所有列 */
  14. text-align:center;background:#99ff99;
  15. height:40px;font-size:28px;padding:6px auto;}
  16. </style>
  17. </head>
  18. <body>
  19. <h2>HTML 5 简介</h2>
  20. <p>HTML标准自199912月发布的HTML4.01后,后继的HTML5和其它标准被束之高阁,为了推动Web标准化运动的发展,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web超文本应用技术工作组 -WHATWG) 的组织。WHATWG 致力于 Web 表单和应用程序,而W3C(World Wide Web Consortium,万维网联盟) 专注于XHTML2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。<br>
  21. HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队。<br>
  22. HTML 5 的第一份正式草案已于2008122日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。<br>
  23. 20121217日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。”<br>
  24. 201356日, HTML 5.1 正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标记语言(HTML)。在这个版本中,新功能不断推出,以帮助Web应用程序的作者,努力提高新元素互操作性。<br>
  25. 本次草案的发布,从20121227日至今,进行了多达近百项的修改,包括HTML和XHTML的标签,相关的API、Canvas等,同时HTML5的图像img标签及svg也进行了改进,性能得到进一步提升。<br>
  26. 支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器,Safari,Opera等;国内的傲游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。</p>
  27. </body>
  28. </html>

CSS3 文本效果

1.文本阴影text-shadow 属性

    1)基本语法

     text-shadow: h-shadow v-shadow blur color;  //语法

     text-shadow:2px 2px 8px #FF0000;//示例

2)语法说明

    text-shadow 属性向文本添加一个或多个阴影。该属性是空格分隔的阴影列表,其中h-shadow 定义水平阴影,允许负值,必需;v-shadow 定义垂直阴影,允许负值,必需;

    blur 可选。模糊的距离。color 可选。阴影的颜色。省略的长度是0

2.文本换行text-wrap 属性

1)基本语法

       text-wrap: normal|none|unrestricted|suppress;

2)语法说明

     text-wrap:文本换行规则。所有浏览器目前均不支持此属性。

3.控制换行word-wrap 属性

1)基本语法

      word-wrap: normal|break-word;

2)语法说明

     word-wrap 自动换行属性允许强制文本进行换行,会对单词进行拆分。该属性有两个值:normalbreak-word。其中normal 表示只在允许的断字点换行(浏览器保持默认处理);break-word 表示在长单词或 URL 地址内部进行换行。

4.文本溢出text-overflow 属性

    1)基本语法

         text-overflow: clip|ellipsis|string;

    2)语法说明

    text-overflow: 属性规定当文本溢出包含元素时发生的事情。该属性有三个属性值,分别为clipellipsisstring。其中clip 表示修剪文本;ellipsis 表示显示省略符号来代表被修剪的文本;  string 表示使用给定的字符串来代表被修剪的文本。

举个例子

  1. <!-- edu_13_6_10.html -->
  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>CSS3文本效果</title>
  7. <style>
  8. h2{text-align:center;background:#99ccff;padding:5px auto;}
  9. h1 {text-shadow:2px 2px 8px #FF0000;/* 设置文本阴影 */}
  10. p.test{width:15em; border:1px solid #000000;
  11. word-wrap:break-word;/* 设置自动换行*/}
  12. div.test{white-space:nowrap;/* 规定文本不进行换行 */ width:12em;overflow:hidden; border:1px solid #000000;}
  13. </style>
  14. </head>
  15. <body>
  16. <h2>CSS3文本效果</h2>
  17. <h1>具有模糊效果的文本阴影</h1>
  18. <p>【未设置换行和宽度的段落】This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
  19. <p class="test">【设置强制换行和宽度的段落】This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
  20. <h3>下列div 包含长文本,都能正常显示</h3>
  21. <div id=“” class=““>HTML 5 的第一份正式草案已于2008122日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。</div>
  22. <h3>下面两个div包含无法在框中容纳的长文本。不能完全显示,文本被修剪了。</h3><hr>
  23. <p>下列div使用 "text-overflow:ellipsis"</p>
  24. <div class="test" style="text-overflow:ellipsis;">HTML 5 的第一份正式草案已于2008122日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。</div>
  25. <h3>下列div使用 "text-overflow:clip"</h3>
  26. <div class="test" style="text-overflow:clip;">HTML 5 的第一份正式草案已于2008122日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。</div>
  27. </body>
  28. </html>

综合练习

以“HUAWEI CONNECT 2016 全联接大会”的会议注册页面为例,采用HTML5 构建页面。

      1)整个页面采用article 标记构架。使用headerfooterhgroupfigurefigcaptionformfieldset 等标记来进行页面布局。

       (2)会议注册页面。采用fieldsetlegend 进行表单元素分组。在其中分别采用input类型为textemailteldatesubmitreset 等来布局页面,注册姓名、报告题目、工作单位等文本输入域不能为空。

       (3footer 部分中宾馆信息采用address 标记进行布局。

  1. <!-- edu_13_7_1.html -->
  2. <!doctype html>
  3. <html lang="en">
  4. <head><meta charset="UTF-8">
  5. <title>HTML5表单</title>
  6. <style type="text/css">
  7. img:hover{transform:rotate(30deg);}
  8. </style>
  9. </head>
  10. <body>
  11. <article style="margin:20px auto;width:850px;height:900px;background:#eeeeee;padding:30px;">
  12. <header>
  13. <hgroup>
  14. <h1>塑造云时代,联接企业的现在与未来</h1>
  15. <h3>HUAWEI CONNECT 2016全联接大会</h3>
  16. <p style="text-indent:2em;">[中国,上海,<time datetime="2016-09-01">2016091</time>]在HUAWEI CONNECT 2016全联接大会上,华为IT产品线总裁郑叶来发表了“塑造云时代,联接企业的现在与未来”主题演讲,重磅发布了基于FusionCloud的31款云服务、FusionStorage 6.0云存储与FusionStage PaaS平台,并与现场的客户、合作伙伴、媒体、分析师等分享了华为在塑造云时代的过程中如何帮助企业加速云化,挖掘更多商业价值。</p>
  17. <figure style="text-align:center;">
  18. <img src="huawei_it.jpg" width="500" border="0" alt=""><br>
  19. <figcaption>华为IT产品线总裁郑叶来发表主题演讲</figcaption>
  20. </figure>
  21. </hgroup>
  22. </header>
  23. <form method="post" action="">
  24. <fieldset style="text-align:center;margin:10px 40px;">
  25. <legend>会议注册页面</legend>
  26. 注册姓名:<input type="text" name="" required>
  27. 报告题目:<input type="text" name="" required><br>
  28. 工作单位:<input type="text" name="" required>
  29. 手机号码:<input type="tel"><br>
  30. 电子邮件:<input type="email" name="">
  31. 报到时间:<input type="date" /><br>
  32. <input type="submit" value="注册"><input type="reset">
  33. </fieldset>
  34. </form>
  35. <footer>
  36. <p>住宿信息:请314日以后注册的代表自行预订会议期间的住宿。会务邮箱phylab@fudan.edu.cn。</p>
  37. <p>给您推荐的宾馆:<address>邯郸路100号如家快捷酒店(复旦店)酒店电话021-51055577国定路428号 ;<br> 同舟大厦 酒店电话 021-65110356 。两家宾馆距离学校都非常近步行5分钟之内</address></p>
  38. </footer>
  39. </article>
  40. </body>
  41. </html>

总结

       本章介绍了HTML5 新特性和一些基础的HTML5 的应用。重点讲述HTML5 的新增属性、新增表单属性、新增表单的input 类型、媒体元素(视频、音频)等方面的知识和程序设计技巧。

       HTML5 新增了headernavarticlesectionasidefooter 等结构元素,使用这些语义的标记构建网页更为方便、快捷。HTML5 新增的其他页面元素也极大地丰富了页面内容与表现,结合JavaScript 脚本能够设计具有更好的用户体验的网站。HTML5 技术在移动互联网时代会具有更加杰出的表现。

       运用CSS3 新增转换、过渡和动画特性可以增强页面的表现效果。运用CSS3 多列属性、文本效果属性可以美化页面排版效果。


希望你开心,希望你健康,希望你幸福,希望你点赞!

最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!!

喵喵喵,你对我真的很重要!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/83473
推荐阅读
相关标签
  

闽ICP备14008679号