用了css3的两个属性animation-duration，transition
你可以学习一下，看看怎么用
一、 具备本地调试PHP的功能
在WINDOWS XP *** 作系统下，笔者建议你可以到网上下载一个PHP+MYSQL+APHCHE的服务器套装，如华军软件园，去那里搜索一下就可以下载到。下载完后默认安装即可，这样您就具备了在本地测试PHP的功能了，省去了很多手动配置的麻烦，怎么样，简单吧，OK，这仅仅只是第一步。
二、 构思新闻发布系统所具备的功能
首页的新闻发布往往是通过后台更新的，后台的更新无非是由添加、编辑、删除数据等基本的功能所实现的。在这里，你可以使用网页设计软件来构建你的想要的后台界面，其功能的实现当然是要用到PHP喽。这一步建议您先想好新闻发布系统要有的功能。在这里，如何用PHP添加、编辑、删除数据就不再重复，因为重点是如何在这基础上生成静态技术。
三、 PHP生成HTML的技术原理。
哈哈。费话说了那么多，终于到了该讲的地方了。其实，这一原理并不复杂，综合地来讲的话，应该是PHP中一个替换数据语法的应用。OK，讲一个简单范例吧，一步一步地分析！相信聪明的你能看得明白的咯，仔细看好每一步即可，在这里，只是引导大家如何做而已，具体的可以实践一下！
（1）在MYSQL里新建一数据库，命名为 database （可自定义），新建一表，命名为 news（因为是新闻发布嘛，取个好记的名字即可，可自定义），然后建立这几个字段名：
id (自动递增，这是关键，类型：INT)
title (顾名思义，新闻标题，类型可取 TEXT)
content (新闻内容，类型可取 TEXT)
path (HTML文件路径，类型可取 TEXT)
（2）建立 conn.php
这是连接数据库的PHP文件，你可以把连接数据的语句单独放在这一文件里，以后多个需要连接数据库的文件直接引用这个文件即可。
（3）设计添加新闻的表格 add.form 简单的源代码如下:
12345<form method=”post” action=”add.php”>//提交至 add.php 新闻标题:<input type=”text” name=”title” size=”20”><br> 新闻内容:<textarea name=”content” cols=”10” rows=”25”></textarea><br> <input type=”submit” name=”提交”></form>（4）建立一个 HTML 的模板,另存为model.htm,和 add.php可以在同一目录下。
示例源代码:
123456<html> <body> 此新闻的标题:{title} 此新闻的内容:{content} </body> </html>{ }大括号内的内容即是要被替换的内容，整个静态模板的设计可以根据自己的思路，但{ }内被替换的内容必须包含在内，如上面的{title}，{content}；咔咔~简单地说，设计好一个很好看的新闻模板后，把要被替换的如{title},{content}等标记放到需要的地方就可以了撒。
（5）详解 add.php 源码
1234567891011121314151617181920212223242526272829303132333435363738394041424344<?php require_once(“conn.php”)； //引用conn.php，连接数据库 $title=$_POST[“title”] $content=$_POST[“content”]//获得表单变量 //以下建立一文本文档，其值自动计数 $countfile="count.txt" if(!file_exists($countfile)) { fopen($countfile,"w")//如果此文件不存在，则自动建立一个 } $fp=fopen($countfile,"r") $num=fgets($fp,20) $num=$num+1//每次其值自动加一 fclose($fp) $fp=fopen($countfile,"w") fwrite($fp,$num)//更新其值 fclose($fp) //利用上面自动计数的值获得HTML的路径$path $houzui=”.html” $path=$num.$houzui //这样形成的路径是自动增长的，如1.html,2.html,3.html……….添加一条新闻便自动加上1 //以下用SQL语句添加数据至表 news $sql=”insert into news (title,content,path) values (‘”.$title.”’,’”.$content.”’,’”.$path.”’)” $query=mysql_query($sql) //以下为关键之处，把从表单获得的数据替换模板中的{title},{content}标记 $fp=fopen(“model.htm”,”r”) //只读打开模板 $str=fread($fp,filesize(“mode.htm”))//读取模板中内容 $str=str_replace(“{title}”,$title,$str) $str=str_replace(“{content}”,$content,$str)//替换内容 fclose($fp) $handle=fopen($path,”w”)//写入方式打开新闻路径 fwrite($handle,$str)//把刚才替换的内容写进生成的HTML文件 fclose($handle) //收尾工作: echo “<a href=$path target=_blank>查看刚才添加的新闻</a>”?>OK,整个生成HTML的示例源码就到这里，其关键是用了替换的方法。
$str=str_replace(“{被替换的内容}”,$替换的内容,$str)
因此，总结一下以上的做法：先设计好新闻模板，把需要被替换的内容用{ }放到模板中相应的位置，然后设计表单，再是最后的表单处理程序，把从表单中获取的变量替换模板中相应的内容即可，这样每次都会生成不同的HTML；如果需要修改HTML的内容也是一样的，获得修改后的表单内容后，先用 update 语句更新数据库，再重新替换一下模板中的内容即可；删除的话，先delete表中要删除的内容，再用unlink($path) 来删除HTML的物理文件即可。
前端框架学好Web框架，熟悉掌握HTML、服务器端脚本语言、CSS和JavaScript之后，学习Web框架可以加快Web开发速度，节约时间。PHP程序员可选的框架包括CakePHP、CodeIgniter、Zend等，Python程序员喜欢使用Django和 webpy，Ruby程序员常用RoR。
随着Web 越来越规范和标准的统一，Web组件化技术不断革新，移动端开发不断升华，以下是一些常见开源前端框架:
Bootstrap
主流框架之一，Bootstrap 是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。
html5-boilerplate
该框架可以快速构建健壮，且适应力强的web app或网站。
Meteor
Meteor是新一代的开发即时web应用的开源框架，它能在较短时间内完成开发。
Semantic UI
基于自然语言有效原则的UI组件框架
Foundation
优秀的响应式前端框架
Materialize
基于材料设计的现代化响应式前端框架。可提供默认的样式，自定义组件。此外，Materialize还改进动画和过渡，为开发人员提供流畅的体验。
Pure
几乎可以在每一个web项目中使用的一组小的和响应式的CSS模块。
Vue
Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。
Skeleton
Skeleton 是一个小的 JS 和 CSS 文件的集合,可快速开发漂亮的网站,适合各种屏幕设备包括手机。Skeleton 基于 960 grid 开发。它是一个 UI 框架。
Amaze UI
国内首个开源HTML5跨屏前端框架产品系列，中文排版支持更优、本土化组件丰富。该产品系列中有专门针对移动端的HTML5混合应用开发框架Amaze UI Touch以及针对跨屏HTML5网页开发的Amaze UI Web。其中，Amaze UI Touch可以帮助开发者通过丰富的组件，快速构建出与原生APP相媲美的专属移动端的HTML5应用。
UIkit
一个轻量级的和模块化的前端框架,用于快速开发和功能强大的web接口。
Yui
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库，为了能建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证。
kissy
一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。
MUI
最接近原生App体验的前端框架的框架。
Arale
一个开放、简单、易用的前端基础类库。
JX
JX 是模块化的非侵入式Web前端框架，特别适合构建和组织大规模、工业级的Web App。
GMU
GMU是基于zepto的mobile UI组件库，提供webapp、pad端简单易用的UI组件! Web App。
ZUI
开源HTML5前端框架
Clouda Touch.js
Touch.js是移动设备上的手势识别与事件库,也是在百度内部广泛使用的开发。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）