仓酷云

标题: 来讲讲：CSS网页计划实例:纯CSS制造的网页的loading [打印本页]

作者: 老尸 时间: 2015-1-15 22:58
标题: 来讲讲：CSS网页计划实例:纯CSS制造的网页的loading
大大缩减页面代码，提高页面浏览速度,缩减带宽成本;
破洛洛文章简介：CSS3Loading(css3,HTML5test)
纯CSS制造的网页的loading。
<!doctypehtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>CSS3Loadingpoluoluo.com(css3,HTML5test)</title>

<style>

#bowlG{

position:relative;

width:128px;

height:128px;

}

#bowl_ringG{

position:absolute;

width:128px;

height:128px;

border:11pxsolid#000000;

-moz-border-radius:128px;

-webkit-border-radius:128px;

border-radius:128px;

}

.ball_holderG{

position:absolute;

width:34px;

height:128px;

left:47px;

top:0px;

-webkit-animation-name:ball_moveG;

-webkit-animation-duration:2s;

-webkit-animation-iteration-count:infinite;

-webkit-animation-timing-function:linear;

-moz-animation-name:ball_moveG;

-moz-animation-duration:2s;

-moz-animation-iteration-count:infinite;

-moz-animation-timing-function:linear;

-o-animation-name:ball_moveG;

-o-animation-duration:2s;

-o-animation-iteration-count:infinite;

-o-animation-timing-function:linear;

-ms-animation-name:ball_moveG;

-ms-animation-duration:2s;

-ms-animation-iteration-count:infinite;

-ms-animation-timing-function:linear;

}

.ballG{

position:absolute;

left:0px;

top:-30px;

width:51px;

height:51px;

background:#FFFFFF;

-moz-border-radius:43px;

-webkit-border-radius:43px;

border-radius:43px;

}

@-webkit-keyframesball_moveG{

0%{

-webkit-transform:rotate(0deg)}

100%{

-webkit-transform:rotate(360deg)}

}

@-moz-keyframesball_moveG{

0%{

-moz-transform:rotate(0deg)}

100%{

-moz-transform:rotate(360deg)}

}

@-o-keyframesball_moveG{

0%{

-o-transform:rotate(0deg)}

100%{

-o-transform:rotate(360deg)}

}

@-ms-keyframesball_moveG{

0%{

-ms-transform:rotate(0deg)}

100%{

-ms-transform:rotate(360deg)}

}

</style>

</head>

<body>

<divid="bowlG">

<divid="bowl_ringG">

<divclass="ball_holderG">

<divclass="ballG">

</div>

</div>

</div>

</div>

</body>

</html>
</p>
CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。

作者: 再现理想 时间: 2015-1-17 20:07
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 冷月葬花魂 时间: 2015-1-26 22:29
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 变相怪杰 时间: 2015-2-5 05:15
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 山那边是海 时间: 2015-2-11 06:57
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 老尸 时间: 2015-3-2 00:28
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 简单生活 时间: 2015-3-11 03:37
可以使用 CSS 检查工具进行设计。

作者: 飘飘悠悠 时间: 2015-3-17 21:22
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 深爱那片海 时间: 2015-3-25 07:01
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

欢迎光临仓酷云 (http://ckuyun.com/)