对阵Flash 实战HTML 5技巧之页面设计

    在上一篇文章《对阵Flash 实战HTML 5技巧之页面布局》中我们给大家介绍了一个符合HTML5标准的网页的设计过程，在本篇文章中，我们紧接上一篇的内容，继续踏上HTML5之旅。
　　文章的评论区域
　　在文章后的读者评论区域中，我们使用的是sections标签，如下：
<section id="comments">
<h1> 3 Comments
<article class="comment">
<div class="comment-meta" id="comment-1">
<a href="" rel="external nofollow">Homer Simps on
<img src="" class="avatar"
/>
<time datetime="" pubdate>

<div class="comment-body">
<p>

<article class="comment">
<article class="comment">
<article class="comment">

　　在id为comments的section区域内，存放的是读者的所有评论，每一条评论都被设置放在内，在标签内，再使用div及相关样式进行了设置修饰。
　　页面的footer div部分
　　在评论区域后，是广告区域，这里我们设计一个大的div层，如下图：

　　其代码结构如下：
<div id="footer">
<aside class="sub-footer">
<h1>
<p>
<ul>
<li><a href="">
<li><a href="">
<li><a href="">
<li><a href="">

<aside class="sub-footer">
<h1>
<p>
<ul>
<li><a href="">
<li><a href="">
<li><a href="">
<li><a href="">

<aside class="advertising">
<h1>
<a href=""><img src=""
/>

详细说明：http://html5.662p.com/thread-52-1-1.html

时间： 2024-11-06 09:57:08

对阵Flash 实战HTML 5技巧之页面设计的相关文章

flash详解和技巧

Rails中关于报错信息有专门的falsh接口,使用方式跟session很像.flash的翻译是一闪而过,作用也是如此:flash中存储的信息在下一个请求中用一下然后就自动清空. 实际操作: 原来的代码(注意如下是user局部变量而不是@user实例变量,这是因为该动作不需要对应的视图,且重定向页面时不需要显示对应的 @user.errors所以使用局部变量即可) 修改后的代码: 注意:redirect_to就是向浏览器发出下一个请求,那么flash保存的信息就会在下一个请求:root或者:lo

Flash CS 6绘图技巧之锁定填充

说明: 很多同学在刚学习FLASH绘图时对于填充时系统默认情况下总是把那个锁定按钮按下,不太理解.也就是说,他不会使用锁定填充. 本文将给出使用FLASH绘图过程中关于锁定填充的较细致的解释,希望对同学们有所帮助. 使用"锁定填充"(Lock Fill)修改器可创建出一种效果,那就是使一幅位图或渐变颜色充满整个舞台,而它填充的区域好比是蒙在舞台上的一块布上所开的"洞",通过这些"东"看 到了被布蒙着的图形.所以使用这个修改器可使一幅图或渐变色同时

Visual Studio跨平台开发实战(3) - Xamarin iOS多页面应用程式开发

原文 Visual Studio跨平台开发实战(3) - Xamarin iOS多页面应用程式开发 前言 在前一篇教学中, 我们学会如何使用Visual Studio 搭配Xcode 进行iOS基本控制项的操作. 但都是属于单一画面的应用程式. 这次我们要来练习如何透过Navigation Controller来建立多页面的iOS应用程式. 设定专案及画面 1. 开启Xamarin Studio 并建立新专案, 专案类型为iOS=>iPhone=>空白专案, 专案名称为02-Navigatio

Visual Studio跨平台开发实战(5) - Xamarin Android多页面应用程式开发

原文 Visual Studio跨平台开发实战(5) - Xamarin Android多页面应用程式开发 前言 大部份的Andr??oid 都具有实体或虚拟的Back键. 因此在处理多页面应用程式时, 与先前所介绍的iOS Navigation controller 比较起来会简单许多. 1. 开启Visual Studio 并新增Android Application 专案并命名为Lab4-MultiScreen   2. 在Layout资料夹中新增Second.axml   在Second

PHP职场之面试实战指南-面试技巧、考官思路

PHP职场之面试实战指南-面试技巧.考官思路目录: 第1章 了解基本面试流程和面试的核心要求第2章 PHP基础知识考察点第3章 JavaScript.jQuery以及AJAX基础考察点第4章 Linux基础考察点第5章 MySQL数据库考察点第6章 程序设计题考察点第7章 PHP框架基础知识考察点第8章 算法.逻辑思维考察点第9章 高并发解决方案类考察点第10章 面试技巧第11章 课程总结 下载地址:百度网盘下载 原文地址:https://www.cnblogs.com/saoseger/p/1

触动人心的手机端页面设计

随着网络越来越发达,智能手机迅速普及,现在手机端网络已经占据市场的70%.近两年,手机流量从2G一直升级到现在的4G,还有各地免费开放的WIFI.人们从一开始的电脑冲浪,已经大部分时间都转移到如今更加方便携带的手机冲浪上了.在国外,媒体发布了一项关于智能手机的调查报告,据Bistro报道,人们在使用智能手机的时候,有66%在家里,59%在旅途上,52%在乘坐交通工具上,38%在餐厅里,30%在商场里.而使用手机上网的时间,已经远远的超过了打电话的时间,手机带来的便利,使得越来越多的人注意到了手机

引用“人人都是产品经理“-移动端电商类页面设计说

引用:http://mt.sohu.com/20160119/n435004127.shtml 移动端产品最难的地方就是在很小的屏幕上展示出你所有的业务.有了屏幕的限制,加上移动端的客户碎片化阅读的习惯和高流失率.特别是电商类app更难展示出来.所以才有了像列表式小ICON展示方式.电商的标准配置的首页都会将banner保留下来了,作为运营推广最重要的手段之一.而电商app是要展示内容最多也是最难做的一类app.既要保证业务首页展示完整性,还要保证用户体验.所以在每一个页面设计时都要讲究一些技巧

html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计

序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死款高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度相同 成为一个正方形 甚至任何你想要比例 一,背景:目前移动端大多数图片或视频列表页面的显示,列出几个 可以看出这几个页面都有一个共同点 都有图片 双列 列表单个模块的高度相同  我演技劜他们的源码 都是讲图片设置为固定高度 然后将li撑开 li的宽度设置为50% 然后floatleft 然后用媒体

《企业云桌面实施》-小技巧-08-建筑设计行业-真实效果-漫游动画-三维视图渲染

<企业云桌面实施>-系列博文-陆续更新中 **************************************************************************************************** <企业云桌面实施>-小技巧-01-规划注意事项 http://dynamic.blog.51cto.com/711418/1884922 <企业云桌面实施>-小技巧-02-使用ISO光驱安装esxi6.5http://dynami