PDF《【项目 1-1】使用 HTML5+CSS3 绘制 HTML5 的》

【项目 1-1】使用 HTML5+CSS3 绘制 HTML5 的logo HTML5 logo 呈现出的感觉是强大、安全,具有前瞻性,光芒明亮、用色大胆,而这些 都代表着 HTML5 的形象.

本项目使用 HTML5+CSS3 绘制出 HTML5 的logo,页面效果如 图1所示. 图1HTML5 官方 logo 【项目 1-2】构建移动版旅游网站页面 本项目使用 HTML5 语义化结构标签来构建一个简单的页面, 让读者学习语义化结构标 签的同事,回顾 CSS 的基础知识,页面效果如图

2 所示. 图2移动版旅游网站页面 【项目 2-1】电子杂志页面 现在的社会是电子化、智能化、网络化的时代,为了迎合时代潮流的发展,很多知名杂 志都陆续出现了电子版产品, 本项目要完成一个简单美观的电子杂志页面, 主要以图文为主, 页面效果如图

3 所示. 图3电子杂志页面 【项目 2-2】软文推广页面 广告软文是一种企业网站推广的表现形式, 其精美的外观和精简的内容信息很容易被用 户所接受,从而达到很好的推广效果,本项目使用字体图标实现一个软文推广页面.页面效 果如图

4 所示. 图4广告推广软文页面 【项目 2-3】手机邮箱导航页面 现在大部分的企业都在使用企业邮箱,因为它安全而且高效,而且不仅在 PC 端提供支 持,移动也提供了更自由的办公体验,这就是手机邮箱,本项要完成一个手机邮箱的导航页 面,如图

5 所示. 图5手机邮箱导航栏 【项目 3-1】传智书城 现如今网购已经成为大多数人生活中必不可少的一部分, 因为足不出户就能买到自己心 仪的商品大大的压缩了用户的时间成本.购物网站通常会以图文混排的方式展示商品信息, 本项目要实现一个名为传智书城的网上书城页面,如图

6 所示. 图6传智书城页面 当鼠标悬停到某个商品上时,会出现商品的价格等信息,如图

7 所示. 图7鼠标悬停效果 【项目 3-2】多肉商城 多肉植物由于可以吸收辐射, 成为了受欢迎的室内植物, 本项目将带领读者实现一个多 肉植物的购物商城页面, 与项目 3-1 的传智书城页面相比, 本项目结合 CSS3 的一些新特性, 如圆角、过渡、变形等对购物页面进行了一系列的优化,如图

8 所示. 图8多肉商城 当鼠标悬停到某个商品时, 会出现商品描述, 商品图片层中间会两个交汇的三角形的效 果,如图

9 所示. 图9交汇的三角形 【项目 3-3】摇晃的桃子 CSS3 的出现使网页中的动画效果不在只依赖与 flash 和JavaScript,本项目是一个有趣 的动画效果,名称叫做摇晃的桃子,如图

10 所示. 图10 摇晃的桃子 【项目 4-1】移动版登录页面 传统行业的商家十分重视门面的装潢, 因为一个好的门面会使用户活跃度变得很高, 在 一个网站中,可以把用户登录看做"门面",它的设计重要性就不言而喻了,本项目要实现 一个用户登录页面,如图

11 所示. 图11 用户登录页面 该界面包含用户名输入框、密码输入框和登录按钮,其中"用户名"、"密码"为提示 文字,在用户输入文字后会自动消失,只保留用户输入的文字,获得焦点的文本框颜色会发 生变化,如图

12 所示. 图12 用户登录页面 【项目 4-2】用户注册页面 用户注册是指将用户的相关信息提交到服务器的过程,没有注册的用户无权使用网站 的一些功能,用户注册页面的设计不需要太过花哨,大方简洁的效果更好,本项目要完成一 个用户注册页面,如图